REINVENTING
FURNITURE
E-COMERCE
- Role
- UX Designer
- UI Designer
- Client
- Warehouse
- Year
- 2018
Introduction
WareHouse is a retail furniture store.
According to research carried out, approximately 40% of your annual revenue comes from your online store.
Furthermore, the percentage of users who have migrated to the mobile version of the site has increased considerably in recent years.
Problem
The client did not invest much time, resources and money in planning the online store.
The website was created a few years ago as a secondary source of sales.
They did not expect that the website could be equal to or even generate more revenue compared to physical stores.
However, based on the data analyzed, the client conducted user research to gain greater insights into their needs.
Data
Research
Based on the data collected, most of the users interviewed complained about the mobile version of the old website, as it was basically the desktop version displayed on a cell phone screen.
In addition to usability problems, many suggested having references from decorated environments for inspiration. Some users, such as contractors and decorators, schedule meetings with clients at the renovation site and would like a website that is easy to find and store products
I was responsible for developing wireframes and screens for the desktop and mobile versions.
Wireframes
Based on this data, I started creating the wireframes. I wanted all the features of the desktop version to be available in the mobile version in a clear and intuitive way.
Styleguide
I chose font sans pro for its simplicity, absence of serifs, variety of styles and because it is a great font for web environments.
The color palette was created to look cheerful and the colors were designed to have high screen contrast. (Useful to highlight specific buttons and to facilitate navigation for people with visual impairments such as protanopia, tritanopia and deuteranopos).
Cards
Desktop Version
Mobile Version
Categorization
Categorizing a furniture store is not a simple task. There are a series of factors that need to be analyzed such as rooms, specific furniture for each environment, function subcategories, styles and variety of colors for the same object.
On the other hand, I believe that the act of researching and looking for home furniture should be fun and intuitive for the user. I categorized the objects so that they could be introduced on each page in the universes of varieties and styles that the furniture has, but always allowing shortcuts for more precise choices.
Home
Designed to show the site's main categories, the page can guide the user by allowing quick navigation or allowing them to discover and break down each category. With the user login it is possible to retrieve payment details and review the list of furniture saved in the shopping cart.
Inspirations
screen
Users can be inspired by environments decorated by professionals and create their own environment with the suggestions shown on the website.
• Good for people who are new to decoration
• Good for professionals to be inspired / show their clients
Products
Page seeks to clarify all doubts regarding the object. Dimensions, available colors, notes from other users and recommendations from previous searches help the user to make the correct choice. "Breadcrumbs" or bread crumbs in Portuguese help with navigation. With it it is possible to return to all previous pages guiding the user.
Checkout
Lack of menu to focus user attention. Only the company logo directs you to the home page in case of withdrawal. I created an overview with a summary of the payment steps to reassure the user about the number of steps to make the purchase in addition to the space for zip code (to calculate the corresponding extra fee) and promo codes. Based on the user's choices, a series of other suggestions appear for automatic addition to the cart. I used a green button to highlight the main action on the screen.
Code
To validate the wireframes, I created a prototype using bootstrap4 and CSS to perform usability tests.
Conclusion
& Learnings
• Usability principles are essential to create virtual environments with a low learning curve.
• Thinking about appropriate contrast as well as inserting inclusive codes (aria-labelledby, alt, ”Semantic Page Structure”) allow a considerable percentage of customers with special needs to be able to navigate the site comfortably, increasing the number of potential customers.
• Don't make the customer think, create automatic navigation flows.
