Case study: wireframing the Etsy website
After a fun first challenge, it is time to start the second one of the Ironhack prework. My task is to reverse-engineer a popular app or website by creating a wireframe of the user-flow based on screenshots or high-fidelity prototypes screens.
— But what is a wireframe ?
Every structure, every building, every design starts with a wireframe. It’s an important part of the design workflow that determines the success of the entire project.
A wireframe is, to put it simply, a visual representation of a website or application. The wireframe is like a skeleton made of wires and connections to represent the content. Composed of black & white layouts, it represents the user flow and must therefore be easily understood.
Wireframes are created with the purpose of designing at early stages, testing soon and not investing too many resources in iterations of the product that are not definite.
— Why I chose Etsy for the challenge
Etsy, Inc. is an American e-commerce company focused on handmade or vintage items and craft supplies. I’ve been using Etsy for more than 10 years now and saw the changes in design the website went throught.
I’ve always been a creative person and Etsy has been my go-to for craft supplies, gifts from local artisans for my loved ones or simply for inspiration. I still remember the time when you could make some kind of moodboards with your favorite articles find on the website !
As for Etsy’s design, I simply love it. Simple yet recognizible, the website is easy to use and has that inviting feeling to it. So far from what it looked like in 2005, although it kept that distinctive orange color !
But because I wanted a bit of a challenge, I decided to wireframe the Etsy’s website in responsive view. I’m also used to buy on the website rather than the mobile app.
— The user flow
Okay, now onto the task !
Since it was Mother’s Day recently, I wanted to purchase something for my mum and think about the user flow at the same time. Here’s the purchasing experience I chose to wireframe :
1 — Our user, let’s call her Rose, starts from the homepage. Rose makes a search request for “mother’s day gift”.
2 — Rose arrives on the result page.
3 — Rose clicks on a beautiful bracelet.
4 — On the item page, Rose can see several pictures of the bracelet, a description and other customers reviews of the shop. Rose is conquered and clicks on “ Buy it now ”.
5 — Rose can now go throught the payment process.
6 — Once the purchase is done, Rose can see a confirm screen, with a resume of her order.
— Wireframes and prototypes
Here’s the prototype I made for the Etsy website :
Feel free to click around and see how it reacts, or follow the user flow described above !
And to check the wireframes, click here !
— What I learned during this project
It was my first time making a wireframe and I found a little bit difficult to analyze the key elements or weight the importance of the information to display.
What should I put in the wireframe to make it understandable by someone else ? Should I include this title section or not ? Should I based my wireframes out of a screenshot or do the entire page ?
At the end, I decided to focus on the important elements of the page for the user flow and thought process before the purchase. But I still wanted to have that inviting feeling to the homepage.
Finally, I tested the wireframe with several person, to see if it was easy to understand and navigate.
I took me a bit more time than expected to do this task but made me realize how crucial this step is in the design process. It helps start with a clear layout, get early feedback from clients and avoid having to go through many revisions of the designs at a later stage.
Finally, a wireframe helps to plan the basic structure of the design to effectively communicate with the end-users and your team.
Once again, I learned so much during this challenge and I am ready to start the next one !
Thank you for reading !
