Tapingo iOS App Redesign
Sketch, Flinto, Illustrator, Photoshop, Typeform, Google Sheets
Tapingo is a popular iPhone and Android app that lets college students order food for delivery on demand. The Tapingo RX app is a separate app the delivery drivers use to clock in and complete deliveries. The confusing user flow caused many new hires to quit within a few days while competing apps like UberEats lured couriers away with enticing features. The app needed a full redesign.
Simplify the user flow of the Tapingo RX app to make delivering orders much easier to understand, less intimidating, and less frustrating. Then redesign the app visually to make it modern and fun for the users.
benefit to tapingo
Increase new hire retention to cut down on hiring costs. Also, happy delivery drivers means happy customers!
The original app
I researched as many on-demand delivery companies as possible to understand courier’s top complaints as well as most useful features across all platforms. The most informative sources came from Subreddits, forums, article comments, job review websites, blog posts, and app reviews.
I sent out Typeform surveys to hundreds of past and current Tapingo delivery drivers to obtain quantitative and qualitative data in order to find their biggest pain points with the current app.
I spoke with couriers virtually over Zoom and recorded the sessions to get a better feel for their biggest pain points.
Using information from my competitive analysis and qualitative and quantitative data from the user surveys and interviews, I created a persona to better empathize with our users and deeply understand their motivations and goals. There’s no getting around it, their goal is to make as much money possible on their own schedules.
In order to study the information architecture of the Tapingo RX app, I made a list of all the current features using Google Sheets and added any features I felt could improve the user flow backed by my research.
Now that I had a clear list of requirements for the app redesign, I needed to figure out how to organize the IA into categories that made the most sense to the user. I had to keep in mind that all users use this app while driving. The information architecture here is extremely important to the safety of our couriers. The card sorting exercise led to an epiphany and one of the most important aspects of the redesign: the Quick Actions button. This is an always visible all in one menu that contains options to solve every LIVE delivery issue as quickly and as easily as possible.
The user flow of the current Tapingo RX app is no doubt confusing. There are four menus separated into tabs on the bottom of the app. Users fight for orders in the Accepted tab on a first-come-first-serve basis, leaving many drivers with slower connections or reflexes in the dust. Users do not get step-by-step instructions on how to complete deliveries making the learning curve very high. There is no in-app navigation.
The new user flow I created keeps all navigation within the app. Users get fairly distributed notifications of new orders based on proximity to restaurant, amount of orders in their queue, and amount delivered. Users get step-by-step instructions on how to complete each delivery and confirm the completion of each step incrementally. I split the app into three main sections: the main screen which includes all instructions and navigation for live deliveries, the hamburger menu which contains all non-live delivery options, and the support menu for help from the support team at any time. This simplifies all deliveries by keeping the most important information up front and gives it to them incrementally to minimize the user’s memory load, keep other relevant information easy to access and organized, and prevent errors.
Equipped with my new user flow, I created wireframes for each main screen to make things easy to rearrange or change before going in to making the high fidelity comp.
Sketched wireframes are great for usability testing because they are easy and inexpensive to iterate on. I conducted one on one usability tests with real users as well as coworkers.
I gained valuable insight from the usability testing. Most flows I tested went smoothly. One of the most contested issues was simply the wording of how to clock in and how to indicate the status of the user as being clocked in or out. The most successful of the tests was the wording "Go Online/Go Offline" with the On/Off switch.
After iterating as necessary, I turned my paper wireframes into digital before creating the high fidelity prototype. My preferred wireframing tool is Sketch. I conducted more usability tests with real users and coworkers on the Sketched wireframes before beginning the high fidelity prototype.
High Fidelity Prototype
Using Sketch, I made 60+ high fidelity screens demonstrating every feature of the app redesign. I created a functional prototype using Flinto which simulates clocking in and completing deliveries from start to finish with custom animations.
1 - STEP-BY-STEP INSTRUCTIONS
Users were often overwhelmed (especially when taking multiple orders) because the current app does not tell them what to do. To solve this, I added the blue instruction bar at the top of the app. Instructions pop in here to alert them to each next step in their deliveries, even if they have multiple orders accepted in their queue. Animations and sounds are used to guide their eyes to the correct place on the screen.
2 - Navigation
The current app takes users out of the app and opens Google maps. This forces them to switch back and forth between apps to find relevant information which is dangerous while driving as well as frustrating. My redesign includes turn-by-turn navigation within the app. All navigation related instructions remain below the notification bar as in the above picture.
3 - Payment History
The current app does not have payment history and couriers talked about this a lot in the survey. My redesign includes an entire menu that allows them to see their full pay history by day, week, month and includes a search.
4 - ORDER DISTRIBUTION
The current app alerts all couriers at once of a new order and whoever grabs it first gets to deliver it and make money. Survey respondents felt this was unfair and found it hard to make a living. The redesign fairly distributes orders to couriers individually based on the amount of orders they currently have, orders completed, and their proximity to the restaurant.
5 - ORDER PAY and mileage transparency
Couriers are first and foremost motivated by money according to the survey. Currently, every delivery pays differently and the app does not display how much they get paid for each order. The new redesign is fully transparent about the pay for each order. Couriers also reported worrying about the cost of car maintenance and gas. They can now also see the mileage per order in the expanded details menu.
6 - Information hierarchy
The current app hides the options to take care of live issues behind a series of menus. The redesign includes a centralized and always visible Quick Actions menu which only includes solutions to issues during LIVE delivery. Icons are large and color coordinated to make navigation easier to use while driving.
7 - LOST TIME
Couriers reported wasting time driving around and missing orders that were far away. The redesign includes a heat map to let all couriers know the hottest spots to wait for incoming orders so they do not have to guess and miss out on crucial income.
8 - MISSING ITEMS
Orders often get canceled due to couriers forgetting items. Couriers do not get paid for canceled orders even though they took the time to deliver them. The redesigned app makes couriers check off food items one by one while at the restaurant before they can continue with the delivery to make sure they have all items that the customer ordered.
9 - SCHEDULING SHIFTS
The current schedule does not say which shifts have promotions and how much each shift pays per delivery. To maximize the amount of money they can make, the redesign now shows these important details which in turn helps shifts get filled.
10 - ORDER HISTORY
Couriers stated they want to be able to look at more than 24 hours of order history so I added order history by day, week, month, and search to the redesign. Couriers can also individually rate trips and customers.
11 - TEAM CONTACT
Couriers stated they wanted a better way to contact their team members. I added a chat room which allows them to easily communicate with each other. Internal research also showed that the best performing delivery campuses also had much stronger team interactions.
12 - DELAY IN GETTING PAID
Couriers now have the option to get paid instantly. In the survey, respondents mentioned how Uber does this and how much they like this feature.
13 - ERROR RECOVERY
Jakob Nielsen’s 9th Usability Heuristic for User Interface Design is the ability to recover from errors. The current app does not include an Undo option, which causes confusion and customers to cancel orders. I added an Undo button to the redesign that appears after each step in their delivery in case they make a mistake.
All in all I am confident the updated Tapingo Driver app is a huge improvement over the current version. User’s largest pain points were addressed and the app is better organized. If I had more time, I think a field study/delivery ride along would be of major use to really dig out the pain points of the current app and to build even more empathy with the users.