Etsy Reverse Wireframing
--
For Ironhack’s July session’s prework I had to reverse engineer the wireframing from the app of my choice, as the second challenge. I chose to work on the Etsy mobile app for two main reasons: the first one being that I’m a regular user of this app so I felt like I had a good idea where I was going; second reason being that I like its simple design and wanted to explore its structure beyond the visuals.
What is Etsy
Etsy is a highly successful e-commerce website and app, focused on handmade or vintage items and craft supplies. Launched in New York composed of Robert Kalin, Chris Maguire, and Haim Schoppik in 2005, Etsy has since gone through many ups, downs as a business but also user experience evolutions as a product.
As of 2020, the app looks extremely refined: that’s something I aspire to as a designer. Understanding how they structured their flow is our next step.
The flow
I chose to work on the steps that allow a user to add a favorited item to the cart.
This means the first screen was the default dashboard, the one you see when opening the app. To see the favorited items, you have to go to the “Favorites” tab. Here you’ll find your items or your custom lists of favorite items; you can see the details of an item by taping on its card. Once you’re on the expanded page, you’ll most likely need to scroll down a bit to tap on the “Add to cart button”.
Now the little cart on the bottom-right corner of your screen shows a little notification bubble, by tapping here you’ll find your cart where you can launch the purchase process.
I decided to not go further as, to me, the purchase is a separate action, so a separate flow.
Launching the buying of a favorited item takes 6 taps starting from the dashboard. At first I thought that was a lot and it seemed like the user needed to go through a short journey before an item could be added to the cart, this impression was mostly caused by the favorite custom lists. And I think Etsy is focused on user-friendliness but actually on keeping things clean and organised just as much; at least it’s what I’ve taken from it and I kinda like it.
What I learned
Reverse engineering an app’s wireframes is time-consuming. More than I thought it would be. But the process of doing so was very enriching, it forced me to become more aware of the layouts and cause and effect within an app I’ve come to take for granted.
I also noticed how the contrasts and large buttons could be a great first step to increase accessibility.
To test the lo-fi prototype, click here.
