PINDER Digital Menu
Create or get matched with your “pizza of destiny”!
Role: UI designer
Project Summary
Key features overview
Design process... is a lot like making a pizza!
Shaping features
Flow building
Wireframing
Choose toppings
Design system
Accessibility
Decision making
Bake the pizza
Hi-fi screens
Prototyping
Documentation
Shaping features
What kind of user experience are we providing?
How might we gain value for both the customers and the restaurant?
Aligned UI design
Trust-building features
Restaurant & staff story
Ingredient producer story
Nutritional value
Highly interactive features
Create your own pizza
Pizza flavor matching with AI
Flow building
Main user flow: place an order
Wireframing
Main user flow: create a pizza and place a dine-in order
Design guidelines
Visual style exploration
Hi-fi playground
My initial design
Teammates’ initial design
CREATE YOUR PIZZA
PINDER
Pizza & Wine
Size
Crust
149 kr
American
M (10“)
You can customize your own pizza
Add To Cart
M
Italian
Whole-wheat dough
Tofu
Onions
Sesame seeds
Teriyaki sauce
Total: 159kr
YOUR PIZZA
Vegetarian
Gluten-free
Pizza #1009
Logo iteration
PINDER
Pizza & Wine
Good design system makes it easy for everyone.
Color
The primary color
Selective Yellow (#FFB703) conveys cheerfulness, fostering a fun tone. Its high saturation adds good contrast and liveliness to the secondary blue tone, capturing the restaurant’s vibrant atmosphere.The accent color
Cello (#133A5F) is a deep royal blue shade. The team nicknamed it “hipster blue” as it adds a classy vibe. The darkest shade is also used as the text color.The background color
Fantasy (#F9F4F2) adds playfulness and a mild flirty tone to the entire expression, catering to the adult target users. It plays a significant role to helps the main colors pop.
Typography
Headline & subtitle font
Roboto mono is known for good readability, which makes it friendly to a wide audience. When used with our vibrant color scheme, it also brings a game-like vibe, aligned with the fun experience we’re aiming for.Body & label font
Poppins is selected for good readability, and aligned with the clean design guideline.Line height
For larger types like title, headline and display: 1.2 times the type size
For smaller types like body and label: 1.5 times the type size
Components
Variants & variables
Spacing
Screen format
Mobile: iPhone 14 & 15 Pro Max
Tablet: iPad Pro 12.9
Container
Mobile: 398px
Tablet: 960px
Grid
Mobile: 4 column 16 gutter 16 margin
Tablet: 8 column, 16 gutter, 32 margin
Spacing
Mobile
Between buttons: mins. 10px
Between CTA buttons: 24px
Reflection: how did it taste?
Challenges & learnings
Challenge 1: Making collaborative design decisions
Learnings:
Providing objective context when raising proposals, instead of turning to personal taste as reasoning, helps to build a healthy conversation.
Being able to kill one’s darlings, stay open-minded for discussion & iteration, is the key to keep the team progress on track and produce high-quality result.
Challenge 2: Building a collaborative design system
Learnings:
To ensure an efficient workflow, set up a clear file structure with consistent naming conventions and a well-defined hierarchy (page-section-layer-components) to organize work.
Staying vigilant about potential human errors and implementing good practices, such as locking frames after completion, can help avoid unwanted accidents.
What I’d do differently
Speed up wireframing.
It’s for internal communication, and doesn’t need to be perfect.
Test more rounds.
This helps to pick out mindless mistakes and refine prototype.
Have a developer as consultant.
This helps to confirm design feasibility and file format.
Add a real-time pizza creation simulation.
This gives users a clear idea of the final product.
Supervisor feedback
“Great work! This is a very good design. One thing I’m missing is more images (photos) which I commonly expect on a restaurant website, but the typography, layouts, and animations are very well done.”
- Mehmet Aydın Baytaş | Instructor | industry leader | hyper island
