Market Research, Competitive Analysis
Brand Proposition, Brand Identity
User Research, Information Architecture
Minimising Cognitive Load
Design System, Art Direction
for a speculative business
Increased Conversion Rate progressively by 30%, 10% and 3.3% through three iterations in two weeks
Kayco selects furniture from all over the world and curates them into city-themed collections
High end, city-inspired furnitures.
Customer Help Centre
The online furniture market is worth $200 billion in 2019 where city-based aesthetics is amongst the most searched keywords.
82% of women in the UK shop for household goods and furniture in 2019 (source). Gen X (40-55 y.o) represents 39%, the highest percentage.
Katherine is 50 years old, executive in a medical company, earning £110,000/year. She is both style and quality conscious.
Interviews with 5 women, 35 to 55 years old, living in Paris, London, Melbourne, Shanghai, NYC using Made.com, Habitat and Zara Home as benchmarks reveals the findings as follows:
The common challenges that Katherine might face on furniture e-commerce platforms. This also presents an opportunity for Kayco.
Unfamiliar, Complicated Navigation
Overwhelming, Unnecessary Product Information,
Lengthy, Convoluted Check-out Process with Little Room for Errors
Customer Retention aka How to Keep Them Coming Back
The goal is to keep it familiar to Katherine but also add new features that help her get around easily.
Putting Kayco's city-based collections into:
Hero section's carousels to immediately attract attention and create first impression.
A supplementary section to expand on the collections' items to reinforce this impression.
Aiding users to form an idea of what they want helps reduce cognitive load.
Product categories are card-sorted into ‘by-the-room’ mental model according to users’ homes — in which room they would expect to find the items.
For Katherine, style and comfort often come to mind before the price. The filter reflects these criteria:
A sticky Side Navigation bar offers:
Help navigate through the site quickly and reduce scrolling fatigue.
Shortcuts to the top of the page
Shortcuts to different product categories.
The search function suggests matching results as the user types, reducing the time needed to complete the search and the number of mistakes (typos).
As Katherine is concerned about style, price but also how the item would fit in her home, including only Product dimensions and Colour variations ensure a high Signal-to-Noise ratio.
Essential but meaningful information organised into product chunk helps the decision making process.
Essential information is displayed above the fold to offer a comprehensive view of the product.
Additional elements to support decision making include:
High quality photos (360-view included)
The sticky ‘Add-to-basket’ modal helps retain information as we scroll.
For the app, product details and extra information are displayed as a seperate card, accessible through a simple swipe. This helps declutter the product page.
Bundling the three steps into one removes the frictions as it:
Provides an overview with separated steps, allowing users to switch between steps without the fear of losing data.
Fosters a sense of freedom, letting users know that they can always go back and change details. (User Control & Freedom Heuristic)
Allows estimation, which gives the impression of less process and faster to complete than with the succession of pages. (Spark Effect)
For the app, the checkout process has a tab based breadcrumb navigation that allows navigation through the steps easily.
On the next visit, personalised messages greet and inform users of the latest updates.
The Help Centre page is personalised to provide a human touch especially when assistance is needed.
Witty, friendly contents with a hint of personal touch to keep the users engaged and feeling appreciated.
Clear, concise texts to provide relevant information and prompt the user to the actions.
Two complimenting fonts that appeals to the eyes but also clearly conveying information
Playfair Display for its premium, bespoke, gender neutral with a soft, feminine touch.
Avenir: modern, user-friendly, scannable.
Ample negative space to allow the content to breath.
Curved-corners to soften the look
Blue suggests maturity, trust, calm, classiness, used to facilitate information.
Pink provokes dynamism, friendliness, modernity, to prompt action.
Grey to provide additional information
Transition between pages: fluid and seamless to connote continuation, enticing the users to move forward.
Confirmation interactions: snappy, prompt, solid to build confidence and reassure the users.
Expanding / Switching: a 0.2s delay is added to inform the users the action was deliberate (Steering Law and Movements in a GUI Tunnel)
E-commerce best practices recommend letting the users click through the carousel to:
Shopping is a high-energy consumption process. Conversion rate heavily depends on the mental load of the users. The less energy required to shop, the more we are likely to do it.
As designers, we need to organise and prioritise information that would help people get what they want easily.
Have a good read!
Thanks for reading!