Case Study: Adding a new feature to the Uber app
Today I’m here to write about the fourth project in our Ironhack Part Time (didn’t feel like part time for this project) Bootcamp. This is the first project that I could potentially include in my professional portfolio and the brief was simple. From a list, we were given a random feature that we had to add for a random app. I got: Highlight important messages in the Uber app. Not bad I thought, but not great. This was also the first individual project and I worked in a two-week sprint. The first step was to conduct some quick Guerilla research and find out about a little bit more about Uber.
Well — it’s Uber, what more can I say? It is a unicorn and has over 85% market share in the USA. I won’t bore you to much with the research but suffice to say that they are market leaders, so much so that they can afford a little controversy and have a whole wiki page dedicated to criticism of the company. The next step was for me to conduct a UI inventory of Uber’s current app.
This was my first time doing this, it wasn’t so bad because Uber’s app is actually pretty simple and reuses many of the same components. In addition, they’ve made their whole UI public and available on figma. I made sure not to refer to it too much and mostly focused on taking screenshots on my phone and cropping the different elements and components. We also had to compare native screens, and again there were no major differences between the app on iOS and the app on Android.
Coming up with an idea of how to highlight important messages in the Uber app was hard enough — so for this task I implored two friends to go out with me to a bar and brainstorm ideas (COVID friendly of course). One of my friends came up with a nice idea — to get a personalised message from the driver when one is selected for you. This session also helped me come up with an idea — to have a countdown instead of a time amount when the Uber is close by. Think of this like a timer that goes off when your Uber is here, so you know to go down. This idea came up from a frustration I’ve experienced in the past of missing an Uber when you’re at a party because your phone is on silent or you’re too busy saying bye to people. In addition, I had conducted a short survey, and although not very many people miss Ubers, when they do miss them, it is usually their fault because they are too late.
I tested both concepts and although my friend had a nice concept, hers only rated a 3 out of 5 stars whilst mine rated a 4.2 out of 5 stars. Overall 75% of people preferred the latter concept over the former.
Problem & Hypothesis Statement
Next, with the concept validated, it was the time to come up with the problem and hypothesis statement which you can find below
And of course, our statements need to be linked to a User Persona which you can also see below
Part of this project was also to run a Heuristics Evaluation similarly to how we had done for one of the bigger projects due during the pre-course work. Unlike Tripadvisor, it is Uber, so the Heuristics Eval didn’t yield any surprising results for the most part, in fact the only part of the app that I think should be improved (and judging from my survey, others as well) was the help and documentation segment of the app. Part of me thinks that the app makes is complicated and difficult to find documentation and/or to contact the customer service department on purpose, as making it o easy would, I think, become quickly overwhelming for Uber.
User Flow & Site Map
Finally, the dreaded site map and user flow were up next. However, I’ve now grown fond of User Flows and think they are a neat tool for planning out your app. For this part of the project, I had to add my feature to the current site map and draw out a user flow with my new feature implemented in the app. This was the last step before I could start sketching out the lo-fis.
Lo-fi & test
Luckily, most screens would stay the same from the current look and feel of the Uber app, so all I had to do was recreate 7 or so screens (following the happy flow of course) and add a couple of the screens which would…feature my feature.
I conducted a short test with 3 users and they all: liked the idea, were positive about the timer function, and thought the overall flow was easy and just like the Uber app (which was the goal). However, they did ask questions about how this would take into account traffic jam/time changes (we’ll let the developers figure that one out but I’m sure it is possible). Additionally, people were unclear on how to turn off the timer, what if they didn’t want it?
Keeping in mind the feedback from the usability tests conducted at the lo-fi stage, I was now ready to spend several hours (ok, maybe at least a dozen hours) on Figma recreating each screen. Thankfully, I feel I’ve mastered the…master component aspect of Figma and this neat tool definitely helps you spend less time recreating every single component every time. Still, this was our first go at a Hi-Fi and because I am a perfectionist lead to several hours of pixel pushing and making sure everything looked as close as could be to the real thing. I even mentioned to include some cool micro animations like the countdown working on prototype for my presentation of this project. Here are a few of the screens, including the last two with the timer feature:
The advantage of this project was that it gave us a chance to really practice our Figma skills before the next project where we would be tasked with creating an online magazine. I really appreciated this opportunity to delve deeper into Figma, and felt I learned a lot of new ways to use Figma. This was definitely the main learning during this project, but also:
- Figma is the bomb.com (sorry Sketch)
- Master components are your friends
- Testing is key, especially early on (I’m pretty sure this is a learning everytime)
- Colours and Typography are fun
- Leave some time — lots of time even, for your high-fidelity mockups and prototypes.
Thanks for reading and please feel free to share or provide me with some feedback or thoughts.