Pedzai, C. (2024). UX/UI design brief #10: Redesigning Uber App for Increased Holiday Rides. Retrieved from https://uxdesignmastery.com/ux-ui-design-brief-10-redesigning-uber-app-for-increased-holiday-rides/
UX/UI DESIGN BRIEF #10
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.
Start with the service and the needs of the people using it. Your redesign should solve a specific problem, not recreate the entire Uber app.
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.
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 →
Figma UI/UX Style Guide. Use the template to document your visual direction, color system, typography, spacing, reusable components, and accessibility decisions before you finish your screens.
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.
Template preview: Visual Research & Moodboard. Add three references and short notes describing what you can learn from each one.
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.
Template preview: Color & Contrast. Define color roles and make sure important text and controls are easy to see.
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.
Template preview: Typography & Spacing. Set a readable type hierarchy and repeat spacing values consistently.
Components
Define reusable interface elements, such as buttons, input fields, cards, and navigation. Components should look and behave consistently throughout the app.
Template preview: Components. Document the recurring elements you will use across your prototype.
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.
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> </figure> </div>
Select an interaction handle to connect an interface element to its destination screen.
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.