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
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
4 immersive online research
3 heuristic competitive analysis
30+ online surveys
15 contextual interviews with focus group (Representing 5 stalkholders)
Research in numbers
Demographics
Problems users face when calling Uber
85%
High Travel Cost from the starting point to destination
71%
Long waiting time for the Uber
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
Journey Mapping
Affinity Diagram
User Persona
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.
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.
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
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)
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.
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
Iterative Exploration 1: Making pickup more efficient
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
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
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
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.
Iterative Exploration 4: Automatic Bill Splitting
Winner
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
.04
Phase 4: Evaluate
Overview
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.
Evaluation
Task Analysis
User Experience Questionnaire (UEQ)
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
Booking In Advance
Events
Details
Search
Uber
Filter
Search Results
Bill Split
Designated Pickup spot
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.