User Flows and Design Patterns: Etsy

Kelly Wong
Design In Progress
Published in
2 min readDec 7, 2020

I love Etsy, and with the holidays coming up, Etsy is probably the reason for my 40% increase in screen time. In this article, I will be looking at design patterns that I’ve observed throughout the Etsy website, as well as providing my own user flow for when I am navigating and purchasing items from the site.

Design Patterns

Modularity and color-coded items

Modularity

Etsy uses modular rectangular boxes to showcase different products for sale. The usage of modularity is clear in the image above, giving the user a consistent and structured shopping experience.

Color-Coded On Sale Items

Another design pattern that is utilized is the color-coded green text that signifies to the user that “hey this item is on sale!” This is also accessible to users because in addition to the colored text, there is also a strike through the old price.

Drop-down menu

Drop-Down Menu for Categories

Etsy utilizes hover-drop-down menus for a user-friendly shopping experience. With its many products and product types, this is essential for a website like Etsy. With hover-drop down menus, it allows the user to quickly scan and find the type of item they’re looking for without needing to enter a new page each time.

Reviews and Star Ratings

Reviews and Star Ratings

Modularity also appears in the Reviews section of a product. When a product is clicked, the user can scan the page for an overall star-rating, as well as look deeper into individual reviews.

User Flow

I’ve attached an example of my user flow for when I shop at Etsy. Overall, I have had positive experiences in shopping at Etsy, and appreciate the attention to detail that they provide to make their users’ experience a good one.

User Flow

--

--