Ironhack Challenge 2: Wireframing — deliveroo app
Ironhack asked me to ‘reverse engineer’ the one popular app Interaction Design and User Flow. I have chosen Deliveroo application from the homepage to the delivery confirmation one.
Why Deliveroo app ?
It is a very intuitive and simple app which design I love and the customer journey is very easy. I like the different possibilities the app offers :
- Choose your favorite cuisine, dish or restaurants
- Filter your search based on your diet, delivery time, restaurant rating, etc.
- Program your delivery for now or later
- Go and get your dish yourself with the “take away” option
- Follow the arrival of your order in real time
- Check the progress of the preparation of your order
- Receive notifications when the delivery person is on the way and about to arrive
Above all, I wanted to focus on an app that first shows you the different options before engaging you in the buying process. It is kind of entertaining, and once users are seduced by the product, deliveroo can collect their personal data and register their payment card to facilitate the next orders.
Task Analysis
1- First, the users have to choose if it is a delivery or take away order. Then, they can select on the same page what kind of food they want and special offers (discount).
2- Next, once they have selected burger food for example, they can choose a restaurant of burgers.
3- Then, they have the restaurant details: presentation, ratings, distance, menus, delivery time. From here they can select the type of burger’s menu they want.
4- They can select the side dishes they want or other food articles.
5- A basket is created. They can modify the basket, the delivery time, adding cutlery, tips and they can see the total amount.
6- Next, they have to add a payment method and their card codes.
7- They have to choose a signup method. The options are Google, Email or Facebook.
8- They select ‘Sign Up with Facebook” and confirm by entering their Facebook account.
9- Finally, the users can see the confirmation of their order, the estimated arrival time and the option to cancel the order. They also have the option to invite their friends to gain credits for their next orders.
Wireframe screens
Prototype
Key learnings
Figma
I have learnt to use Figma more deeply, by reading articles or looking tuto videos. I really enjoyed creating interactions and animations to make it alive. In addition, I understood how much sizing is essential to reflect the importance of each UI elements. Then, I really liked studying the user flow and the way deliveroo made it as smooth as possible.
Choice of the app
I wanted to work on an app with a buying process and at least a subscription process. It is important to understand the business model behind and the data collection which enables deliveroo to maintain customer loyalty.
Creating wireframe
I think the desire to add details and an aesthetic eye comes rapidly. I really had to restrain myself and reread the notion of “wireframe” several times. I had to learn how to be patient and not cut corners to do a real work of self-analysis . I tend to go too fast, whereas it is a painstaking work that needs precision, above all when you have to tidy up your layers… (haha). Then, I enjoyed understanding how related screens/pages work together from a user’s perspective.
Thank you for reading and your comments.
