Understand UI design mechanisms through reversed engineering
The example of Gorillas.io
Let’s do some reversed engineering!
Here is a study of reversed engineering with user interaction design.
As a current student of Ironhack’s UX/UI Design Bootcamp, I was asked to go through a couple of challenges before starting the training.
This is the second one: after choosing an app of our choice, we will dissect its design to understand its mechanism.
I chose to work with Gorillas.io, an app that delivers your groceries in front of your door in 10 minutes.
Gorillas.io: your groceries on your smartphone
Gorillas is a project which started in Berlin in April 2020, during the first wave of the pandemic. A friend told me about it, and I was curious to give it a try.
I am already familiar with home delivery groceries: more than a decade ago, I ordered on the websites of the biggest supermarkets.
Back then, my situation was different: I was living with my former partner. When we wanted to order online, our cart's amount reached the minimum amount for the delivery.
The supermarket staff would deliver the groceries was a couple of days afterward and in a 2 hours time span. Since we had regular office hours, it was easy to anticipate the best timing.
So, overall, all the pain points were not a problem for us.
When my partner and I broke up, I changed my way of consuming. I was no longer reaching the minimum amount of delivery on my own.
Also, I worked as a freelancer and wanted to stay available for short notice missions. It was not easy to anticipate my free time anymore.
The at-home grocery delivery became too complex, so I just forgot about them.
Until I heard about Gorillas.
Gorillas are answering all my issues.
There is no minimum cart amount, which great for people living alone. The delivery fees are low (1,80€), which encourages making small groceries more often. And last but not least: the delivery is speedy.
Ok, so let’s give it a try!
I downloaded the app on my smartphone, ready to give it a shot.
Unfortunately, the district where I live (Berlin-Wedding) is currently not served by Gorillas’ delivery service. If the user does not put an address where Gorillas delivers, browsing through the app is impossible.
I used my friend’s address instead. I’ll get my groceries later with my bike. That’s still better than going to a crowded supermarket in the middle of a pandemic, anyway.
The general feeling of the experience
The app was straightforward and intuitive to use.
I realized after a while that both English and German were used simultaneously in the application.
English for the pages related to Berlin and German in the rest of Germany.
Using English for Berlin is smart since the target would be mostly expats who use English daily. But having the two languages in the same interface was a bit confusing. Maybe it would be simpler to let the user choose their favorite language in the settings and stick to it all along. The language option already exists in the settings panel but does not seems to be activated. This will probably be fixed soon!
For this challenge, I will share my experience as a customer and analyze the app's whole buying process.
I chose to work with the flow of six screens, where I will show the process of placing an order, the ‘happy path’ of it, as they call it.
Now we have the screenshots of the app, we are going to do some reversed engineering, meaning that we are going to analyze the user interaction by transforming these screenshots into minimalist wireframes.
What is a wireframe?
A wireframe is a tool that designers use while designing a UI interface. There are three levels of details for a wireframe: low-fidelity, mid-fidelity, and high-fidelity design.
The lowest, the cheapest. And the highest, the most expensive.
During each step of the process, the designers will upgrade the design quality to finally end up with the final product.
Low-fi wireframe and task analysis
To create a reversed engineered wireframe from the Gorillas screenshots, I chose to print some wireframing sheets from Sketchize and directly draw on my paper prints.
It’s recommended only to use black and white and avoid colors or gray shades.
I found it convenient to use different sizes of black pens. Such tools aim to avoid getting lost in any graphic design concept and focus on the interface only. I also chose to use a little grey shade to clarify the interactions and underline a text field.
I made some mistakes during the process, and I am sharing with you what I would avoid next time I draw low-fi wireframes.
I noticed that it’s better to close the containers after having written all the content inside.
Also, draw the bottom elements first and all the navigation bars to save enough space for them.
Now that I have my low-fi wireframe, let’s dissect the process with task analysis. This step usually comes right before starting the design part, but since we are doing reversed engineering, it’s the best moment to deconstruct and analyze.
Task analysis is the study of how the user will complete a particular task, which is here: placing a grocery order.
The steps they will have to do is to explore the different articles’ categories and fill their cart. There are different ways to navigate to find articles: the categories cards on the home page, the navigation bar on top, the suggestions on the article page, or the browser.
Once the cart is filled, the user can double-check their basket, add optional delivery instructions, add a tip and confirm the order.
Then, a screen with the confirmation of the order and the estimated arrival time of the delivery pops up.
A pretty smooth path, as you can see.
Some advice for mid-fi wireframe
Now that I am more aware and familiar with the interface, I will transcript what I have done on my paper to the screen with Figma.
Here are some tips about creating wireframes in Figma that I learned during the process:
- Before starting, check that your frames’ size matches a device preset. There is a list of them on the options panel. It will help work with existing interface ratios. When you export your interactive prototype, you’ll have a better-looking interface with the device's modelization (that we don’t have on the video above).
- Keep your folder tidy and rename your elements with the appropriate names. Although it can be a tedious job, it will save time for you and your team in the future.
- When you have a visual element that occurs several times, design the whole item once and then duplicate it. You’ll be sure that the items’ ratio will be equally homogenous.
Conclusion
This reversed engineering study helped me understand the app’s mechanisms and notice where the essential interactions stand, regardless of their visual aspect.
Once the wireframing step is done and validated, all the visual elements can be placed on the architecture. The sugar coating, I would say!
