1 of 84

UX Portfolio

Brian Lin

2 of 84

Who am I?

Hi! I’m Brian, a designer with 7 years of experience in building consumer and SaaS products.

Uber Eats

Kleiner Perkins Fellow

View of Mt. Fuji, one of my favorite trips in 2024.

SpeedX (Series A)

Odeko (Series E)

Fay (Series B)

3 of 84

Marketplaces

Operation-heavy problems

Bits to Atoms

Where I excel

4 of 84

Design Interests

Focused on green transportation, healthcare, logistics, and learning about climate action initiatives.

Recipient of Climatebase Launch Scholarship

Terra.do Fellow an online climate education bootcamp.

Met with the executives of BYD and city of Shenzhen in China to learn about their green city grid infrastructure initiative.

My Climatebase initiative is top build a unified UX-layer for electric vehicle charging

5 of 84

Simple Easy

My Design Principle

Principle adapted from Rich Hickey’s “Simple Made Easy” 2011 developer talk

Easy feels fast, familiar, comfortable.�

But ease can create hidden complexity.�

I design for simplicity — systems that are clear, composable, and scalable.

6 of 84

Easy now = Hard later

Why it matters?

Principle adapted from Rich Hickey’s “Simple Made Easy” 2011 developer talk

Easy feels fast, familiar, comfortable.�

But ease can create hidden complexity.�

I design for simplicity — systems that are clear, composable, and scalable.

7 of 84

Odeko - Food Logistics Disruptor

Senior Product Designer (2020-2024)

  • Joined as the 30th employee, grew to over 300+.
  • Recently raised a $126M Series E
  • Our design team grew from 2-6 over that time.
  • Built our first Design System.
  • Worked on B2B products, such as inventory Dashboards and Ordering Dashboards.
  • Wrote an article about Design at Odeko, explaining our process + values.
  • Company grew to $0-$150M Annual Revenue.

In 2024, Odeko was named 12 in Deloitte’s Top 500 Tech Companies List. Also on YCombinator (S19) Top Companies List.

8 of 84

Odeko - Food Logistics Disruptor

Senior Product Designer (2020-2024)

Reach out for more specific questions about my work there!

9 of 84

Uber Eats

Web Pickup/Dine-in

12 weeks Project

Status: Launched

Team

My Role: Main Designer

@christine | Product

@emily | Design (Mentor)

@zhen | Design (Manager)

@brion | Design (App)

@michael | UX Writing

@sylvia | Illustration

@jesus | Engineer

@nick | Engineer

10 of 84

Have you considered using a food delivery service, but didn’t because it was too expensive?

11 of 84

Pizza Slice

Subtotal: $3.50

Tax: $1.00

Delivery Fee: $5.99

Small Item Fee: $3.00

Courier Fee: $3.00

SF-Is-Expensive-Fee: $3.00

Total: Way more than you thought.

12 of 84

Pickup

Dine-in

Order ahead, pick up in restaurant later

Order ahead, food will be ready when you arrive at restaurant

No extra fees!

13 of 84

Question #1

How can Uber Eats expand beyond delivery?

Eats introduced an MVP for Pickup and Dine-in features on the app, but no such feature exists on the website.

Business Goals

14 of 84

Question #2

How can Uber be an operating system for everyday life?

90% of Eaters are Riders, but only 10% of Riders are Eaters.

Business Goals

15 of 84

Therefore, my team and I presented the project as a way to convert Riders to Eaters and improve the app functionality too.

16 of 84

Current Uber app UI

17 of 84

100%

Rollout in US Cities

12

Live in 12 countries

10K

Weekly orders

Stats taken from August 2019

Since Project Launch

… and all achieved without any real marketing campaign at the time.

18 of 84

Success Metrics

Increase in number of Riders converted to Eaters

KPI’s

Increase in total number of pickup and dine-in orders

Decrease in order defect rates

19 of 84

The Process

20 of 84

Eater Journey

21 of 84

Simplify · Educate · Integrate

Simplify

Icons and visual hierarchy

22 of 84

App

Web

  • Black and white pill design

  • Increases visibility of module and dining modality

  • Better visual hierarchy with rest of components

Modality Toggle Redesign

App

Simplify · Educate · Integrate

23 of 84

Modality Toggle Redesign

Web

Simplifying icons and visual hierarchy

Simplify · Educate · Integrate

24 of 84

Desktop Version

Simplify · Educate · Integrate

25 of 84

Changing Modality at Checkout

Simplify · Educate · Integrate

26 of 84

Simplify · Educate · Integrate

Educate

Eaters on new modality and bring awareness

27 of 84

  • Setting sun, shows people picking up food back from work
  • Clearer color and brand features awareness

Pickup

Dine-in

App

Web

App

Web

Illustrations

Simplify · Educate · Integrate

28 of 84

Illustrations

A large portion of Eater defects come from people not knowing they chose pickup, or vice versa.

Simplify · Educate · Integrate

29 of 84

Restaurant Tag

App

Simplify · Educate · Integrate

Web

  • Difficult to see current selected modality on the app
  • Added to Pickup icon to clearly communicate what modality is selected

30 of 84

Double Confirmation

App

Web

  • Spot illustrations provide clarity that Eater has to move towards their food

Simplify · Educate · Integrate

31 of 84

Simplify · Educate · Integrate

Integrate

New modalities with Uber’s suite of offerings

32 of 84

Upselling opportunity after Eater makes dine-in order

  • 10% of Uber rides go to restaurants

Simplify · Educate · Integrate

Call Uber to Restaurant

33 of 84

Takeaways

34 of 84

I got better at learning how to design for a system.

Takeaway 1

35 of 84

The design process doesn’t just start and end with design.

Takeaway 2

36 of 84

Go wide before going deep.

Takeaway 3

37 of 84

🙋‍♀️

Questions!

38 of 84

Thank you!

39 of 84

Appendix

40 of 84

DoorDash

Order Manager Redesign

Proposed to Doordash Head of Design, parts of it was implemented

Product and UX Research-focused project

41 of 84

On Medium

Featured in UX Collective

12.5K Views

1.2K Likes

42 of 84

How can we simplify and streamline the �experience for merchants to manage restaurant orders while improving their communication with customers and Dashers?

The Problem

43 of 84

A new iPhone app which improves

1) navigating between different stages of the ordering process

2) adjusting orders on-the-fly

3) contacting Dashers

Solution

44 of 84

DoorDash operates in a 3-sided marketplace.

Merchant App:

Take in, adjust, manage orders before preparation.

Business Side

Customers

Dashers

Merchants

45 of 84

User Research

46 of 84

Online Review Verdict: 2.3 Stars, 10,000 + Installs

User Research

47 of 84

Pain Points

User Research

1: Hard to communicate with Dashers.

2: Landscape view is cumbersome.

3: DoorDash’s tablet is difficult to use and is the only option.

4: There is no way to pause, cancel, or stop taking orders.

5: Hard to contact support for help.

48 of 84

Talking with Restaurant Owners

User Research

Sonny and Bridgett

Small Restaurant Owners

Husband and wife, own a local restaurant in Ferguson, MO serving elevated southern cuisine.

Traditional sit-down experience, DoorDash is a secondary source of revenue.

49 of 84

Talking with Restaurant Owners

User Research

Victoria

Subway Supervisor

Gets 3-5 catering orders with 100+ sandwiches on DoorDash per month.

Wants a better way to assign orders to specific employees.

👩🏽‍🍳

*Victoria didn’t want a photo of her used for the case study.

50 of 84

Talking with Restaurant Owners

User Research

👩🏽‍🍳

Local, sit-down restaurants

Large Franchises

51 of 84

Talking with Restaurant Owners

User Research

👩🏽‍🍳

Local, sit-down restaurants

Large Franchises

… and everything in between

(250,000+ restaurants)

52 of 84

Design Opportunities

53 of 84

1: Create a mobile version of the app.

Design Opportunities

54 of 84

2: Make branding consistent with the main consumer app.

Design Opportunities

55 of 84

3: Provide clearer iconography and contextual clues for actions.

Design Opportunities

56 of 84

4: Improve communication with Dashers, customers, and support.

Design Opportunities

57 of 84

The Process

58 of 84

Guiding Questions

Process

How does the app’s navigation flow change given the constraints of a phone’s smaller screen size?

What’s the best way to switch between tabs?

Product

UI

How does a mobile experience benefit restaurant owners?

59 of 84

Sketching it out

Process

60 of 84

Sketching it out

Process

61 of 84

Ordering Process

Process

1

2

3

Needs Action

In Kitchen

Ready for Pickup

👩‍🍳

❗️

62 of 84

Tabs divided into 4 distinct sections

  • Restaurants get overview of status of different orders

Icons quickly show if order is personal or catering

  • Benefits catering-heavy users like Victoria from Subway

Main Order Page

Orders · Inventory · Support

63 of 84

Main Order Page

Orders · Inventory · Support

64 of 84

Biggest change made was to include different options to deactivate orders.

Owners wanted more flexibility on setting items as out-of-stock.

Out of Stock Management

Orders · Inventory · Support

65 of 84

Out of Stock Management

Orders · Inventory · Support

66 of 84

Out of Stock Management

Orders · Inventory · Support

1-tap common reactivation times

  • No more manually typing out times

Color coordinated dots show current status of dish

67 of 84

Out of Stock Management

Orders · Inventory · Support

68 of 84

Different iterations of the out-of-stock popup.

69 of 84

Current “Help and Support” feature puts “Call” and “Live-chat” options at the bottom of the screen.

Main Support Screen

Orders · Inventory · Support

70 of 84

Their main support “guide” is a Google Slides presentation.

Main Support Screen

Orders · Inventory · Support

71 of 84

Issues separated into broad categories

  • No more digging through Google Slide “tutorials”

DoorDash Support is moved to the top

  • 1-click button to call or message a live rep

Main Support Screen

Orders · Inventory · Support

72 of 84

Main Support Screen

Orders · Inventory · Support

73 of 84

Enhanced Live Chat feature

  • Make asking for support more conversational

Live Chat Feature

Orders · Inventory · Support

74 of 84

Live Chat Feature

Orders · Inventory · Support

75 of 84

Closing Thoughts

76 of 84

1: Doing your research is crucial.

2: Making (unqualified) assumptions is dangerous...

3: There is no one-size-fits-all solution in design.

4: Respect the Process: it’s cliché, but hey it worked for the 76ers.

77 of 84

🙋‍♀️

Questions!

Or read my Medium article

78 of 84

Feed · Restaurant · Checkout · Post-checkout

Desktop

79 of 84

Feed · Restaurant · Checkout · Post-checkout

Desktop

80 of 84

Feed · Restaurant · Checkout · Post-checkout

Desktop

81 of 84

Final Header Design

Modality Toggle Redesign

Simplify · Educate · Integrate

82 of 84

Motion Explorations

Modality Toggle Redesign

Simplify · Educate · Integrate

83 of 84

One-click button to call or message the customer

  • Time is key, no more navigating across multiple screens

Button to deactivate menu item once it’s placed

  • Easily accessible

Detailed Order Page

Orders · Inventory · Support

84 of 84

Detailed Order Page

Orders · Inventory · Support