Ironhack Project 3 : Add a feature
Hello, hello, hello !
During this project, I had to analyze an already existing and highly adopted app and incorporate a new feature into the product. My work culminated in a high-fidelity prototype of a native app that reflects the best path forward based on research, iteration, and testing.
I chose to work with Just Eat, a food delivery app because I am a food addict and I am used to ordering food the past few weeks to be honest, as I am attending a very intensive and super cool bootcamp right now !
The high fi prototype is a native iOS app.
This solo project lasted 5 days so, let’s begin !
Empathize
Feature analysis
First of all, to learn more about the app and see what it offers to users, I began an analysis of the business itself. I made a feature analysis to differentiate Just Eat from its competitors.
I decided to see what two others delivery app, Deliveroo and Uber Eats have in comparison, and we can see Just eat lacks of information about some categories and improvements can be made.
Interviews and Affinity diagram
I have made a survey to reach users and also interviewed five people for the qualitative research.
A user survey is a tool for gathering quantitative data on user attitudes. It is an exploratory tool to better understand users and their attitudes towards an industry. Surveys can be used to evaluate user experiences with a current product or feature.
These allowed me to find more about users habits by asking them how frequently they order food online and especially what are the reasons.
With all the findings I have gathered from both research, quantitative with the survey, and qualitative with the interviews by phone, I have created an Affinity diagram.
Qualitative methods can give you an in-depth understanding of something in ways that are impossible to reduce to numbers. Qualitative methods can provide you with more detail about a situation or an answer because you can always follow up with new questions or go back to your participants for more detail.
An affinity diagram is a method used to cluster findings so that you can physically see trends and relationships in data (ideas, opinions, issues). It is very useful during the initial phases of analysis, where you have a lot of data and don’t know when to start.
These are all the quotes from the interviews in little sticky notes, and put in groups to understand users about their needs, motivations and pain points.
Also I had to ask my interviewees about my concept, the feature I wanted to implement in the app to see their reaction and if they would validate it.
So what is it exactly what I want to create as a new feature in Just Eat ?
The feature I created is a suggestion of restaurants and foods to users in the main page, instead of scrolling and looking everywhere in the app.
Basically, in the top main page when you open the app, there will be two top categories scrollable horizontally, one with restaurants you may like and below food you may like. The suggestions are based on your previous orders and have as purpose to avoid users browsing the app and so saving time. This may be an assomption, but when people go on these apps they are certainly hungry and so the faster they order food and get delivered, the better.
Read below what three of my interviewees have to say about the new feature :
Define
Persona
Personas are fictional characters, which you create based upon your research in order to represent the different user types that might use your service, product, site, or brand in a similar way. Creating personas will help you to understand your users’ needs, experiences, behaviours and goals.
Let’s meet Julia, our charismatic student as our primary persona !
Julia needs :
- To be suggested a variety of restaurants based on what she likes
- To be delivered food as quick as possible
- A well structured app with different categories as it is essential for her
Frustrations :
- She is spending too much time looking at all the restaurants
- The structure of the app is not helping her in any way to order food the fastest
- Not much choice available
After defining our primary persona, now is time to make a user journey map to help us further empathize with our users.
User journey map
User journey map is a visualization of an individual’s relationships with a product/brand over time and across different channels. While user journey maps come in all shapes and formats, commonly it’s represented as a timeline of all touch points between a user and a product.
Julia is studying tourism in remote. She begins class at 9am and has a very exciting icebreaker with her classmates. For lunch she has an hour to eat so she panics because she did not go groceries and had no meal prepared beforehand. So she decides to look for food in Just Eat. She navigates the app and looks at the restaurants one by one. She realizes she spends too much time browsing, then she comes across a restaurant she knows and ends up ordering something she had before.
Problem Statement & Hypothesis Statement
According to Julia’s frustrations I came up with these two statement :
Users need to find a way to browse a delivery app in an effective way and order food quickly, because they don’t want to spend to much time looking for food as they are hungry.
We believe by suggesting restaurants and foods users are likely to enjoy at the top of the main page, will achieve in saving them time when ordering. We will know we are right when users will spend less than 5 minutes browsing the app.
User flow
A user flow is a diagram that shows at a glance, the path your user will take through your app or website to achieve a certain goal. For example, many design teams create user flows before they create their UI wireframes.
The epic story of our primary persona is shown here on this user flow. This happy path represents each steps of Julia’s task in order to achieve her goal.
Julia clicks on the app Just Eat. She looks at the suggestion category at the top on the main page. She chooses a restaurant, puts a product to her cart and proceeds to checkout. She confirms all her information for the delivery and pay.
Next step, prototyping !
Ideate
Low fidelity prototype
After deciding the path our user will go through, it was time to begin sketching prototypes. I began with these low fi :
Explanation about what you see :
- Left : main page of Just Eat. You can see here two horizontal scrollable lists, on top the restaurants and below the food. If you scroll down further, there is the classical list of restaurants if you would like to see each restaurants one by one and not categorized in any preferences.
- Middle : The horizontal scrollable list of food suggestions based on your previous orders. Swipe left to right to see the list.
- Right : the first major iteration I have made. Users were confused about these suggestions lists of my feature, the titles were not correct. Therefore I changed the sentences to “Restaurants you might like” and “Food you might like”.
Speaking about iterations, let’s see together the other ones I have made to improve the user experience.
Iterations
- At the top, the status bar was off in my mid fidelity prototype, so I changed it by one in the Design UI kit from Ironhack.
- From the mid fi to the high fi prototype, I changed to way to add a product and go to checkout. At first you can see how to add a quantity of a product, you click on the + and then you click on the price (here 11€) and after there will be a checkout button at the bottom. However to prevent clicking too much on the screen and save time, in the high fidelity prototype (on the right of the picture), when adding a product with the + button, a checkout button with item quantity and price will appear at the bottom of the screen, and with one click on it you will be brought to the cart page. You will understand quickly with the video of my prototype at the bottom of this page.
- The icons on the footer were too small.
What other iterations I have made :
- Common text font size was too small, I changed it to 12px.
- I used smart animate matching layers between pages to keep the status bar in place when switching to another page.
- I have made alternative paths to find a product in a page, either by typing in the search field, by clicking in a category in the menu list or by scrolling down the page and look manually the product you are seeking.
- I added a comment field in the checkout page in case you have any information you would like to share. Also a plus and minus buttons were next to the comment section which was confusing, as it was supposed to add more quantity or less of a product. So I moved up the plus and minus buttons near the product for more understanding.
But overall, the experience of my user testing was a great success.
Style tiles
The style tile is a design deliverable that references website interface elements through font, color, and style collections delivered alongside a site map, wireframes, and other user experience artifacts. Style tiles are based on visual preference discussions with the client.
This is the visual concept of Just eat.
Atomic design inventory
Atomic design (by. Brad Frost. ) is a mental model to help you think of user interfaces as a cohesive whole and a collection of parts at the same time. Through the comparison to atoms, molecules, and organisms, we can think of the design of our UI as a composition of self-containing modules put together.
This is the Atomic design inventory of the app, these are elements such as navigation bar, images, icons and interactive components like carousels.
Components in Figma
Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects. You can create components from any layers or objects you’ve designed. These could be a whole range of things like buttons, icons, layouts, and more.
Also here are the components I used in Figma to help me create the high fidelity prototype.
Prototype
Now here is the final result, the prototype in video !
Conclusion
This was our first solo project in the Ironhack UX/UI Design bootcamp, I had a great time thinking and creating this final product all by myself !
What was challenging was the fact I had to design it alone, nobody here to help you speed up the creation, split tasks or think together.
However, I had the greatest buddy Julie alongside me for the whole week, not working together on the same project but here to support you, motivate you and give you any useful advice, and she helped me going though this intensive week. So thank you Julie, you are AMAZING ! :) Byeeeeeee
