The Overview
For this project I revamped Wayfair’s mobile and desktop site in order to make it easier for users to navigate. A new color palette also breathes a modern flair into the site, but leaves users feeling warm and cozy.
The Problem
As a user of the e-commerce site, I sometimes found the website to be over-cluttered and confusing to navigate. There were too many options, categories, and products on display, as well as too many advertisements or discounts.
The Solution
To make the site user friendly, I arranged the categories in simple grids, and reduced the amount of images the consumer would see when they arrive on the site. I also created an earthy color palette, allowing the user to relax as they browse through the products.My goals for the site was to make the user feel welcome and happy as they shopped.
The Process
UX/UI Design
Homepage
The homepage on the mobile site, was created to be very clean cut, inviting, and easy to follow. As for the aesthetic direction, an earthy tone was chosen, which worked really well with the furniture. There are also multiple carousels to keep the page interactive and colorful.
Search
The hamburger menu on the leftmost image, displays small and playful icons that would bring back pops of blue to the earthy palette.
At the top of the middle image, sits a banner that will vary depending on the search. If the user searched for bookcases for example, the banner would change to bookcases instead. There is also the addition of breadcrumbs and a search bar to make things easier on the customers.
The search results give a variety of products and also include color options. If the item itself is multicolored, the circle would have two colors instead of one.
Product & Checkout
The product and checkout page were organized in a clear and easy way to make the shopping experience pleasant.
Desktop
For the desktop’s homepage, the image from the mobile site was enlarged and the banner was shifted. Categories were also added to the top of the page to make navigation easier. The hamburger menu is smaller and pops in from the side. The search results page is also relatively the same with the banner and products. The filter is organized in a much better way despite the overflow of information. It makes sure that the customer gets to view every filter possible. This is the checkout page for the product as well as the product description page. The image was enlarged to highlight the product. The cart highlights the product through recommendation.
The Design System
Outcome + Reflection + Next Steps
I had a lot of fun with this project, and although I enjoyed every step, I believe my favorite was the design system. I loved working with a new color palette and figuring out the best aesthetic to present to users. As for what I had learned, throughout this process I realized that something I struggled with is learning to determine what information to reduce. I learned that less is more at times, and that filter systems dont need to fit as much information as I had previously thought. If I had the chance to redo this project, I would reduce the amount of information given to the user, and leave room for simplicity.
