Sanju Jacob
An eCommerce Website Responsive Redesign & Front-End Development (Bootstrap) Case Study
UX/UI Designer & Developer
My Role
Shilpi B., Josh G., Lindsey M., Spencer M., Samantha S. & Myself
Team
Figma, Miro, InVision, Adobe Illustrator, Canva, Visual Studio Code, GitHub, Bootstrap 5
Tools
Overview
Wayfair Inc. is an American e-commerce company that was founded in 2002. Their digital platform sells furniture and home goods, offering about 14 million items from more than 11,000 global suppliers.
We believe we could improve the shopping experience of users on wayfair.com by offering them an intuitive and easy-to-navigate page layout and information architecture, as well as a quick check-out feature.
Impact
To redesign the wayfair.com website to improve the shopping experience of users by offering them a more intuitive and easy-to-navigate page layout and information architecture as well as a quick check-out feature.
Problem
Users who visit wayfair.com find it difficult to navigate through and shop for products they are looking for due to the cluttered layout lengthy checkout process.
Solution
Methodology
We decided to focus on two main questions:
-
Who are our users and how do they behave in an online shopping environment?
-
What are their main pain points?
​We used the following methodology to tackle this project: ​
User Research
We began our user research by doing an Ethnographic Observation Study followed by user interviews and a survey. Simultaneously, we researched site analytics and did a heuristics evaluation of some of the web pages of the Wayfair.com website.
Ethnographic Observation Study
We observed two of our users going through the process of shopping for furniture online and interviewed them afterward. This allowed us to study and gain valuable insights into how people interact with technology, especially when buying tangible and durable commodities like furniture online.
​
Here are our findings:
​
User Interviews
In order to design a better user experience, we first have to identify our users’ process for purchasing furniture online. We interviewed 6 people and to get an idea of who our users are, we asked ourselves “can users successfully buy furniture online” and “what frustrations do they have?"
​
We gave three tasks to our users to complete as we interviewed them:
Task 1: Create an account
Task 2: Search three products and add them to the cart
Task 3: Checkout and pay
​
Here are our findings:
Survey
We also sent out a survey through several channels to supplement the interview data, and got the following feedback:
Website Analytics
We also ran website analytics on Wayfair.com using SEMRUSH .com and found that the bounce rate went up by 25% in Sep.2021 as compared to last year.The average visit duration for the website has decreased by 10% in Sep.2021 as compared to last year.
Heuristics Evaluation
We performed a heuristic evaluation on the site to test if the site is user-friendly. Red-lined annotations note areas for improvement on the page. We evaluated the homepage as well as four other pages for this purpose.
Persona
After gathering all of our data, we brought to life our user persona, Emma Compton. Emma is a 27-year-old programmer living in Austin, Texas.
Emma’s Pain Points:
-
Too busy to shop in-store
-
Overwhelmed by online shopping options
-
Cannot find the exact items she is looking for - too many choices or items are sold out
Competitor Analysis
We did a competitor SWOT analysis to identify our competitors and evaluate their websites to determine: Strengths, Weaknesses, Opportunities & Threats. We examined 2 direct and 2 indirect competitors (Direct: Ikea & Rooms to Go. Indirect: Walmart & Target).
​
Definition & Ideation
Next, we moved into our ideation phase, which is where we strategically and creatively worked through redesign ideas.
User Scenario & Storyboard
First, we explored Emma’s goals and pain points further by creating a User scenario and a storyboard. This helped us visualize Emma’s process- her thoughts, emotions, and actions. Our objective was to get closer and better empathize with our users.
User Scenario:
Storyboard:
Study of Business Model
Since Wayfair sells its products exclusively through its website, the company's business is highly dependent on the website's productivity. It is imperative to ensure that the website offers an easy and intuitive user experience to the customers. By increasing the number of users visiting the website we can increase the conversion rate and hence bring in more revenue. To know more about Wayfair's business we employed a business model canvas.
Value Proposition
A Value Proposition Canvas was used to study how Wayfair's website and the products they sell are positioned around their customer values and needs.
“We’re here to help everyone, anywhere create their feeling of home.”
-wayfair.com/about us
Card Sorting
We did card sorting to analyze the current sitemap. This allowed us to visually move around the site information to organize and find areas of improvement.
​
We initially sorted the current sitemap in Miro:
After going through the current sitemap, we did a closed cart sorting to come up with simpler and improved information architecture to match user needs.
UI Style Guide
We studied Wayfair’s brand style to see how effective it was in communicating their message to users.
Their color palette worked well for their business of selling home goods: The purples gave a sense of superior quality and homely feel, while the greens and yellows symbolized the wide range of products they sell. Their ‘icon with text’ style logo with houses and an open box motif was perfect as well. So, we decided to follow Wayfair’s original brand styling.
Prototyping
With all the user insights and data we collected in our research phase and ideation& definition process, we moved into prototyping the redesign.
Low Fidelity Sketches
We began by sketching low-fidelity wireframes – our team did a combination of paper and digital sketches, and we voted on the main elements that we wished to incorporate in our mid-fi wireframes. For us, sketching was a quick and easy way to visualize high-level design concepts as simple tangible objects.
Mid-Fidelity Wireframes
After we had finalized our basic design concepts based on our user feedback and sketches, we created interactive mid-fidelity prototypes for mobile and desktop. Keeping our user’s two primary pain points in mind, ie. Cluttered layout and navigation, we made design changes and did a round of usability tests.
We started with Mobile-First keeping Responsive Web Design in mind, then we moved on to the less restrictive desktop webpage design.
Testing & Iterating
Our team did 5 usability tests to gain insights on 3 redesigned user flows: Creating an account, searching for products, and completing a purchase. This feedback helped us to gauge the redesigned homepage’s effectiveness in communicating Wayfair’s message to the user and to optimize user engagement in future iterations. We also did an A/B-testing to finalize the homepage's hero image.
Usability Test findings & Iterations
From the A/B test we conducted, the image featuring the couch was the overwhelming favorite for the homepage's hero image, with 75% of users tested selecting it. The main feedback from users was they felt this image better represented the website and its purpose.
Hi-Fidelity Prototype
After analyzing the usability tests on our mid-fi wireframes and iterating them to incorporate the findings, we moved into the next step in our design process – High fidelity prototyping. We went through two iterations of our hi-fi prototypes and tested each version before we settled on our final product design.
Hi-Fidelity Mobile Prototype
Hi-Fidelity Desktop Prototype
Front-End Development - Bootstrap
After we had finalized our hi-fi prototype, we moved into the development phase of our project. We started off by creating a shared GitHub repository and going through various bootstrap components. Bootstrap (v5.1.3) helped us quickly design, build, and customize our responsive website.
​
We used Visual Studio Code to customize the HTML, CSS, and Javascript codes to make our version of Wayfair's website. I, in particular, worked on the product pages and the checkout flow with an error modal.
Final Product
High Fidelity Prototype in Action - Mobile
Coded Webpage Desktop in Act
Next Steps & Reflections
Completing such a demanding project in a limited timeframe required significant teamwork and coordination. We learned to communicate effectively through online meetings and chat rooms, and we also learned how to work together on multiple objectives simultaneously.
Our next steps would be to create a carousel with the hero image on the main page of the website, and to do further testing and research to learn more about our users. Lastly, we would like to add guest checkout, which isn’t currently offered on wayfair, to streamline the purchasing process and make it easier for users.
Thank You!
More Projects...
Nature's Planner
A Mobile App Case Study
