IronHack UX.UI: Project III-Add a feature

rochaslucie@gmail.com
8 min readAug 3, 2021

For this 3 Iron Hack UX UI Bootcamp project, we had to add a feature to an existing app. We had one week. And we work alone.

I decided to develop an feature for iOS Uber app.

The brief

1. The brand

Uber

Uber is an American technology company founded in 2009, based in the Silicon Valley, which develops a mobile app that connect users with drivers.

This digital revolution has created a new and widespread economic principe “The uberization”. The term was first used by Maurice Lévy in an interview with Financial Time. The definition given is:

“Ubersisation is the questioning of the economic model of a company or a sector of activity by the arrival of a new player offering the same services at lower prices, carried out by self-employed people rather than employees, most often via Internet booking platforms”.

2. Brand Market Research

To understand the market, we did a study. Thanks to the data collected by a study of July 2017 Dalia Research we observed the division of the market into taxis, Uber and its competitors. We observed that Uber is occupying 45% of the market. Then, we were able to see the market distribution between Uber and its competitors thanks to a Mediametrie study of 2019. And we found that Uber leads at 80% with its competitors.

3. User Market Research

Then we tried to understand who are the users to adapt the service. Thanks to a study « Pew Research Center » of 2018, we found that users are young and financially well off.

“Pew Research Center” 2018

4. Feature Competitive Analysis

Then we did a comparative study of the features of Uber and its competitors. We could see that the main features we compared were almost present on all applications.

Feature Competitive Analysis

Part I UX

The design thinking

Design tinking Steps

To add a useful feature, we tried to understand them and their needs. To do so, we followed the different steps of design thinking.

1. Empathize

To understand the user, we conducted five interviews. We chose five users based on the results we obtained from the user market research.

We interviewed :

  • Julie, a 31 year old consultant, single without children.
  • Gabriella, a 33 year old craftswoman, single with one child.
  • Antoine, a 35 year old lawyer, married with no children.
  • Hector, a 42 year old engineer living in Bordeaux, single with two children.
  • Diane, a 50 year old consultant living in Paris, married with one child.

Overall, it emerged that users use transport, cars or bikes on a daily basis. They use Uber for special purposes, such as getting home from a party or from the airport.

The pluses are that you can order easily from your phone, anticipate the ride, see the car moving, choose the type of car

The interviewees were very satisfied with the service. However, some suggested seeing the driver’s note when ordering or adding the possibility of ordering a user to help with moving or buying second hand furniture.

The most striking quotes:

“I take an uber when it’s raining and I’ve had a bad day.”

“It’s complicated to find a way to bring back furniture found on leboncoin or at flea markets.”

“I use the new apps that offer me rides.”

2. Define

Affinity Diagram

From the data collected in the interviews we made an affinity diagram. We have noted on sticky notes all the main information and we have grouped into clusters. What underlined the pluses, the demands, the brakes.

Affinity Diagram

Persona

Then we created a persona, with the user market research data and the interview data.

Our persona is a 29 year old woman who loves vintage and design. She likes to buy second hand.

User Persona

User Journey

Based on the Persona, we did the User Journey, to understand the stages of the user’s experience when using the service.

Our persona, Thaïs, is a young woman, moving in with her boyfriend. Her User journey frustration comes from the fact that she wants buy to the flea market furniture for her new appartement, but antique shops rarely deliver. She searches into her friends who can help with no success. Thaïs would like to use her favorite app, Uber, but she knows that most of the time they refuse to take furniture.

User Journey

Story Board

To visually express and implement the User Journey of our persona, we used a storyboard.

StoryBoard

Problem Statement

These analysis phases allowed us to highlight the Problem Statement, which is the gap between the problem encountered by the user and the desired state. The problem statement:

Vintage lovers need to find a way to bring back home furnitures they have found because second-hand dealers do not deliver.

3. Ideation

Crazy eight

To find a solution to the problem statement , we used the Crazy eight tool. We had 8 minutes to come up with 8 ideas to satisfy user needs.

The ideas:

Crazy eight

The most interesting ideas for responding to the probelem statment were:

  • to create a category of utility car
  • to offer a mover with the van
  • to offer a customised service

We decided to add the “offer a van” feature.

4. Prototype

Site Map

We created the site map of the study site, and added the functionality we decided to introduce.

Site Map

User Flow for the Happy Path

After the site map, we made the User flow, which is the representation of the possible navigation paths.

The happy path is a representation, of the paths that can be taken when the user navigates a website or an application without error.

Low fidelity Wireframe

This led us to draw the Low Fidelity Wireframe of our project.

You can see the steps involved in booking a car. From the connection to the confirmation, through the functionality that has been added, that is, the addition of an extra functionality, which is the possibility of reserving an utility.

Low Fidelity

Mid Fidelity Wireframe

Based on the Low fi Wireframe we created the Mid Fidelity Wireframe with Figma. We took the application and added the requested functionality. Then we created the components. A component is an element of the software, intended to be incorporated into the application. Then we added the links between the pages to create prototypes.

Mid Fidelity Wireframe

5. Users tests

To validate the realisation of the mid-fi Wireframe,

We conducted the tests to get quantitative data, we asked questions. And qualitative data, we let the users give us their impressions.

The remarks concerned the content, requesting to add the drivers’ notes when booking. And also on the form, aligning the elements well.

Tests

Part II UI

Atomic Design

Atomic design is a modular design approach conceived by Brad Frost to create Design Systems from components: atoms, molecules, organisms, templates and pages.

Like chemical atoms and molecules, the elements of the interface must be alive and evolving. This method allows designers to design user interfaces that are coherent and better adapted to needs and uses. Atomic design allows the client to see the stages of the design.

We realized and separated the elements of the site to create atoms (with components), molecules and organisms.

Style Guide

Then, we created the style guide to help us making the hight Fidelity wireframes.

It includes :

· Logo

· Component

· Typography “Raleway” with the different sizes

· Brand colours, neutral, secondary, accent

Style Guide

Hight Fidelity Wireframe

This allowed us to create the Hight Fidelity wireframes and the prototype.

Hight Fidelity Prototype

Part III Heuristic Analysis & Conclusion

A heuristic analysis helps to identify usability problems in order to solve them and improve the satisfaction of the experience and increase the chances of success of a product.

User test

Before validating the functionality and in order to improve our project, we did 5 user tests. We conducted quantitative tests where we asked questions. Then qualitative tests where we let the users tell us about their experience and feelings.

It emerged that we could improve the background, and add the size of the vehicle from the page presenting the vans. It also emerged that we could improve the shape by paying more attention to the size and alignment of the elements.

We made the changes following the tests.

Tests

Next Step

For the next step, we could add a feature that allows for a personalised service. We could also develop the possibility of ordering a mover with the utility.

Key Learnings

During this project, I learned that it is important to do user testing with people with very different personalities. People often focus their attention on very different things. So it’s a great asset to multiply the tests.

I also learned that work can always be improved but that it is difficult to stand back from your work.

--

--