UberEvents  |  Product Design, UX/UI |   Spring 2019   |   Individual Project 

Uber Events

Product Designer

Overview 

Researched, designed and iterated on an interactive feature on Uber to help users to search for popular social events and call Uber for the event through a 14 days design sprint using a human- centered approach. 

Methods

Design Methods: Product Thinking, Visual Design, Interaction Design, Formative Research, Summative Research and Generative Research

Tools:  Sketch, Photoshop, Invision Studio (low fidelity user testing), Framer X (high fidelity prototype) and Mapbox

Project Slide

Design Process

Screen Shot 2019-04-04 at 1.27.28 PM.png

High fidelity flow's videos

From viewing event to ordering Uber

Finding the right personalized event

Process in numbers

30

Users Interviewed

8

22

14

User Screens' Iterative Exploration

(A/B testings) 

User Research + Evaluation Methods 

Cognitiv Walkthrough

Inspiration 

.01

Phase 1: Research

When I tried to approach the prompt, I wanted to design a new feature for a product that I often use. I wanted to challenge myself out of my comfort zone by taking inspirations from my daily experience.


Because I don’t own a car, Uber has always been my main transportation in a day to day basis. Besides the normal option for UberPool, where users share their rides with others, Uber now offers a whole new function “ExpressPool”, which users are expected to walk and share the same car with other riders but in a much lower fare. Having been an avid concert goer, this function, however, might not come as handy. Because of the high demand for transportation to a specific event, it seems that even for ExpressPool, the rate is unexpectedly higher than normal. Thus, I wanted to see how I can improve the rider experience for a popular event like Concert or Coachella on Uber.   

I believe a better feature is needed to mitigate between an event and the rider in order to enhance the rider’s experience.

 

Understanding Uber's business model

From a business perspective, Uber earns money from the driver by getting a 5% to 20% commission range from the total fare of a trip, depending on the demand for rides and the available Uber at a specific time. However, there is a secret business model that drives revenue behind Uber, which is Surge Pricing. Basically when the demand for cars outnumbers the supply of cars nearby, the price for the riders will increase base on a set of predefined algorithm.

 

Going back to my idea, if riders see a sudden surge of price if they are going to a concert, they might switch to either Lyft or drive by Zipcar (given if users don’t know how to drive), which will immediately lower the overall revenue of Uber. Even though there is a clock icon beside the search bar that allows users to schedule Uber way ahead of time, it only allows one time scheduling and fare splitting is again a big problem, if me and my friends both go to the same event.   


Recognizing such problem by taking the business model and fare splitting into account, I wanted to ensure that the profit of Uber will not be deprived, while providing motives for riders to use the app to travel to events.

Framing the original hypothesis

After gaining some basic insights for the problem, I decided to come up with a preliminary hypothesis to guide the design of the feature later on for Uber.    

People want to use Uber for going to large social events but the fare is high and the feature for booking in-advance is not clear enough.   

 


I also come up with some How might we (HMW) questions to possibly guide my discovery along the way.

 

01: How might we incentivize the event goers to user Uber for travelling to large social events?

02: How might we integrate events and transportation (Uber) into one seamless process?

 

However, in order to know whether my hypothesis is sound, I decided to validate it through my user research through online search and interviewing people.

Research Methods

analysis.png

4 immersive online research

community.png

3 heuristic competitive analysis

education.png

30+ online surveys 

suggestion.png

15 contextual interviews with focus group (Representing 5 stalkholders)

Research in numbers

Demographics

chart.png

Problems users face when calling Uber

85%

High Travel Cost from the starting point to destination 

71%

Long waiting time for the Uber

Screen Shot 2019-04-30 at 4.52.01 PM.png

Recommend

Frequency

How likely will you recommend Uber for long distance travel?

How many times have you used Uber in a week 

3.7/10

8.5/10

Feature

How aware are you of the Uber function for calling ahead of time?

2.1/10

.02

Phase 2: Define

Synthesis Methods

Screen Shot 2019-04-30 at 4.11.34 PM.png

Journey Mapping

flow-chart.png

Affinity Diagram

recruitment.png

User Persona

innovation.png

Opportunity areas

Emphasizing with the users deeply through journey mapping 

In order to fully understood what the users have been thinking when they are trying to book large social events and order Uber, I recorded and synthesized the verbatim of the users to find out new opportunities and ideas for my feature. User personas was also constructed as a reference for my design later on.

Screen Shot 2019-04-30 at 5.26.54 PM.png
 

Exploring and understanding users through persona

In order to target specific needs and problems of the users, I constructed three personas that differed drastically with their backgrounds and pointed out potential areas that were needed to address in the feature's design later on.  Down below is one of the selected persona for viewing.

Screen Shot 2019-04-30 at 5.53.46 PM.png

Key opportunity areas

Accessibility:  Helping people to find and buy tickets for large social events like Coachella efficiently through Uber will be a key feature to attract users and generate revenue

Price:  Making prices reasonable for users across long trips can re-incentivize them to book Uber which can be integrated with booking in advance to prevent surge pricing  

Payment:  If there is an embedded automatic bill splitting feature inside Uber that invites friends easily, it can reduce stress and make the whole traveling process frictionless

Trust: Through establishing a credible relationship between the driver and the rider, it can drastically motivate users to use Uber

Transparency:  By considering the subtle details from the users' perceptive like luggage capacity and filtering through various events are essential to make the transportation process smooth and transparent 

My biggest takeaway 

Screen Shot 2019-04-30 at 6.17.11 PM.png

I noticed there is a big opportunity gap for event goers who struggled between choosing Uber and driving to an event. Many users reveal that it is mostly because of the cost of Uber and the waiting time. As a result, event-goers will abandon Uber and choose other cheaper options for traveling to Coachella. This might lower the retention rate and even lose a large niche of market for people who use Uber often but stop using it when it comes to long distance travel.

 

Thus, in order to encourage more users to use Uber for large social events, Uber need to design a feature that encourages users to save money and even allow them to get tickets easily through Uber.

Defining Success Metrics

A shipped version of the design should be quantitatively tracked. Improvement in these areas will show the success of the feature and provide better service to riders. Theses metrics can also be linked to sales metrics to measure business’s success. (Note that only the design decisions with the highest business + engineering impact are measured)

Screen Shot 2019-05-22 at 3.50.52 PM.png

Problem Statement 

Event goers need a cost-effective, efficient way to go to large social events like Coachella that centralizes event information and provides affordable fares because while Uber provides on demand private drivers and makes pickup easier, its features are sometimes invisible. As a result, users cannot leverage all the functions fully.

 

I believe by building a feature that allows riders to view events, to book Uber in advance for large social events and to be picked up in designated area, this problem can be alleviated.

 

The success of the feature can be measured using A/B testing with users, task analysis, User Experience Questionnaire and also System Usability Survey.

.03

Phase 3: Ideate 

Low Fidelity wireframe's exploration

After gaining an in depth understanding of my users, I then began to rapidly ideating on a number of concepts for the best possible wireframe and selecting a few of them to construct a sound user flow and also to meet user requirements. 

Screen Shot 2019-04-30 at 9.38.20 PM.png

Improving my ideas through divergent A/B testings

Before I decided to move on creating a digital low fidelity wireframe for my design, I onboarded 13 users to test out my design through a workshop. (The design was digitized for easy viewing) I onboarded people who had no prior design experiences and underwent multiple rounds of A/B testings to understand users’ mental model and to make sure my design was intuitive and consistent to them. Throughout the way, I was able to iterate on my original design on papers and improved on the UI design that users were not satisfy with.

Initial Wireframe's sketch

Screen Shot 2019-04-30 at 9.49.13 PM.png
 

Iterative Exploration 1: Making pickup more efficient

Screen Shot 2019-05-22 at 3.42.40 PM.png
Screen Shot 2019-05-21 at 10.17.54 PM.pn

User Research standpoint: More than 64% of the users are frustrated when they use the option of designated area which they are involuntarily put into a spot which Uber chooses where to pick them up. With the additional oval bottom of swipe left or right, users can see how much they save using the designated area option and choose the option for designated area. If they don't like the option, they can immediately revert back and choose the normal option of choosing their own spots for pickup.

Business standpoint: If more users use the designated area’s option, it enhances the efficiency of getting into the rides and increases more rides’ completion, ultimately generating more revenue for Uber

Iterative Exploration 2: Discovery Page

Screen Shot 2019-05-01 at 1.16.24 PM.png

I originally landed on these two design for the discovery page, and allowed the users to evaluate them one by one.  However, I eliminated A because from the business and user standpoints, two few details about the event can be provided and cognitive load may provide less relevant information to users. 

 

Choice B is also eliminated because of the relevance of the content might accumulate the same content over time and prevent users from discovering new content, which unchanging content is ineffective to attract users' interests. Also, horizontal + vertical scrolling might also increase obstruction to viewers' eye.

Winner

Screen Shot 2019-05-01 at 1.23.39 PM.png

I ultimately landed on this 3rd iteration after a frantic brainstorm with my users.

  • Paradox of choice: 67% of all users told me that they only went to big social event once a while. Thus, less is more for them so that they can focus on events that are most relevant to them (Side note: Coachella only happens once a year)

  • User Research standpoint: Nearly 90% of all users considered price as the biggest hurdle for them to use Uber. I  then added buying tickets’ options and also discounts inside each card, so it can motivate users to go to the event with cheaper prices

  • Business standpoint:  Making discounts and days left can both encourage users to order Uber to the event since it creates an urgency to buy tickets and thus generates more revenue from selling tickets and calling Uber to the event

  • High consistency:  Following the design guidelines of Uber to make icons rectangular and cards are presented with vertical scrolling, which reduces obstruction and increases familiarity for users

Iterative Exploration 3: Details Page

Screen Shot 2019-05-01 at 3.05.22 PM.png

I eliminated A because from the user standpoints, although more details are shown, the lack of bottoms might discourage users to discover more details and prevent users from knowing the comparative advantage of Uber to see events. 

 

Choice B is also eliminated although it shows more consistency with Uber design, favorite icon is emphasized instead of price, thus decreasing the selling point of Uber to have cheap 

Winner

I ultimately chose this iteration because it showed highest transparency, consistency with the design and it also aligned with the business model of Uber in a most relevant sense.

  • User Research standpoint (Price Emphasis): Nearly 84% of all users told me that the expensiveness of the fare rate and tickets’ prices are the biggest hurdle for them to order Uber. Placing dollar signs on top will give users a rough estimate of the events’ cost. Also, I changed the buy tickets icon to actual price so it increases accessibility of the price by reducing the steps for the users to enter the website and find the prices’ details.

  • Business standpoint:  I added two solutions that maintain the business model of Uber. Both showing how many people are viewing and making discounts on the price can both drive users’ desire to book Uber and buy tickets for the event.

  • High consistency:  Using a sticky horizontal card for each category is consistent with the design of Uber and make it more transparent and recognizable to users’ eyes.

Screen Shot 2019-05-02 at 12.49.25 PM.pn

Iterative Exploration 4: Automatic Bill Splitting

Winner

Screen Shot 2019-05-02 at 1.59.27 PM.png

I ultimately chose iteration 2 because it showed simplicity and invisibility. Typing in email and linking to a third party app might be complicated and users are also used to inviting friends through their phone numbers which blends seamlessly into the design.

  • User Research standpoint:   One problem that 86% of all users have indicated was that they hated to split the Uber fare every time they went out with their friends. Thus, I incorporated this charge your friends page in which users can charge their peers before they reach the destination.

  • Also the users can choose to share link or input phone numbers to charge their friends, as iterated in the low fidelity wireframe’s exploration.

Task Flow

Screen Shot 2019-05-22 at 12.20.15 PM.pn

.04

Phase 4: Evaluate

Overview

Screen Shot 2019-05-02 at 2.34.49 PM.png

With extensive user research and more than 20 cognitive walkthrough, I decided to progress on digital low fidelity prototype, in which I underwent user testings again with beta users, measuring the results using task analysis, user experience questionnaires and also system usability survey. After applying this very user driven approach, I implemented the actual high fidelity prototype on Framer X.

 

Low Fidelity Prototyping

I created low fidelity wireframe in Invision Studio and recruited four beta users to test out my design with interactive components. 

I was able to gather valuable feedback through my usability testings and gave them the opportunity to critique on my design.

Some of my findings included:

  • Lack of the skipping and return icons :  Some users are frustrated to go through so many steps to get into Uber, like setting time and charging friends.

  • Location of the charge your friends’ page being misplaced:  Users are distracted when they are finding the right Uber while distracted by the option of charging their friends.

Screen Shot 2019-05-22 at 11.53.29 AM.pn

Evaluation 

Task Analysis

Screen Shot 2019-05-22 at 3.18.40 PM.png

User Experience Questionnaire (UEQ)

Screen Shot 2019-05-02 at 3.47.20 PM.png

While I was happy to see that the scores across the three domains (efficiency, perspicuity and dependability) were consistently high, originality was low since it indicated I did follow the design guidelines of Uber and maintained a certain consistency and clarity across the screens.

 

However, my prototype was low fidelity and lacked micro interaction to stimulate the interests of users, which were things to improve on in the near future.  

System Usability Surveys (SUS)

The highest score on the 10 questions’ system was user's high adaptability of the design, reflecting the design was transparent and easy to navigate through. It proved success of my whole feature design because my goal was to create a new feature which integrated seamlessly into the calling Uber experience, despite appearing in low fidelity.


However, one of the average score inside the 10 questions’ system is that the users found the feature a bit cumbersome to use. I believed this could be improved drastically when the high fidelity design is built.

Sub Raw Score 

90.5

Average out of 100

Percentile of Score 

Top 3%

SUS Template 

Iterating from Usability Testing

Although I have received an overall very positive feedback for my new Uber’s feature design, there are certain subtle problems that needed to address in order to bring success to the overall user experience. The three problems I targeted to address are down below:

  • Consistent skipping + return buttons: Skipping and returning icons are added following the Uber visual design UI assets to make them visually consistent and to give users more freedom to skip choices like booking in advance and allow them to jump straight to ordering Uber.

  • Putting charge your friend after user get into Uber: The relocation of the charge your friend’s page allows users to focus on finding the Uber first with the map and direct their attention and energy to getting into the Uber. This prevents users from being distracted on finding Uber and charging their friends simultaneously.

  • Expanding on the details of the event: I added extra filters like basketball, movies and comedy for users to select their choices of the events in detail. Moreover, age limitation and important notes are all added according to the users’ demand to allow them to have more context about the events.  

 

.05

Phase 5: Final Design

Framer X / Mapbox / React Native

Screen Shot 2019-05-22 at 12.43.52 PM.pn
Screen Shot 2019-04-29 at 11.47.22 AM.pn
Screen Shot 2019-04-29 at 11.40.00 AM.pn
Screen Shot 2019-04-28 at 8.01.16 PM.png

Booking In Advance

Events

Details

Screen Shot 2019-04-29 at 11.56.58 AM.pn
Screen Shot 2019-04-29 at 11.51.50 AM.pn
Screen Shot 2019-04-29 at 12.09.03 PM.pn

Search

Uber

Filter

Screen Shot 2019-04-29 at 12.03.25 PM.pn
Screen Shot 2019-04-29 at 12.13.34 PM.pn

Search Results

Bill Split

Designated Pickup spot

Screen Shot 2019-05-22 at 12.52.37 PM.pn
Screen Shot 2019-05-03 at 10.31.18 PM.pn
Aa 
Open Sans
Regular 
Semi-Bold

Challenges along the way

In the future 

  • Turning small samples of data collected into informative design decisions might neglect the effect of outliers and the consideration of a larger demographics

  • Choosing the right tool to design under time and technology constraint

  • Using low fidelity design to replace high fidelity screens for beta testing might sometimes be confusing to users

  • Consistently referring back to Uber’s design guideline to make sure design was consistent  

  • Do another round of user testing with the high fidelity prototype

  • Utilize other prototyping tools such as Origami to see different effects on the users

  • Gain real feedbacks by giving the design to random strangers and design experts for critiques and real feedback  

Conclusion

  • I approached the question prompt with a heavily user centered process, constantly emphasizing with the users through different testings.

  • Also, majority of my design in this challenge was heavily data driven, in order to obtain metrics that could determine the success of the feature design.

  • The whole process involved a lot of product thinking and sketching, allowing me to immerse deeply into the problem space and the business model of Uber.