Continue reading...
Android App Feature Integration.
Adding a “Moto Taxi” Feature to the Glovo App.
Summary
- Goal: designing and integrating a new feature into an existing app.
- Platform: Android.
- Context: academic project, a 4 days design sprint.
- Team: individual project.
- My role: UX & UI Designer.
- Final result: very interesting research findings and the new feature in high-fidelity interactive prototype.
The Goal of The Project
The goal of this Ironhack Bootcamp academic project was to seamlessly incorporate a potential new feature — Moto Taxi — to an existing Glovo app using the Design Thinking process.
Fast navigation
In a hurry? Use the links below. To come back up, click the arrow on the right bottom corner.
Brief & Scope
What's the challenge?
This challenge is designed to be solved individually and with limited resources. I had less than 4 days from the brief to the final presentation and no budget available.
My tasks
As the only UX&UI designer working on this project my responsibilities included: conducting qualitative guerrilla research, analysis of the data, the definition of the user persona and the problem statement.
Moreover, based on the insights obtained during the research phase I created 3 solutions that were then tested 3 times with 4–6 users each time. Tests enabled me to move from low-fidelity prototypes to a high-fidelity proposal.
The Client
What is Glovo?
Glovo is a Spanish start-up founded in Barcelona in 2015. The company started as an on-demand delivery services provider now known mostly by food delivery offerings, nevertheless, it aspires to become a multi-category lifestyle app.
Moto Taxi fits into Glovo’s vision (written above) and represents an idea of offering motorcycles passenger transportations services through the existing Glovo app.
Market research and benchmarks
How do people use transportation services?
During the market research, I focused on competition offering personal transportation services. I investigated firms that provide “vehicle for hire” like Cabify, apps for ordering a taxi like Free Now and companies like Uber. The latter competes on both market — food delivery and transportation services which made it very interesting to compare. Moreover, I analyzed user’s opinions about Picap, an app offering moto-taxi services in Latin America.
Best practices
As a result of this comparison, I learned a few best practices eg.:
- separating food delivery and personal transportation services since it is targeting customers with different needs,
- providing exact information about prices, waiting and travel time,
- using engaging visual resources to provide information about taxi availability.
Transforming research data into insights
How would people use Moto Taxi? — Interviews with users
In order to figure out how to make this feature work, I decided to combine research on two topics: how do people use taxis and how do they feel when traveling as a passenger on a motorbike? With that goal in mind, I designed a 20 minutes interview and talked to 6 people. I used affinity diagram to analyze the results.
The most interesting insights from this research are:
- 66% (4/6 people) when ordering a taxi compare the waiting time in different apps, they don’t want to wait longer than 5–10 minutes,
- 83% (5/6 people) admitted that they don’t feel comfortable traveling on a motorbike with a driver they don’t know and they don’t like physical contact with that person,
- 66% (4/6 people) travel by taxi in a group.
Who do I design it for? - The User Persona
Meet Maria
Maria Gomez is 25 years old and she feels like she’s wasting time waiting for her means of transport in Barcelona. She would rather spend this time on more valuable activities like her personal projects, studying a new language or with people she cares for like her boyfriend who she barely sees during weekdays.
The Goal
Maria’s goal is to spend less time traveling and be able to dedicate it to people and activities she cares for.
The Pain Points
Her main pain point is that she’s tired of the traffic jams, she knows that a motorbike would be faster, but she doesn’t feel comfortable driving a motorbike herself, moreover, whenever she travels with someone on a motorbike she isn’t feeling comfortable touching the driver.
The Needs
Maria would like to travel on a motorbike but she needs to feel comfortable and safe, and she needs to adapt the journey to her preferences.
Problem Statement
What does María need?
Young people like Maria, who don’t want to waste time waiting for means of transport when traveling in a city, need a way to use a motorcycle without having to drive it because they want to travel faster and at the same time feel 100% safe during the trip.
The Solution
How can Glovo Moto Taxi respond to the needs of people like Maria?
As a result of the research, I came up with three new key aspects of the Moto Taxi feature:
- defining preferences,
- offering options to order more motorcycles, and
- making the waiting time clear and useful.
These ideas were based on the most important aspects that emerged during interviews with users and later got evaluated during 3 rounds of prototypes testings explained in the next chapter.
Specially designed preferences
Order details screen contained new information like preferences — possibility to choose whether the driver should pass by cars stopped in the traffic and an option to notify a driver if the user has little experience with riding a motorbike. Those preferences were designed in reference to insight form the research that 5 out of 6 people (83%) were concerned about their safety and comfort when traveling with a driver they don’t know. However, during testing, I discovered that new aspects were not clear, especially the option to use moto-taxi in a group, so I decided to include onboarding that explained it.
Second important insight discovered during interviews is that according to 4 out of 6 people asked (66%), they use to travel by taxi in groups and order it together. That is why I added an option to order more motorcycles and enable travelling with companions.
Clear and useful waiting time
During interviews I found that 4/6 people (66%) compare waiting time and find it important. When I investigated more deeply why is it so important to know when your taxi comes I found out that people don’t like to waste time waiting for the taxi on the streets and that it is a “dead time” they can’t do anything with. That is why I decided to make waiting time visible from the beginning (before ordering) and while waiting (with animated countdown) as well as offer a small logic game to make this time useful.
Testing the Prototypes
Low-Fidelity Prototype
Firstly, I prepared a paper prototype, which was then tested with 6 people. During the testing, I focused on observing whether the logic behind the user flow was clear and consecutive steps were easy to follow. I asked each user to finish a task which was to order a Moto Taxi, 6 out of 6 succeeded at finishing the task.
I noticed that users did not expect to see the last screen where the system asked them to swipe to confirm the payment. 5 out of 6 users understood that they confirmed the payment when pressing the “order” button.
During the first testing, I confirmed that 4 out of 6 users liked the idea of playing a game while waiting for their taxi, so I kept this feature when moving to mid-fidelity wireframes.
Adding onboarding
During tests, users expressed that they didn’t understand the idea of how they can travel with more people when ordering a Moto Taxi. Since my users, just like María, had no previous experience with a motorcycle as a taxi in general, I decided to close the information gap by introducing 4 onboarding screens explaining all new characteristics.
Mid-Fidelity Prototype
After transferring the paper prototype to Adobe XD I designed the Mid-Fidelity wireframes. I added them to InVision and tested the interaction with 4 people. In mid-fidelity, I focused on testing whether the onboarding works and I confirmed that 3 out of 4 chose their taxi settings with confidence and 1 user pressed the info icon to learn more.
UI Design - Adapting the new feature to the Glovo brand look & feel
Figuring out the colour palette
In order to best adapt new screens within an existing Glovo app, I analyzed the colours that the company uses in the app. I focused on:
- shades of black and grey used to express information hierarchy,
- graphic elements: icons, illustrations and dividers colours and sizes,
- interaction elements: buttons, links and states.
Defining design system
As a result, I defined a style tile sheet with elements to be used throughout the new feature design. It helped me maintain a consistent look and integrate the new solution within the existing product.
High-Fidelity Prototype
In high-fidelity prototype I focused on the interaction design, making sure all the steps are clear and logical. Preparing the design I used color palette and style tile defined by my when analyzing the design system.
Having only 4 days to introduce this feature have been a great challenge and although I know there is a room for improvement I am proud to present the video below with the interactive prototype for Glovo Moto-Taxi project.
Next Steps
An important part of the solution is the service design that should accompany the app. An important insight found during the investigation is the feeling of safety and physical contact with the driver. During the next design sprints, I would focus on adapting the motorbike to those needs, and work on:
- adding more personalization options like type and size of the helmet,
- service design – protocol for drivers, protective clothing for passengers etc,
- work on motorcycle design, eg.: providing handles to grab and dividing driver and passenger seats.
Outcomes & Lessons
As a result of this challenge, I learned that UX&UI designers need to trust in the design thinking process and try to focus on understanding the problem rather than rushing to provide a solution. It is a common trap as the XXth century education system prepared us for focusing on a result (as oftentimes at school there was only one right answer) rather than accepting and embracing the problem, studying it, understanding it, generating many possible ideas and testing it out in the real world in order to find the best solution for this particular time and place.
Research is the key phase of any UX project because understanding my users has to lay in the foundation of any solution I am presenting.
Tools and Skills Acquired
Below you can find a keyword list of tools and skills I learned during this project.
Tools: desk research, guerrilla research, user interviews, Adobe XD, InVision.
Skills: Design Thinking, User Experience, Project Management, Design Sprint, User Research, Data-Driven Decision Making, Interaction Design, Wireframing, Prototyping, Usability Testing, Android App Design.