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.
</figure>
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.
</div>
01<h3>User Flow</h3><p>Map the steps a person takes to accomplish a specific task.</p></div>
02<h3>UI/UX Style Guide</h3><p>Establish the visual rules for your interface.</p></div>
03<h3>Interactive Prototype</h3><p>Build a clickable Figma prototype that demonstrates the redesigned experience.</p></div>
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.
AMDE 477 | UI/UX DESIGN USER FLOW Plan the journey before you design the screens.
01 START WITH THE GOALWho is the user? What are they trying to accomplish?</div>
02 MAP THE HAPPY PATHShow the simplest successful journey, then add branches.</div>
03 ADD DECISIONS + ERRORSShow where the experience can change, fail, or recover.</div>
Start / End Screen User action Decision Error / recovery
STARTOpen UberUser needs a ride to a holiday event</div>
→</div>
SCREENEnter destinationSearch for the event venue</div>
→</div>
SCREENSet pickup pointChoose a clear, accessible meeting spot</div>
→</div>
DECISIONIs pickup clear?Can the driver find the user?</div>
YESReview ride options and arrival time</div>
NO · ALTERNATE PATHSelect a nearby landmark, then review pickup again</div>
ERROR / RECOVERYPickup needs adjustmentUpdate the location and return to pickup review</div>
↓</div>
USER ACTIONConfirm rideReview fare, pickup details, and arrival estimate</div>
↓</div>
ENDRide confirmedUser knows where to wait and what happens next</div>
This example follows the structure of the AMDE 477 FigJam User Flow Template: a clear title, numbered planning prompts, a flow legend, labeled screens/actions, and decision, alternate, and recovery paths. Use the same visual language when you duplicate the template and adapt the flow to your own holiday transportation problem.
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.
Actual course template — Visual Research & Moodboard. Add visual references and explain the direction they suggest for your Uber redesign.
Actual course template — Color & Contrast. Define color roles and check that text, controls, and error states remain easy to distinguish.
Actual course template — Typography & Spacing. Document the type hierarchy and spacing rules you will use consistently across your screens.
Actual course template — Components. Document reusable buttons, fields, cards, navigation, and relevant interaction states.
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.
Actual course template — Foundations. Define the product, user, primary task, and visual direction before designing screens.
Foundations
Define the product’s purpose, intended user, primary task, and visual direction. Your decisions should support the user flow you created.
Actual course template — Foundations. Use this section to establish the project before designing screens.
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.
Actual course template — Color. Apply the color roles to your own redesign and check contrast.
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.
Actual course template — Typography & Spacing. Use these type and spacing rules consistently across the interface.
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.
Actual course template — Components. Adapt these reusable elements to your product and document their behavior.
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.
Actual course template — States. Document how interactive elements respond to different states.
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.
Actual course template — Accessibility. Check contrast, readable type, visible focus, clear labels, and distinct feedback.
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.
FLAT DESIGN EXAMPLESFinished static screens in Figma DesignThese are visual references—not wireframes or clickable prototypes.</div>
9:41● ● ●</div><div class="uber-screen-top">HOLIDAY TRAVELGood eveningWhere to?</div><div class="uber-search"> Search destination ↗</div><div class="uber-map">●Holiday Market</div><div class="uber-screen-button">Choose destination</div><div class="uber-phone-nav">⌂Home▤Activity◉Account</div></div><p>Screen 1: Destination
Clear entry point and a visible primary action.</p></div>
9:41● ● ●</div><div class="uber-screen-top">Confirm pickupMake your pickup easy to find</div><div class="uber-map uber-map-pickup">●Main Street entrance</div><div class="uber-pickup-tag">✦ Easy-to-find pickup</div><div class="uber-info-card">Pickup location120 Main StreetBy the illuminated entrance</div><div class="uber-screen-button">Confirm pickup</div><div class="uber-screen-link">Edit location</div></div><p>Screen 2: Pickup details
Specific location cues reduce confusion in a crowd.</p></div>
9:41● ● ●</div><div class="uber-screen-top">YOUR RIDEChoose your ridePickup in about 4 min · Arrive by 7:20 PM</div><div class="uber-ride-option uber-selected">▰UberX4 seats · Everyday ride$18.40</div><div class="uber-ride-option">▰Comfort4 seats · Extra comfort$24.10</div><div class="uber-ride-option">▰XL6 seats · More room$31.20</div><div class="uber-screen-button">Confirm UberX</div></div><p>Screen 3: Ride options
Compare choices, arrival times, and prices.</p></div>
9:41● ● ●</div><div class="uber-confirm-icon">✓</div><div class="uber-confirm-kicker">YOU’RE ALL SET</div><div class="uber-screen-top uber-center">Your ride is confirmedYour driver is on the way</div><div class="uber-driver-card"><div class="uber-avatar">JD</div>Jordan D.White Toyota Camry · 4XYZ218Arriving in 4 minutes4.98 ★</div><div class="uber-info-card">Pickup120 Main StreetWait by the illuminated entrance</div><div class="uber-screen-button">View ride details</div><div class="uber-screen-link">Share trip status</div></div><p>Screen 4: Confirmation
Reassure the user and make next steps clear.</p></div>
Example direction for a consistent set of finished, flat app screens. Treat these as inspiration for layout and hierarchy; create your own designs and adapt them to the visual system in your UI/UX Style Guide.
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.
01<h3>Prepare</h3><p>Finish the user flow, style guide, and key flat designs in Figma Design.</p></div>
02<h3>Prompt</h3><p>Describe the purpose, users, screens, visual rules, and expected interactions in Figma Make.</p></div>
03<h3>Refine</h3><p>Compare Make’s result with your designs. Correct visual inconsistencies and test the main journey.</p></div>
Workflow: User flow → UI/UX Style Guide → finished flat screens in Figma Design → interactive prototype in Figma Make.</div>
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.
Test your prototype with people, observe where they hesitate, and improve the design.</figcaption> </img></figure> </div>
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.
Actual course template — States. Show how interactive elements change across default, hover, focus, pressed, disabled, and error states.
Actual course template — Accessibility. Check contrast, visible focus, clear labels, readable type, and distinct feedback states.
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.