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.
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.
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.
Marcus Lee, 32
Busy professional
Needs quick, dependable delivery and convenient ordering. He values healthy meals but also needs affordable options.
Sophia Patel, 37
Health-conscious eater
Looks for nutritious food and clear information about dietary restrictions. Quality matters, but price still matters too.
Sandra Jenkins, 35
Budget-conscious parent
Needs quick family meals, healthy choices, and delivery that fits a limited budget after a long workday.
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.
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.
Foundations
Define the product’s purpose, intended user, primary task, and visual direction. Your decisions should support the user flow you created.
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.
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.
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.
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.
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.
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.
Onboarding
Introduce the app and communicate its value. Include a clear next step such as creating an account or exploring the app.
Home
Help users search, explore food categories, and discover popular restaurants or meals.
Restaurant details
Show the restaurant, menu, food imagery, ratings, and information users need before choosing.
Ordering
Allow users to select items, adjust options, note dietary needs, and review their order.
Payment
Summarize the order and total, present payment options, and make the final action clear.
Order tracking
Show progress, estimated delivery time, and useful status updates.
Profile
Let users manage their name, address, payment methods, past orders, and favorite restaurants.
Consistent system
Use a consistent type scale, color palette, buttons, spacing, and navigation across all screens.
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.
As you follow along:
- Open the Prototype tab in Figma Design.
- Connect a button or other interactive element to the screen it should open.
- Set the first screen as the starting point and preview the flow.
- Click through the main food-ordering journey and fix any dead ends.
Open Figma’s Prototyping Fundamentals lesson if you need the written steps.
10. Suggested workflow
- Define the user. Choose which persona your design will prioritize and identify their main needs.
- Map the user flow in FigJam. Diagram the path from opening the app to placing and tracking an order, including decision and recovery paths.
- Create the UI/UX style guide in Figma Design. Establish colors, typography, buttons, form fields, spacing, icons, and reusable components.
- Design the seven screens. Start with clear layouts and meaningful hierarchy before adding decorative details.
- Check the full journey. Make sure users can move from discovering food to successful checkout and order tracking.
- Test and refine. Ask someone to complete a simple task using your prototype. Note where they hesitate and improve those areas.
11. Final submission checklist
- A completed FigJam user-flow diagram is included.
- A completed Figma Design UI/UX style guide is included.
- All seven required screens are included.
- The chosen platform (iOS or Android) is clear.
- The user flow is understandable and matches the screens.
- Typography, color, buttons, spacing, and navigation are consistent.
- Text is readable and controls are easy to identify.
- Dietary needs, order customization, payment, and delivery status are addressed.
- The prototype links the screens into a coherent user journey.
- Design choices support the target user rather than adding unnecessary features.