Ecommerce Website
User interface design for an online furniture store
Overview
Project Brief
Tequila Kola is a furniture and upholstery company that sells high-end furniture, fabric and accessories for the home. They are looking to differentiate themselves by launching an updated ecommerce service in place of their outdated website, with one that is sophisticated, user-friendly and in line with their brand. The aim of the brief is to design a part of an e-commerce website that highlights the product search and product detail pages and places emphasis on their upholstery service.
The Problem
With Tequila Kola positioned amongst its competitors in the same building, they’re losing market share to other competitors who have a better online presence. Tequila Kola is a showroom, and as such, their customers come to look at the products and then prefer to browse online before making purchases.
Goals
To design an intuitive interface that makes for easy navigation and caters to customer needs.
To create a website that gives accessibility to a variety of products, upholstery and accessories.
To design an on-boarding experience that entices customers to sign up for newsletters and latest offers.
To make it easy for visitors to gather information about products before purchasing
The Process
DISCOVER
Researching the problem space and gathering evidence
Introduction
In order to come up with achievable solutions for the project, I created a series of "How Might We" questions to start off the phase of discovery. By using this method, I was able to narrow down the problem statement and create clear guidelines that would become the driving force behind design solutions.
Problem Statement
An adult who lives in the city, needs to re-furnish her home, but prefers shopping online, because she likes to compare products for the most affordable option before purchasing. She values her time, but finds the process of online shopping frustrating, and inefficient.
How Might We?
How might we help customers’ find specific styles?
How might we tailor our online store to meet the needs of our customers’ who rely on in-store customer service and shop assistants?
How might we display our products online to appeal to style conscious customers’ who need an interactive shopping experience?
How might we create a customer journey that allows for a more individualised experience?
How might we design the user interface so that navigation is as clear and concise as possible?
How might we highlight our products in style guides that include our furniture and accessories, by being on par with an in-store experience?
How can we understand our customers’ unique style?
How can we help our customers’ pick pieces they love if they aren’t sure what they’re looking for?
Customer Centric Long-Term Goals
In 2 years time, customers’ will receive personalized content tailored to the individual’s style, providing valuable and relevant experiences.
In 2 years time, customers’ will be able to customize 60+ products to their liking.
In 2 years time customers’ will be able to access the online store from every type of device, to accommodate individual needs.
The Concept
To navigate through the website using a style guide. Customers’ are able to shop room by room by selecting a specific style, decade or genre they’re interested in.
The site will recommend similar products to the style they have chosen, while they continue to shop.
To understand the needs of the customer, I will design an on-boarding experience that engages the customer in a few questions about his/her preferred style and shopping behavior.
As Tequila Kola would also like to highlight their upholstery section, a variety of products will be made available for customization.
Competitive Analysis
The Analysis
Tequila Kola competes with companies such as Indigo Living, Inside and Staunton & Henry. All three companies have an online store where they sell upmarket furniture. Having been on all three websites, I find that they are cluttered and lack obvious direction, making it difficult for customers’ to channel their behavior and reach their goals, due to the variety of options available. Indigo Living makes use of too many design elements, with little white space, making it difficult for the eye to focus on a specific task. While these websites are great for gathering inspiration and creating a “look book”, fulfilling tasks efficiently is not a strength.
How is Tequila Kola Different?
From the minute you enter the website, the concept and direction becomes obvious. Tequila Kola values their customers’ and aims to understand what drives them, by providing a valuable, tailored shopping experience to fit the needs of every individual. The company recognizes that in so doing, they’ll save customers’ time and money, through seamless navigation and intuitive experiences that are in line with their goals. As a customer enters the website, they’re encouraged to take a questionnaire aimed at understanding their buying behavior - whether they’re influenced by style, price or time constraints and what they prefer to avoid.
Moodboard
Reasons behind my inspiration
For my moodboard I used clean, minimalistic design as inspiration to highlight the products being sold. I wanted the design to be understated, so as to place more emphasis on the images.
IDEATE
Generating ideas to solve a problem statement
Wireframes
Below are a few of the wireframes I experimented with before settling on a final layout. I chose to use as much white space as possible and referred back to the grid to keep the pages congruent throughout. Creating wireframes helps finalize the structure of your design and acknowledges what works and what doesn't through trial and error.
Personas
I chose Rachel as a persona because she’s relatable. She’s an expat living in Hong Kong and falls into the description of a typical expat. She earns a decent salary, however, she’s a working mom with limited time to spend browsing the web for furniture and requires some guidance. She’s task orientated and price conscious, but isn’t brand sensitive, which makes her a great customer. As Rachel spends the majority of her time using a desktop device and likes to compare products on a variety of websites, it makes sense to design a desktop site.
Customer Journey Map
I decided to design the website specifically for desktop because this would allow for better access to products, as well as easy, uninterrupted navigation. Shopping for furniture is not a task one does on the go, it takes time and focus, as such, there is no need to create a responsive, mobile site. Customers’ who shop for furniture, predominantly do so on desktop computers at home or somewhere stationary. This allows the customer to compare products easily and visit multiple sites at once before purchasing. If I designed a mobile first website, users would not be able to fulfill certain tasks with ease, and access to content would be limiting and time consuming, due to the screen size.
DESIGN
Designing hi-fidelity prototypes and solutions to the problem
Style Guide
This is the style guide for the Tequila Kola website. It shows a variety of design elements that include colours, icons, buttons and typography, that when put together, create a holistic look and feel.
Why I chose these colours
While conducting the competitive analysis, I noticed the majority of high-end furniture websites use pastel hues as their primary color scheme, which indicates that users gravitate to a subtle colour palette.
I chose a muted color palette that is easy on the eye, to allow the furniture and upholstery to speak for themselves. Muted colours are essential in creating a sophisticated design, along with the use of white space. I chose a deep emerald green as the primary colour, to highlight the navigation bar and category page headings. This colour complements the muted canvas and highlights design elements that need to stand out. I chose pastel shades of pink, stone and cream to use as blocks of colour for the footers, dropdown menus and buttons. Using these soft shades brings attention to the buttons and compliments the imagery I’ve chosen.
Onboarding
In the design phase, I will re-introduce the “How Might We?” questions to show how my research translates into my design solutions.
When users enter the website, they are welcomed with a personalized onboarding experience that takes them through a series of questions to understand their buying behaviour and style preferences. On the final slide, the customer is prompted to sign up for an in-depth questionnaire, before returning to the home page.
How might we create a customer journey that allows for a more individualised experience?
The first slide introduces a style questionnaire that will follow in the next few slides. The purpose of this quiz is to understand the needs of the user. By only including essential information and bold headings, the user is more willing to participate. If the customer prefers to skip past the pop up screens and head straight to the home page instead, they can do so at the click of a button.
How can we understand our customers' unique style?
Once the user has been through the four slides of taster questions, they're encouraged to sign up to a full, in-depth questionnaire, which will cover questions relative to one’s individual style, price point and shopping behaviour. On completion, the user will receive a tailored shopping experience based on the results of the questionnaire, displaying styles and products in their price range, as well as other content or recommended pieces.
The onboarding experience will appear on the landing page, as you enter the website, in reference to the image above.
The Homepage
The navigation bar at the top directs the user to different category pages, allowing the user to explore different options regardless of the page or path they are on. This makes navigation clear and concise. I chose to use a textile image for the background of the landing page to entice users to explore Tequila Kola's latest textile collection, as the company wants to highlight their textile service. Should the user have any queries, they can refer to the virtual shop assistant in the bottom right hand corner, at the click of a button. The function of this shop assistant is to replicate the experience the user would otherwise have in store.
As you scroll down, the concept of shopping by style becomes prominent throughout the home page and is introduced via four touch points. The first three being “Home Styling” , “Shop through the ages” and “Bold and Eclectic 60s Inspired”. The reason I chose interior styles as a way to navigate through the website, is because the goals of my personas are to shop for a cohesive style throughout the home, therefore shopping by style is a convincing way to grab the attention of the user. “Home Styling” is a service that entails a compilation of mood boards, personal shopping, staging, renovation and digital lookbooks.
The fourth touch point falls under “interior styles”. Here I’ve given a selection of popular styles for the user to choose from. Upon selection, the user is redirected to a style category page, only showing items relative to the particular style. This gives the user the opportunity to explore different styles, exposing them to variety they may not have encountered before.
Rachel, the persona in my case study, is price sensitive. This would have reflected in the results of her style questionnaire. Therefore, having a clearance section on the homepage is an example of how Tequila Kola will feature tailored content according to the user’s quiz results. As a user, Rachel can explore a variety of pieces at reduced prices.
Challenges
Deciding on what interior styles to include in the website was tricky, but referring back to the needs of my personas helped me settle on the appropriate genres. The overall content displayed on the homepage is dependant on the results of a user’s questionnaire, therefore I had to include a variety of content that met the needs of all personas as well as the company’s goals.
Modern Styling
The purpose of this page is to showcase a particular style or genre that the user can shop from. I used a grid structure to segment the different categories of furniture by room and accessories, to make for easy navigation. The goal is to meet the needs of the user by grouping furniture together by room. As a result, users that prefer shopping by style or room, are able to access what they need with convenience and in a timely manner. For my persona, Rachel, being a working mom means that she has less time on her hands to spend browsing through products and comparing websites. She is also style specific, with particular interest in Scandinavian design. Designing a page dedicated to one interior style, gives users confidence and guidance to meet their goals.
As the user enters a specific styling page, they will encounter a pop-up screen incentivising them to input their details and get a discount on their first purchase. The goal here is to encourage the user to purchase pieces of furniture and at the same time, gain their details to recommend pieces they may be interested in, in the future.
Challenges
For the style page, I found it difficult to decide on what categories to include and discard. I had to refer back to my competitive analysis to decide on what would best fit the needs of the Tequila Kola user.
Living Room
How can we help our customers’ pick pieces they love if they aren’t sure what they’re looking for?
The living room category page can be accessed from the top navigation bar, which is available on every page no matter the path the user has taken. Shopping by style continues to be a concurrent theme on every page of the website. The goal on this page is to assist the user in purchasing pieces they love and to guide them in creating a cohesive look for every room.
For those users who need guidance in styling, Tequila Kola creates “a look” that users can shop from and find similar pieces to fulfil that interior style. Should the user want a few furniture pieces from a particular genre, the drop down menu will provide the available categories to shop from. Users that like to browse through a variety of products under a a category, can do so as they scroll down the page.
Virtual Styling
How might we display our products online to appeal to style conscious customers’ who need an interactive shopping experience?
The idea with the virtual styling page is to try and re-create the in-store shopping experience online, by designing an interactive, virtual experience. Once a user selects a product on a category page, they’ll be transferred to the product detail page. The user is then shown an enlarged image of their chosen product, in situ, along with complimenting pieces that bring the whole look together. The aim is to make the shopping experience as seamless as possible, and assist users in creating a cohesive interior style when they’re unsure on what pieces should be purchased together to complete the look. The design solution was to create a radial circle that radiates by means of waves, as you hover over an item of furniture in the image. As you hover, a circumference of options will appear, for the user to select and receive further details. The product details will slide in on a banner from the left as you can see in the image above.
How might we highlight our products in style guides that include our furniture and accessories, by being on par with an in-store experience?
While users who shop online cannot experience in-store benefits, the goal is to emulate that experience as much as possible. Tequila Kola does this by creating interior styles and looks virtually, by grouping pieces of furniture together to create a cohesive style. What makes this even more desirable, are the customization options available to the user. Once the user selects a product in the virtual screen, they are given customizing options in the banner that slides onto the screen. Users are able to customize according to textiles, colours and finishings, making for a more personalized experience and meeting the needs of every individual. For Tequila Kola’s persona, Rachel, the virtual styling experience is a key factor in her shopping journey, as she relies on style guides to assist her with decision making.
In addition to the virtual styling screen, Tequila Kola recommends more complimenting pieces that the user may like, with reference to the pieces they’ve added to their bag and the pieces they have added to their wish list. Thus, simulating an efficient online shopping experience.
Product Page
Here is an example of a simpler product detail page, from the living room category. Users are able to customize the item by selecting their desired colour and finishings. This gives the user an opportunity to personalize furniture pieces to their liking.
Textiles
The textiles category appears on the top navigation bar, as well as on the hero slider of the landing page. Tequila Kola would like to emphasize their upholstery service, which can be seen through the product detail pages, under customizing options. Should the user wish to purchase fabric to re-upholster an old piece of furniture, this is a service Tequila Kola offers too. By displaying the textiles in a large grid format, the user is able to get a clearer perspective of the pattern. As the user hovers over one of the blocks, the title of the fabric is shown. Upon selection, the user is transferred to a product detail page for the selected textile.
Create Account
This is an additional pop-up window I designed to entice users to create an account and receive tailored marketing material in the future. The idea is to use this screen if the user does not initially sign up to the style questionnaire in the onboarding experience. Once the user has added a few items to their bag and proceeds to checkout, this pop up will appear. Once the user has completed the input fields in creating an account, they’ll proceed to checkout seamlessly.
Prototype Video
The video takes you through the hi-fidelity prototype of the website to show how the various pages and elements interact.
