Project Summary:
The goal of this project is to expand existing clientele by improving the current user interface of the Wayfair website. Since the business relies on its online platform, improving the website will help boost sales and increase the clientele.
Challenge
47%
Millennials buy furniture online
63%
Millennials buy furniture from physical stores
The challenge of this case study is to create design solutions for the Wayfair website to expand its customers online for furniture shopping
Solution
Provide an intuitive online furniture buying platform for the Wayfair website which can attract more customers for online furniture shopping.
Design Process
Click on the image to move swiftly in different stages
Research
Performed User Interview, Competitive analysis, Usability Testing.
Analysis
Task analysis, Analyzing data from SWOT diagrams
Ideation
Sketches, Usability testing with MVP designs, Lofi, Hi fi Prototypes
Prorotype/ Takeaways
Final Prototype video, My takeaways, Final outcomes
Research
In research stage, I identified who is the biggest competitor to Wayfair, and created usability testing to compare both websites online
The Competition
Although, there are multiple companies in the market that are currently providing online furniture shopping experiences. Some of the examples are Crate and Barrel, CB2, West Elm, IKEA, H&M, Room & Board.
According to CoreSight research (2020), IKEA is leading the charge. IKEA is a torchbearer for investing in digital capabilities and has physical stores for customers to shop. The company’s e-commerce sales increased by 46% in the fiscal year 2019 comprising 11 % of total sales.
For getting a better understanding of the competition, we performed usability research for Wayfair vs IKEA. The feedback from the survey was used to improve Wayfair’s online interaction services.
Usability Testing: Mixed Method Survey
Survey instructions
Task 1 - Selecting shopping items for Wayfair and IKEA websites
Likert scale questions, Open-ended questions
Survey Feedback
A detailed survey of 8 people on survey monkey was created to perform tasks and answer questions related to both websites. The basic idea was to observe participants while they perform shopping tasks from both websites. Once the tasks were completed, users were asked to explain their opinions by comparing both platforms using user metrics.
Survey Tasks
Task 1
The first task is to select furniture for the above living room from the Wayfair website. https://www.wayfair.com/.
The living room dimension is 12x 15ft. The theme for selection is Contemporary & Modern. Choose a color theme (blue /yellow/ brown) for your furniture selection. You will be selecting objects which have a higher than a 3-star rating. Please see that your selection for every item should not go above than prescribed budget rate.
Objects to be selected are
Object 1: Couch (Budget Limit – $700)
Object 2: Coffee Table (Budget Limit – $300)
Object 3: Rug size 8x10 (Budget Limit – $200)
Make sure that your furniture is above a 3-star rating, follows the color theme/ style, and fits in the provided dimensions. The task is accomplished once all items are added to the cart.
Task 2
The second task is to select furniture for this living room from the Ikea website https://www.ikea.com/
The bedroom dimension is 12x 15ft. The theme for selection is Contemporary & Modern. Choose a color theme (grey/ blue/ white) for your furniture selection. You will be selecting objects which have a higher than a 3-star rating. Please see that your selection for every item should not go above than prescribed budget rate.
Objects to be selected are:
Object 1: Couch (Budget Limit – $1000)
Object 2: Coffee Table (Budget Limit – $300)
Object 3: Rug size 8x10 (Budget Limit – $200)
Make sure that your furniture is above a 3-star rating, follows the color theme/ style, and fits in the provided dimensions. The task is accomplished once all items are added to the cart.
User Metrics
I compared survey results on the Performance and Combined/ Comparative metrics
Performance Metric
Task success:
This metric measures how effectively users can complete a set of given tasks. To measure task success, users are provided with clear goals such as adding items to a cart or creating a user log-in. Task success or failure is decided by comparing it with the defined scale.
Time on task:
Time on task measures the amount of time required to complete the task.
Task Error:
This metric helps to understand the mistakes made during the task sessions. It also helps in pointing out the underlying cause of the task failure.
Task Efficiency:
This metric helps to calculate the amount of effort, the user provides to accomplish the task.
Combine and Comparative Metric
Combine and Comparative metrics will be used to compare Wayfair and IKEA on common topics such as aesthetics, website design, prototyping categories, etc
Survey Results
I charted my data for comparing IKEA and Wayfair website user metrics derived from 5 points Likert Scale
Analysis: Conclusion with SWOT Diagrams
Results were analyzed with a SWOT diagram to find simplify the goals and layout the hidden opportunities. SWOT stands for Strength- Weakness- Opportunity- Threats
Strength
5 out of 8 participants supported their likeability for the Wayfair website as compared to IKEA where only 3 out of 8 candidates supported the website. Although the results are close, there are prominent differences in which participants preferred one website over the other.
The reason why the Wayfair website stands out is as follows:
Product Variety: The Wayfair website not only sells its brand product but also provides a platform for other companies to sell their products. Being a third, party seller the variety of product options is exponentially more than IKEA which only sells its brand’s products.
Product Category Display: Wayfair provides a clear product category display on the main/ landing page which made it easy for participants to search for products quickly as compared to the IKEA website, where the only visible option was searching keywords through global navigation or using the sidebar for product options
Weakness
Slowness on the website: The most-reported problem, which we can see from participant comments is slowness on the website. Slowness in the website also affected the overall navigation of the website.
Filter Time lags: The website lags every time a filter is applied. This breaks the flow for the user in selecting products.
Filter Design: Users also faced the problem with the filter button. Few categories like the style are so long that it takes a few minutes to get to the desired options.
New window: Opening a new window, every time a product is clicked breaks the user flow and results in a lot of confusion.
Content Organization: Since the website is loaded with a variety of products, its chaotic content organization makes it difficult for the user to navigate smoothly. Showing too many products on one page makes the user feel overwhelmed. It creates decision fatigue, which results in not buying the product.
Lack of interconnections- The website products are not systematically interconnected. Most of the products shown on the creative ideas page do not have a landing link.
Opportunities
Opp1: Redesign of filter tabs
Opp2: Creating a systematic inter-connected website. Instead of opening a new page for every product clicked. The new product can be laced into the website.
Opp3: Cleaning websites with categories. Instead of showing too many products on one page, products can be grouped together for easier navigation.
Opp4: Provide better interconnection for product search. This feature can provide a continuous loop to help in wayfinding multiple products from different sources.
Threat
Brick and Mortar: Since Wayfair is an e-commerce website, it's imperative for the business to provide the best online interactive interface as compared to companies like IKEA whose online inefficiency can still be overcome by in-store user experience. To be on top of business, they should conduct multiple research to get the best results.
Proposals from pain points
These interviews provided a real opportunity to explore. After exploring all data from SWOT analysis, we stick to prime 3 points.
Providing connectitivity
The current website opens the clicked product in a new window. Removing the new window not only helps users to stick to the current page but also simplifies flow by removing new tab confusion for users.
Simplifying website
The website product page was abundant with a lot of items which was confusing users while browsing the directed product. Simplifying website will help users to find items quickly.
Removing filter Time Lags
The current website refreshes every time a filter is applied. This breaks continuity for users in product browsing. Providing a Call to Action button after all the filter is applied will smoother the process.
Ideation: Design Layouts
After understanding the pain points of the user from SWOT analysis, rough design layouts were created. We refined them to high-fidelity prototypes in later stages.
Sketches
Basic conceptual sketches were created before starting with low-fidelity wireframe diagrams.
Main Page
Product Page
Product Browsing Page
Product Detail Page
Lo-fidelity Wireframe
Wireframes were built to understand the design workflow of the website. The diagram below shows the basic structure which was created before finalizing our final layout.
Main Page
Product Browsing
Product Option Page
Filter Page
Usability Testing
We tested our initial designs with users and found multiple problems in the current design layout. Solutions were provided on the basis of feedback given with our usability testing.
Checkout- Before
The initial designs missed clear demarcation of site path during checkout
Checkout- After
Bold breadcrumbs for site path are created in checkout for user to know which stage they are at.
Filter- Before
The previous design had basic filter options with check boxes
Filter- After
The new design contained visual clues for every filter option to provide clear understanding about products to users.
Adding more options to navigate
In previous design, side navigation was not activated. After activating side navigation, we provided more grouping options for user to explore
Prototype
We build our final prototype depicting stages: Onboarding, Product Filters, and Product Details. The video below showcases multiple other features in different stages.
Stage: On-boarding
Providing multiple ways for users to search for furniture:
Users can select furniture by using the main navigation bar in the header or by scrolling items to search for trending categories, or by using side navigation buttons and global search buttons.
Stage: Filter
Providing visual filter options
Users can choose or apply filters like a pro by using options from the visual filter gallery. Words like contemporary, futuristic are provided with a visual reference for the users to understand options quickly. Every category moves to a filter page, for users to customize options swiftly.
Stage: Product Details
Providing interactive buttons
Once the product is selected, the user can review all the specifications, sizing, and material details on the product page. Users are provided with interactive item buttons to select other items, that go along with the product in just one click. This will save users the trouble of searching for additional items for the current product on other pages.
Stage: Checkout
Visually defined stages
The checkout page is provided with clear breadcrumbs in the navigation bar. Bread crumbs provide visual clues for the user to wrap up check out the process quickly, without missing any important details.
My take away
My major takeaway from the usability testing of this project was the amount of cognitive load basic problems like visual clutter, redundant links, unnecessary scrolling, page load and waiting times can cause. These factors ruin the end-to-end customer experience for the user and increase the bounce rate for any website.
80% Users
8 out of 10 users like the overall layout changes of the redesigned website.
What I learned?
Created technical specifications for website content. Created usability testing plans and collaborated with users for direct inputs. Inputs gathered from users were used to validate and refine design solutions.
Created a comprehensive competitive testing plan for IKEA and Wayfair
Gathered input and feedback from target users to validate and refine design solutions. Advocated design changes through user input throughout the case study’s design and development process.