Redesigning Uber for the Holiday Season
A visual guide to planning your user flow, building a UI/UX style guide, designing key screens in Figma Design, and using Figma Make to help complete an interactive prototype.
The Project
The holiday season can make getting around more challenging. People need to coordinate rides, navigate busy locations, and make decisions quickly.
Your challenge is to redesign a focused part of the Uber app to make a holiday ride experience easier to understand and use.
User Flow
Map the steps a person takes to accomplish a specific task.
UI/UX Style Guide
Establish the visual rules for your interface.
Interactive Prototype
Build a clickable Figma prototype that demonstrates the redesigned experience.
These deliverables work together. Your user flow establishes the experience, your style guide establishes its visual language, and your flat screen designs give Figma Make a clear visual reference. You will use both Figma Design and Figma Make—not Figma Make alone—to build the final prototype.
01 — Start With the User Flow
Before designing screens, determine what the user needs to accomplish. Choose a specific holiday-related transportation problem. Identify the starting point, the decisions a user must make, and the successful outcome.
Your user flow should show
- The starting point and the user’s goal.
- The sequence of actions and screens.
- Decisions and alternative paths.
- Relevant error, cancellation, or recovery paths.
- The successful completion of the task.
Remember: A user flow maps the logic of the experience. It is not a collection of finished app screens.
Deliverable: Submit a clearly labeled user flow created in Figma or FigJam, accompanied by a brief explanation of your design decisions.
Review: The Project Process in Figma/FigJam
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.
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.
Start with visual research
Define the product’s purpose, intended user, primary task, and visual direction. Your decisions should support the user flow you created.
Foundations
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.
Deliverable: Complete the relevant sections of the Figma style guide and keep it available while designing your prototype.
03 — Design Key Screens in Figma Design First
Do this before opening Figma Make. Figma Make works best when you provide a clear visual direction and concrete screen designs. First, use Figma Design to create a small set of key flat designs (static screens) that show what the product should look like. These are the visual references that will help guide the prototype Make builds.
You do not need to design every possible screen in advance. Start with the most important screens in your user flow—for example, the starting screen, the main task screen, a decision or details screen, and a confirmation or result screen.
Your key flat designs should establish
- The main layout and content hierarchy on each screen.
- Navigation, buttons, forms, cards, and other important interface elements.
- The colors, type styles, spacing, and components from your UI/UX Style Guide.
- Realistic interface copy and the information users need to complete the task.
- A consistent visual system across all of the screens.
Screen 1: Destination
Clear entry point and a visible primary action.
Screen 2: Pickup details
Specific location cues reduce confusion in a crowd.
Screen 3: Ride options
Compare choices, arrival times, and prices.
Screen 4: Confirmation
Reassure the user and make next steps clear.
Deliverable: Create your key flat screen designs in Figma Design. Keep the frames organized and clearly named so you can refer to them while working in Figma Make.
04 — Use Figma Make to Complete the Prototype
After you have designed your key screens, use Figma Make to help turn the designs and your written instructions into a working prototype. Treat Make as a collaborator, not as a substitute for your design decisions. Provide your goal, describe the user flow, refer to your flat designs, and explain which interactions should work.
Prepare
Finish the user flow, style guide, and key flat designs in Figma Design.
Prompt
Describe the purpose, users, screens, visual rules, and expected interactions in Figma Make.
Refine
Compare Make’s result with your designs. Correct visual inconsistencies and test the main journey.
Important: Do not begin with a vague prompt and expect Figma Make to invent the entire design system. Your key screens and style guide should give it a clear visual target.
05 — Connect and Test the Interactive Prototype
Watch: Intro to Figma Make
This official Figma tutorial demonstrates how to turn an existing Figma design into an interactive prototype. It covers prompting, navigating the editor, refining results, and sharing your work.
As you watch: Notice how the prompt describes the intended product and how the design is refined after the first result. Complete your key flat screen designs and style guide in Figma Design first, then use them to guide Figma Make. Do not rely on a single vague prompt to determine the entire visual design.
Use your user flow and style guide to build the redesigned experience. Your prototype should demonstrate the complete journey needed to accomplish your chosen task, with enough screens to make the experience understandable from beginning to end.
Your prototype should include
- Screens that follow your user flow.
- Consistent colors, typography, spacing, and components.
- Clickable buttons and navigation where appropriate.
- Clear feedback when the user takes an action.
- Relevant confirmation, error, or recovery states.
- Realistic interface text and content.
Your prototype does not need to reproduce every feature of Uber. Focus on making your chosen user journey work well. Check that the key screens from Figma Design are reflected in the Make prototype and that the main interactions are clear and usable.
Deliverable: Submit your Figma Design file containing the user flow, UI/UX Style Guide, and key flat screen designs, plus a shareable link to your Figma Make interactive prototype. Make sure the prototype starts at the correct screen and that its main interactions work.
Student examples: Review the examples provided in D2L, including the prototype created with Figma Make.
Design Principles to Remember
Reduce cognitive load
Keep each screen focused on the information and actions the user needs at that moment.
Make actions clear
Users should understand what a button does before they select it.
Provide feedback
Confirm important actions and help users understand what is happening.
Be consistent
Reuse established patterns instead of making users learn a new interaction on every screen.
Design for accessibility
Readable text, sufficient contrast, clear labels, and predictable interactions benefit everyone.
For additional guidance, review UX Laws and The Project Process in Figma/FigJam.
Before You Submit
- My user flow communicates a clear task and successful outcome.
- My style guide documents the visual system used in my design.
- I created the key flat designs in Figma Design before using Figma Make.
- My Figma Make prototype follows the user flow and references my flat designs.
- My interface uses consistent components and spacing.
- My primary interactions work.
- My screens provide clear feedback and readable content.
- My Figma file and prototype link are accessible to the instructor.
The goal is not simply to make an attractive interface. It is to design an experience that helps someone accomplish a real task clearly, efficiently, and confidently.