• bullet
  • point
  • s

E-commerce websites can present UX designers with a unique set of problems. Figuring out how to organize and present tens to hundreds to thousands of products in a useable and intuitive manner can be quite a task.


For my second project as a student at General Assembly, I was given the task of designing an e-commerce website based on a brand and product of my choice. The website had to feature an intuitive menu system, 100 products, and allow them to browse and purchase products.


I chose West Elm as my brand and chairs as my product. The result is a proof of concept wireframe that has been through multiple tests and iterations.

My Role
Sole UX Designer
2 weeks

Adobe XD, Miro, Keynote

My process:

Click a box to skip to a specific section or keep scrolling to start from the beginning.

User Interviews
Competitive Analysis
Card Sorting

Affinity Mapping
User Personas
Task Analysis
Site Map
User Flow


Usability Testing

|---------------------------------------------------------- 2 weeks ----------------------------------------------------------|


I initiated this project by developing questions and conducting 5 user interviews.

"I'm always about filters."
"I don't like it when there's too much information coming at me."
"[Reviews] are a double edged sword."

Next, I conducted a desktop comparative analysis between West Elm, Article, Ikea, and Wayfair, all of which sell a variety of furniture including chairs. Categories were based on users likes and dislikes of the e-commerce experience.  I wanted to find out the differences between each company’s review system, filter system, checkout process, and how cluttered or not cluttered their website was.

Synthesizing Data

After Affinity Mapping my user interviews with Miro, a number of trends began to emerge.

Card Sorting

Now that I had developed an understanding of my users needs and pain points, I was ready to start figuring out how to organize 100 different chairs. I decided to do this by conducting 4 open card sorts and 2 closed card sorts.

These were conducted over a period of 3 days. My open card sorting revealed:

While closed card sorting revealed:

Based on these card sorting results, I created this sitemap:

Before diving into the designs, I made a user flow diagram with my recent header decisions. It shows the process I was about to design for and has the flow going from selecting a chair to checking out.

Initial Designs

I used a blend of user insights, West Elm, and Article features to craft my initial wireframes. These include:

Product Page

Tests & Iterations

I conducted 4 usability tests over the course of 2 days. Some of the changes I made:


  • Removed style and type buttons because users were confused by these.
  • Quick Ship is now clickable.
  • Moved “share your style with @westelm” closer to the items it relates to and put all of these inside a grey box. Users initially were confused by the placement.
  • Increased the contrast.

Product Page

  • Added breadcrumbs so users could easily see how they got to this page.
  • Changed “contract grade” to “quick ship,” as users did not understand what "contract grade" meant and were more interested in items that shipped quickly.
  • Added price.
  • Created a “Add to Cart” button so users could buy this product!
  • Added “30 day return period,” as some users felt knowing this up front promoted trust.
  • Switched placement of “Questions & Answers” and “Reviews." Users expected to see reviews before questions & answers. Having questions & answers first made them think that they could find reviews here.
  • Made Reviews clickable so it expands.
  • Moved “what makes west elm different” closer to the items it relates to as users found the initial placement confusing.
  • Increased the contrast.

Final Wireframes

Homepage Mock-up

Mobile Homepage Mock-up

Next Steps

Want to get in touch?
Drop me a line!

I'm always happy to discuss UX, music, modular synthesis, ping-pong, etc...

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.