E-commerce Website Design

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.

PROBLEM

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.

Solution

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
‍‍
Duration
‍2 weeks
‍
Tools
‍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

Sketching
Wireframing

Usability Testing
Mockups

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

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

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.

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

People like reward programs.
One page checkout is preferred.
Shipping times can effect whether or not a store makes a sale.
Everyone has their own way of searching for products so multiple paths to a product may need to be created.
People dislike cluttered websites but will put up with them if the store has what they need and can get it shipped quickly.
Good pictures from multiple angles are important and can help promote trust.
Durability, Comfortability, and Size are important but hard to convey over the Internet.
Reviews are important but many are skeptical of them.
Most people like to be able to save products or create their own lists within a website.

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:

Swivels were often their own category.
Recliners were often their own category.
Contemporary/Modern was always a category but everyone had their own definition of what contemporary/modern was.
There was always some sort of unique/outliers/retro category but users put different types of chairs into this.
Wood, Leather, Fabric, and Metal were often part of the second level navigation.
All women organized by “style” first and all men organized by “material” first. One male expressed interest in categorizing by style but chose material instead.

While closed card sorting revealed:

Contemporary/Modern, Recliners, and Swivels continued to be strong categories.
I made I judgement call to include “Retro” since a number of users had some sort of category like this. More tests need to be done to figure out if this if the right name for this section.

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.

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

Reviews that include comfortability and durability ratings
Users can rate reviews
Single page checkout process
User photos
A variety of filters
The ability to save/create your own favorites list
Quick view
Rewards program
A simple website

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

Homepage

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.

E-commerce

PROBLEM

Solution

My process:

Research

Synthesizing Data

Card Sorting

Initial Designs

Homepage

Product Page

Tests & Iterations

Final Wireframes

Homepage Mock-up

Mobile Homepage Mock-up

Next Steps

Want to get in touch?
Drop me a line!

E-commerce

PROBLEM

Solution

My process:

Research

Synthesize Data

Design

Test & Iterate

Research

Synthesizing Data

Card Sorting

Initial Designs

Homepage

Product Page

Tests & Iterations

Final Wireframes

Homepage Mock-up

Mobile Homepage Mock-up

Next Steps

Want to get in touch?Drop me a line!

Want to get in touch?
Drop me a line!