UX/UI Design · Project 06
Design a Food Delivery App
Create a clear, appealing mobile experience that helps people find meals, customize an order, pay securely, and track delivery.
Your goal: make ordering feel easy, reliable, and welcoming for people with different needs and budgets.
🍜Explore meals</div><div class="food-tile">🥗Find healthy options</div><div class="food-tile">🍔Customize an order</div><div class="food-tile">🛵Track delivery</div></div> </section>
Client: Choose your own fictional restaurant, food-delivery service, or app brand. Use AI only when it directly supports the assignment requirements. Do not add unrelated features or extra screens.
1. Project objectives
Design a food-delivery app that allows users to browse restaurants, choose meals, customize their orders, pay securely, and have food delivered to their doorstep. The experience should be user-friendly, visually appealing, accessible, and efficient.
FindDiscover restaurants and food that fit the user’s needs.</div><div class="fact">OrderCustomize meals and complete checkout without confusion.</div><div class="fact">FollowUnderstand order status and estimated delivery time.</div></div><div class="note">Design reminder: Do not design screens just to make the app look impressive. Every screen should help users complete a task.</div></div>
2. Target audience
Use the sample personas below to guide your design decisions. They represent different user priorities; your app should make it easy for each person to find appropriate options.
💼</div><h3>Marcus Lee, 32</h3><p class="role">Busy professional</p><p>Needs quick, dependable delivery and convenient ordering. He values healthy meals but also needs affordable options.</p></article>
🥦</div><h3>Sophia Patel, 37</h3><p class="role">Health-conscious eater</p><p>Looks for nutritious food and clear information about dietary restrictions. Quality matters, but price still matters too.</p></article>
👨👩👧</div><h3>Sandra Jenkins, 35</h3><p class="role">Budget-conscious parent</p><p>Needs quick family meals, healthy choices, and delivery that fits a limited budget after a long workday.</p></article>
</div>
3. App requirements
- Let users browse restaurants available in their area.
- Allow users to customize orders, add special instructions, and identify dietary needs.
- Show order status and estimated delivery time.
- Provide a clear, secure, easy-to-use payment experience.
- Allow users to review and rate restaurants and delivery drivers.
4. Choose a platform
Design for iOS or Android. Follow the conventions and interface guidelines for the platform you select. Be consistent with navigation, touch targets, typography, and spacing.
5. Reference apps
Study these services to understand how food-delivery apps organize information and guide users. Do not copy their screens. Identify useful patterns, then develop your own visual direction and brand.
6. Required deliverable: User flow in FigJam
Before designing your screens, map the user journey in FigJam. Your user flow should show the main decisions and actions a person takes to find food and place an order. Use arrows to connect steps, and include a decision point when the user might change direction.
01 · StartOpen app / sign in</div><div class="flow-arrow">→</div><div class="flow-step">02 · DiscoverSearch or browse restaurants</div><div class="flow-arrow">→</div><div class="flow-step">03 · ChooseSelect restaurant and meal</div><div class="flow-arrow">→</div><div class="flow-step">04 · CustomizeOptions, quantity, instructions</div><div class="flow-arrow">→</div><div class="flow-step">05 · ReviewCheck cart, fees, and total</div><div class="flow-arrow">→</div><div class="flow-step">06 · CheckoutAddress and payment</div><div class="flow-arrow">→</div><div class="flow-step">07 · CompleteConfirmation and tracking</div></div><div class="note">Include at least one decision: What happens if a meal is unavailable, the user changes the cart, or payment fails? Show how the user can recover instead of getting stuck.</div></div>
Submit: a FigJam user-flow diagram that is readable, logically connected, and consistent with the seven screens you will design. Start from the provided course user-flow template if one has been supplied in D2L.
02 — Build Your UI/UX Style Guide
A style guide helps you make consistent design decisions before you build the final screens. It prevents you from choosing colors, type sizes, and button styles independently on every screen.
Open the Figma UI/UX Style Guide Template →
Use the actual course template shown below. These screenshots are from the Student UI/UX Style Guide template used in class. Duplicate the Figma file, then complete these same sections for your Uber holiday-ride redesign. The examples farther down this page are supplementary demonstrations, not replacement templates.
Start with visual research
Collect three visual references that help establish your design direction. These might include mobile interfaces, typography, color palettes, maps, transportation apps, or other relevant visual material. Add a short note explaining what you want to learn from each reference.
<figcaption class="wp-element-caption">Actual course template — Visual Research & Moodboard. Add visual references and explain the direction they suggest for your Uber redesign.</figcaption></figure>
<figcaption class="wp-element-caption">Actual course template — Color & Contrast. Define color roles and check that text, controls, and error states remain easy to distinguish.</figcaption></figure>
<figcaption class="wp-element-caption">Actual course template — Typography & Spacing. Document the type hierarchy and spacing rules you will use consistently across your screens.</figcaption></figure>
<figcaption class="wp-element-caption">Actual course template — Components. Document reusable buttons, fields, cards, navigation, and relevant interaction states.</figcaption></figure>
Foundations
Define the product’s purpose, intended user, primary task, and visual direction. Your decisions should support the user flow you created.
<figcaption class="wp-element-caption">Actual course template — Foundations. Use this section to establish the project before designing screens.</figcaption></figure>
Color and contrast
Establish a small, purposeful color system. Identify the role of each color, including primary actions, backgrounds, text, and error states. Check that text and interface elements remain readable. Color should communicate meaning clearly rather than serve only as decoration.
<figcaption class="wp-element-caption">Actual course template — Color. Apply the color roles to your own redesign and check contrast.</figcaption></figure>
Typography and spacing
Create a consistent type hierarchy for headings, body text, and captions. Establish spacing values for padding inside elements and gaps between elements.
<figcaption class="wp-element-caption">Actual course template — Typography & Spacing. Use these type and spacing rules consistently across the interface.</figcaption></figure>
For example, you might use 16 px inside a card and 24 px between cards. The important thing is to apply your choices consistently.
Components
Define reusable interface elements, such as buttons, input fields, cards, and navigation. Components should look and behave consistently throughout the app.
<figcaption class="wp-element-caption">Actual course template — Components. Adapt these reusable elements to your product and document their behavior.</figcaption></figure>
Interaction states and accessibility
Consider what happens when a user interacts with an element. Depending on the component, relevant states may include default, hover, focus, pressed, disabled, error, or success.
<figcaption class="wp-element-caption">Actual course template — States. Document how interactive elements respond to different states.</figcaption></figure>
Check contrast, text readability, visible focus indicators, clear labels, and whether meaning depends on color alone.
Deliverable: Complete the relevant sections of the Figma style guide and keep it available while designing your prototype.
<figcaption class="wp-element-caption">Actual course template — Accessibility. Check contrast, readable type, visible focus, clear labels, and distinct feedback.</figcaption></figure>
Submit: a Figma Design style-guide page showing your color palette, typography, buttons, form fields, icons, spacing rules, and reusable components. The seven app screens should use these same styles.
8. Required screens
Your final design must include the seven screens below. The mini mockups are visual references to help you understand the purpose of each screen—not layouts to copy exactly.
Welcome to QuickBite</div><div class="mock-food">🥡</div><div class="mock-line"></div><div class="mock-line short"></div><div class="mock-button">Get started</div></div>
Find your next meal</div><div class="mock-search">⌕ Search dishes</div><div class="mock-food">🍕</div><div class="mock-line"></div><div class="mock-line short"></div><div class="mock-food">🥗</div></div>
Build your order</div><div class="mock-food">🍜</div><div class="mock-line"></div><div class="mock-line short"></div><div class="mock-button">Add to order</div></div>
Order on the way</div><div class="mock-food">🛵</div><div class="mock-line"></div><div class="mock-line short"></div><div class="mock-button">Track order</div></div>
SCREEN 01<h3>Onboarding</h3><p>Introduce the app and communicate its value. Include a clear next step such as creating an account or exploring the app.</p></div>
SCREEN 02<h3>Home</h3><p>Help users search, explore food categories, and discover popular restaurants or meals.</p></div>
SCREEN 03<h3>Restaurant details</h3><p>Show the restaurant, menu, food imagery, ratings, and information users need before choosing.</p></div>
SCREEN 04<h3>Ordering</h3><p>Allow users to select items, adjust options, note dietary needs, and review their order.</p></div>
SCREEN 05<h3>Payment</h3><p>Summarize the order and total, present payment options, and make the final action clear.</p></div>
SCREEN 06<h3>Order tracking</h3><p>Show progress, estimated delivery time, and useful status updates.</p></div>
SCREEN 07<h3>Profile</h3><p>Let users manage their name, address, payment methods, past orders, and favorite restaurants.</p></div>
DESIGN QUALITY<h3>Consistent system</h3><p>Use a consistent type scale, color palette, buttons, spacing, and navigation across all screens.</p></div>
9. Prototype refresher: Make your screens clickable
Need a quick reminder of how to connect your screens in Figma Design? Watch this short official Figma tutorial, then try the same steps with your food app. You do not need complicated animations—focus on making the main ordering journey work.