I led the design of the new Octopus Driver mobile app, launched by T-Mobile in November 2023, which allows drivers to view earned points and cash out earnings.
TIME
March, 2023 - Nov, 2023
SKILL
Mobile Design
User Research & Testing
Project Scoping
Design Strategy
Cross-function Stakeholder Collaboration
TEAM
2 designers, 2 project managers, 15+ iOS and Android engineers
High Adoption Rate
The app's adoption rate exceeded the expected rate of 50%.
.png)
Increased Active Users
Active users increased by 17% after launch of the new app.
Increased Satisfaction
The Net Promoter Score (NPS) increased by 20% in the latest survey with over 40K responses.
What is octopus driver app?
Octopus tablets are installed on the back of rideshare car seats to entertain passengers with games and ads, while the Octopus Driver app allows drivers to track earnings from in-vehicle ads and manage their accounts, enhancing their ability to boost income efficiently.
the problem
Despite the exponential growth of the active users, the churn rate of Octopus surged from 3.8% to 9.6% over the years. The poor web app experience is one of the huge factors that contributed to the spike. Approximately 21% of users rated the web app experience as poor based on the recent survey.
We need UX to transform the web app into a mobile app and improve the Octopus app experience within 8 months.
With the project request in mind, we lacked a clear goal and understanding of the problem. Partnering with the customer success team, we interviewed 6 full-time drivers from across the U.S. to learn how they use the Octopus app and their experiences with it.
With our drivers accustomed to using Uber or Lyft mobile app daily, accessing the Octopus web app from a browser becomes cumbersome. Our drivers spend a significant portion of their day in the car, often checking their points while grabbing coffee at a drive-through or quickly cashing out earnings while waiting to pick up passengers. However, the current web app requires multiple clicks to reach desired pages and proves difficult to navigate.
Users need a readily accessible and easily navigable interface to complete their daily tasks on the app.
Before I could dive into design, it was important to define and prioritize the key problem areas. I collaborated with the product team, driver support and growth team to conduct heuristic evaluation to study the usability of the product, and prioritized the issues I needed to tackle.
Interested in the heuristic study report?
Read the Full Report
.svg){kind=icon}
problem statement
The primary usability issue I identified based on the heuristic evaluation is that information, including text, alert messages, links, and images, is crammed into a single page without clear structure or priority. Additionally, duplicated and irrelevant information is shown across multiple pages.
My initial approach involved collaborating with the business team to declutter the information and prioritize content by redesigning the site map.
.png)
Redesigned Site Map
After proposing the idea of redesigning the site map, I received some doubts and hesitations from the business owners. Their main concern was:
Our drivers are NOT tech-savvy users, some of our long-term users of the app might be frustrated by the drastic changes of the app structure which might lead to higher churn rate.
To ensure I get enough buy-ins from the upcoming stakeholder design review involving 6 cross-function teams, I made sure that I had enough user data and rationale to support my redesign proposal. One important structural change I proposed was changing the navigation.
The team and I started by re-categorizing the current information based on users' feedback about the app and data gathered from FullStory, a digital experience analytics platform. Here are some key insights that informed our design decision of high-level structure of the product.
of users start their journey by cashing out earnings directly after landing on the homepage.
referrals made per year, with a significant portion of new users coming from driver-to-driver referrals.
of users struggle to understand their account status which directly impacted their ability to cash out earnings,
Partnering with the customer success team and existing drivers, I conducted a closed card-sorting study to confirm that the high-level categorization made sense to users and to help organize the rest of the information.
Card Sorting
With all stakeholders on board with the new site map, I moved forward by crafting user flows. Given the scope and complexity of the redesign, I dedicated significant time collaborating with the UAT (User Acceptance Tester) team to ensure alignment between the user flow I created and the user scenarios they developed. This effort resulted in approximately 30+ user flows and 110 wireframes.
Core User Flow
problem statement
The sign-in issue is one of the primary reasons why the product team decided to transition to native app. The team believed that enabling biometric login would alleviate the problem of users forgetting their sign-in information or being unable to access the text message because drivers switch their phone numbers frequently which is common among ride-share drivers.
The missing piece
Initially I started creating user flows of sign in, however after reviewing with the product team, I realized that the key to design a successful sign-in experience is closely related to understanding how the backend operates. Therefore I sat down with the engineering team and learned about biometric sign-in from a technical aspect.
💭 What I thought it was...
🤯 The reality is....
.png)
working agile with the team
With a deeper understanding of the technical requirements, I developed user flows that aligned with the technical work flow provided by the engineer team and then proceeded with creating wireframes. In order to move things quickly and minimize back-and-forth in the design phase, I involved engineers in the weekly sync during the early stage to ensure we are on the same page.
Final Deliverable of Sign-in
Problem Statement
Break Down the Problem
To understand why users feel frustrated with the cash-out process, I analyzed over 20 user sessions in FullStory. I discovered two main challenges that users are facing:
Confusing Cash Out Process
1. Inefficient placement of CTA
From the user sessions, I noticed users clicking on potential call to action (CTA) buttons such as "Lifetime Earnings" or "Available to Transfer" in magenta, expecting to reach the cash-out page, only to realize they are not clickable and they needed to scroll to find it. The poor placement of the CTA might cause users to spend more time cashing out.
Click Heat Map
.png)
I generated a click heat map in FullStory using data from 50,000 user interactions over the past 12 months to analyze the click rates for various CTAs.
The click rate for "Cash Out" button is relatively low, despite it being a crucial task for users to cash out their earnings. The heat map indicates that users are either distracted from the primary task or unable to locate the correct spot to cash out.
Proposed Solution
2. Lack of feedback
Fullstory data shows 13% rage clicks on cash out buttons in 30 days. The initially disabled buttons make the interface seem broken, and the lack of feedback after clicks adds to user frustration.
Proposed Solution
two types of earnings
Regular VS. Gift card only earnings
Another factor contributing to the high rage clicks on cash out buttons might be the complicated logic between earnings that can be cashed out to both a bank account and a gift card versus those limited to a gift card. The key challenge is to better explain the differences between the two without confusion.
After multiple iterations and design reviews within the design team, I finalized 2 design options. Here is the evolution of my final design tackling this challenge:
Evolution of the design
👍 The separate cash out flows clearly differentiate between the 2 types of earnings
👍 A "Cash all" option will be feasible since there are no restrictions on selection
❌ 2 different interfaces might be confusing
❌ Users might miss the other tab and rarely click on it
❌ More time needed from both engineering team to implement
👍 Only 1 interface for both types of earnings
👍 Clear alert message when users can't proceed when cashing out
❌ Users have to cash out through trial and error, selecting earnings and clicking cash out only to see an error message
.png)
✅ Clearly stated what earnings can or can not be selected to prevent errors
✅ Easier to implement within the time constrains
🎯 The design was implemented in the final launch.
With more time and technical flexibility,
how could I further improve the cash out process?
The constrain we had to deal with
.png)
problem statement
Pain Points
Points serve as the primary metric for drivers to track their earnings. However, based on user interviews and past driver satisfaction survey results, I discovered that many drivers struggle with understanding the point system. Combining with the result from heuristic evaluation, I identified two main pain points:
"How do points work? "
Many drivers are confused about how the points system works, despite receiving onboarding instructions. The info bubble in the point tracker explains it but has a click rate of less than 1%.
"I need to check if my points have been updated"
Drivers need to regularly check their points to ensure the system updates them correctly. However, the current design requires multiple clicks to view historical points, making it inconvenient.
Surface the information
The solution focuses on surfacing the information drivers care about and making it more accessible. Here are the 2 changes I made:
1. Surface the point rules and make it less text-heavy.
2. Have the historical point accessible on the tracker.
New challenge emerged
Throughout the project, business requirements evolved, and a new design challenge emerged. Initially, new drivers would receive their $25 bonus upon account activation, but the business team later decided that drivers must earn 50 points to qualify for the $25 new driver bonus to motivate users to start actively driving with the Octopus tablet.
How do I integrate the new point rules to the point tracker while maintaining the user engagement?
I brainstormed several logics with the product team and here are some of my explorations:
V1 - Two Trackers
V2- Dynamic
FINAL - Milestone
👎 Two different point trackers are hard to keep track of
👎 Users need to think about how this works
👎 Take up too much space on the app
👎 Not clear on the difference between bonus and regular points.
👎 Changing the total points frequently makes the interface more complex and harder to understand.
✅ The bonus concept is well integrated in the point system.
✅ More scalable, allowing future events and bonuses to be part of the milestone.
Another important reason for choosing the 'Milestone' design is its seamless integration with the current rewards system. The product already offers a gamified experience to motivate users to drive with the tablet, such as achievement badges, leaderboards, and more. Incorporating the concept of a 'New Driver Gift Box' into this experience further enhances the gamified approach.
Thanks for reading my journey this far!
And now let me introduce you the new Octopus Driver App
Users can exit the onboarding tour anytime and can revisit the tour when they need it. The tour only appears when users use the feature for the first time.
It takes one click for users to keep track of the points earned, cash out from wallet, refer a friend and more. The new navigation experience provides multiple entry points on homepage so users can quickly access the main features such as Wallet and Referral.
Users can cash out their earnings to bank account or debit card anytime. Just select the earnings they would like to cash out.
Octopus gives users the flexibility to pause accounts when they need a break or return their tablets if they stop using it. Clear alert messages help to handle different user scenarios without confusions.
This was really exciting and fun project to work on and it was the first project I Iead from the beginning to launch from UX stand point. Some main takeaways from the project:
Involve development team as early as possible
In the first sprint, delaying developer involvement caused a mismatch between user flow and implementation. In later sprints, I engaged developers earlier to streamline design decisions.
Always fight for good UX
With the tight release schedule and technical constrains, I still fought for what I believe is important for user experience.
Prioritize what truly matters
With many UX issues to address and a tight timeline, I focused on what mattered most to users, leaving 'nice-to-haves' for future releases.
.png)
.svg){kind=icon}
.svg){kind=icon}
.svg){kind=icon}