Vinted’s reverse engineering ~ Ironhack Challenge #2
This is an assignment during the prework of IronHack’s UX/UI bootcamp. My challenge is to reverse-engineer an app’s user flow and I’ve choose to work on :
App creation process
Creating a sketch first, then a wireframe, then a mockup, and finally the prototype are different pre-development procedures that make sure that you, as a UXUI designer, have understood what the app has to achieve.
In this assignment, my goal is to work from an already coded app and turn it into a mid-fi prototype aka wireframe.
Vinted’s feature
Vinted is an online marketplace for buying, selling and exchanging new or secondhand items, mainly clothing and accessories. The platform has several types of users: sellers and buyers. A user can be both a seller and a buyer.
I’ve chosen Vinted because it’s an app design to sell and buy privately. The “make an offer” is an interesting feature because it’s a really fast and easy process where seller and buyer can negotiate the price of a product in less than five clicks. Here are the screenshots I’ve worked with :
For this challenge I decided to use the Vinted application with the experience of an already registered user who wants to negotiate the price of an item from his favorites list. To do so, the user must:
- Scroll horizontally through the favorites section or click on the “view all” link in that section
- Select the item
- Click on the “Send Message” button
- Then click on the “Make an offer” button
- And finally fill in the field with the desired price
Immediately afterwards an automatic message is sent to the seller who must accept the buyer’s offer or propose another price in order to close the deal.
Low-fi : Sketch
The sketching stage allowed me to identify the structure and main UI components used in each pages :
The search bar & navigation footer are only present in the home page.
Categories are named and identified with simple outlined icons.
Links help you during the process (translation, explanations, further research…)
Horizontal scrolling is use to show visual of the products (home page and product page)
In the product’s page and message #2 screen the seller’s card shows his profile picture, name, rating, number of evaluations, location and the time of his last connection into the app, which are a part of the reassurance process in e-commerce strategies.
Buying button is always the primary button and the offer button is not proposed directly in the product page but in the messaging page instead.
Mid-Fi : Wireframe
Wireframing is designing websites or apps by focusing on the structure. To do so, it’s usually created only with grayscale in order to focus on the functionality, navigation, or flow of the website/app.
It’s “creating the skeleton of your interface” ~ Ironhack Courses
Key Takeaways
Reverse-engineering allowed me to focus on details and structure of an application and to train my synthesis skill.
Figma is really user-friendly for beginners but I still find it hard to put components in order and use each property to my advantage.
