Case Study: Add a feature into a native app
For my 3rd Ironhack project, I had to incorporate a new feature into an already existing app.
Great way to learn how to design for a native app, focusing on the UI part. I decided to work on iOS platform and my goal was to culminate with a high-fidelity prototype that reflects the best path forward based on user research, iteration, and testing.
As a maniac foodie and restaurants addict, I decided to work on a French App called Le Fooding. Your mouth watering? Then follow me in this article to see how I created a new feature!
BACKGROUND
Le Fooding was created in 2000 by Alexandre CAMMAS — journalist, author and food critic.
Fun fact: “Fooding” is a French neologism formed by amalgamating two English words: Food and Feeling!
Le Fooding is an annual food guide that helps you to discover the best restaurants, hotels, guest houses and bars in Paris and all over France.
They’ve launched their app in 2019. Using the app, you can find a large selection of places with a critic from the Fooding team only (no external reviews). And if you have a crush for a restaurant, just call it to reserve your table, online booking is not always possible.
RESEARCH
To start, I did a competitive benchmark to list the different features present in each application on the market. This is a key step to compare your app’s features to those of your competitors, and also to detect the first optimization tracks. At this point, I could already see that the Fooding app was the only one that did not have an active community, interesting track to keep in mind.
Then, I tried to better understand my app users by conducting qualitative interviews. My goal was to understand how they use the application, what they like the most / the least, what they would like to add / improve. I synthesized the content of my interviews on an Empathy Map, to shed light on which problems to solve, and how to do so.
Based on this research, it was time to give life to my User Persona so I can understand better the user’s needs, experiences, behaviors and goals.
I’m glad to introduce you to Agathe! She’s a food addict and loves to go to the restaurant with her friends. She’s always super happy to discover new places, from Social Media or while chatting with friends. Agathe is always in a rush when she has to book a restaurant, so she would love to have friends’ recommendations within the app so she can save time on the research part. Also, she trusts the Fooding team’s reviews but would love to have sometimes more reviews from people she knows, to get a more objective overall feedback.
We can have a look now on Agathe’s journey to see the challenges she faces when she wants to book a restaurant.
DEFINE
Regarding Agathe’s issues, I was able to define the following problem statement:
Agathe needs a way to get recommendations for restaurants she may like because she trusts her friends and knows their opinion will help her to fully enjoy her experience.
Now, I really believe that adding a “friends’ selection” feature for Agathe will help her to discover new places, be reassured during her decision making process and enjoy a pleasant moment.
So How Might We integrate a “friends’ selection” feature for Agathe in the current app? Let’s try to understand first where this feature can be added…
SITE MAP
You’ll see below how the current Fooding Site Map looks like, I directly added in blue the functionalities related to my new “Friends’ selection” feature.
It’s now time to see which “happy path” user flow Agathe will take to achieve her booking goal:
Agathe opens the app and clicks on her Fooding account where she can find her friends’ selections (new within the app). She’s redirected to a new page which displays all the restaurants recommended by her friends on a map (new within the app). She can use filters to adapt her wishes. When she finally finds a recommended restaurant which seems nice, she clicks on the restaurant page to read the Fooding critic, but also and her friends rating and reviews (new within the app). If she’s thrilled, she can make a phone call and book a table.
According to the following user story “Agathe wants to have restaurants recommended by friends within the app to discover new addresses”, I can already show you what I imagined and how this will look like in the native app:
You can already see here a creative draft of these new functionalities which was made in compliance with the brands guidelines of Fooding. Talking about brand guidelines, let’s make a small detour into the style tiles of the brand.
BRAND ATTRIBUTES
I’ve recreated the Fooding brand guidelines with the colors, the buttons, the typography, the iconography, and the components used in Figma to realize my Hi-Fi prototypes:
Once your style tiles is ready, don’t forget to use the Atomic Design Inventory to see how these several elements will come to life together. Indeed, you have the big picture of your project in mind, and it’s made by all these elements. So if you want to keep consistency all along your Figma files, don’t hesitate to organize yourself with this method, you will save time for sure!
I believe it’s time now to show you my final prototype! You deserve it if you made it till this point!
PROTOTYPES
Before creating my Hi-Fi prototypes, I started with hand sketches to see how I wanted to display my elements on the screen. Once I was feeling confident with my low-fi, I created Mid-Fi prototypes that I used to test my concept. I collected precious insights to improve my feature and its integration into the overall user experience. And this is where I ended, with this first Hi-Fi iteration!
CONCLUSION
I didn’t have time to test this Hi-Fi prototype but I believe this would have been helpful to bring it to a better level. I also spotted some other improvements that could be added to this app, and that I would be happy to look into in the near future.
This was my first solo project during the bootcamp and I had a lot of pleasure to create this new feature by myself! At this point, I learned to work even more rigorously and I know this will help a lot for my next projects.
Special thanks to Sombath, the best buddy I could have during this project. I was so lucky to have you by my side, always eager to give good advices and very attentive, you’re the best!
