As a second challenge in my prework for the Ironhack Bootcamp I have been asked to “reverse engineer” a popular app’s Interaction Design and User Flow.
Though the app I’ve chosen might not be the most popular (yet) it is an app that I absolutely love and use almost on a daily basis: Bring!
Let me explain what this app does:
Bring! is an app created by a Swiss mobile tech company with headquarters in Zurich and premises in Berlin. This app that is meant to simplify grocery shopping for yourself and for your shared household. It accompanies the user through all aspects of shopping - from the inspiration with recipes and offers, to the collaborative planning with shared shopping lists till the visit at the supermarket and the final purchase of products.
I have decided to use this app for my challenge due to it’s simple and intuitive interface and because it’s an app I am very well accustomed with since I use it almost every day.
I have taken some screenshots of the app which I used to recreate in Figma for Exercise 2: Practice and which I also used as reference for this challenge:
One of the most import features of this app is the possibility to share your shopping list with friends or family which then can see the items needed to be purchased and can add more or tick off the groceries already bought.
This is also the flow which I have decided to recreate and wireframe in Figma. Below you can see the wireframe I have created after the screenshots above:
When you open the application, you are taken to the main overview of your lists. Already from here you have the possibility to add collaborators to your already created lists, the button being very obviously placed next to your own user profile picture. Friends can be invited either through nowadays main communication platforms or by email.
In case you would rather check your shopping list first and later on decide whether you would like to add more users to it, you can just click on the desired shopping list image and you will be taken to the ingredients overview, where you can add or mark groceries as bought.
From here you have multiple possibilities to reach the Add friends page, either by simply clicking the “add user” button which takes you directly there or by taking a little detour through the page List settings. You can reach this either by checking your Options or by navigating first to your Profile page.
Below you can see how I recreated the specified flow through the wireframe and the prototype connections:
If you want to take a look at the prototype in Figma, please click on the link below:
Overall I have to say that I have greatly enjoyed working on this challenge and I was very pleased to discover how easy it was to learn and use some of the functions of Figma. Though at the beginning I felt overwhelmed with the amount of information and features involving this program, once I actually started and applied little by little the learned knowledge, it was quite easy to put it all together and create my very first app prototype!
Looking forward to more!
