Project Overview

• Enable users to customize their furniture by fabric, color, size, etc.

• Implement augmented reality (AR) features to verify product size and color

• Encourage users to shop for their furniture online with confidence.

• Individuals who prioritize sustainability and eco-friendly products in their purchases.

• People looking to furnish their homes, particularly those who enjoy customizing their space to reflect their personal style.

• Individuals who are not interested in shopping for furniture online, aiming to understand what keeps them from doing so.

Target Users

Business Goals

10 Weeks

Group of 4

UX/UI Designer

Figma, Figjam,
Photoshop, Canva and
google Form

Design Process

Our team of four followed a Double Diamond approach based on the Design Thinking methodology. The process wasn't linear; we frequently moved between stages as the project evolved.

Discover

To understand the user's pain points and develop effective solutions, we employed a comprehensive research approach that consisted of the following methods:

• Survey

• Interview

• Competitive analysis

Survey

By conducting a survey with 50 participants, we were able to gain valuable insights into user preferences, revealing key findings that helped the design process.

Improved Visualization Features:
Use high-quality images with a zoom-in feature to allow users to see the material details.
Place the 360-degree view option where users can access it easily, enabling them to visualize the furniture from all angles.

Presentation of Sofa Options:
Combine the two most preferred methods: categorize sofas by Furniture Type and Room Type to cater to diverse user preferences.

Complementary Accessories Display:
Show preferable items that match the sofa product, such as coffee tables, side tables, and cushions.

Interview

In our research, we interviewed 13 people to understand their needs and preferences for online furniture shopping.

Key findings include the importance of accurate product categorization and filters (color, price, size) for ease of browsing. Users emphasized the need for dimensions in both inches and centimeters, detailed 3D AR visuals, images, and descriptions.

Customization options (legs, fabric, sizes) should be prominently displayed on the landing page. Reviews, high-quality images and allowing zoom-in on fabric details, are crucial for building user trust and influencing purchasing decisions.

Define

Affinity Diagram

By creating the affinity diagram, we pinpointed the critical factors to consider

Some quotes mentioned by people in interviews:

"Categorizing products by room type and furniture type helps me navigate better."

"I prefer to quickly narrow down my choices using filters for price and color."

"Having precise dimensions, high-quality images, and zoom features is crucial. I want to see the fabric, color, and texture up close."

"Customer ratings and reviews are crucial and influences my purchasing decisions."

We analyzed 5 similar websites, studying their features and workflows. This research enabled us to create a more effective information architecture, incorporating elements inspired by their designs.

Below, the identical colors represent similar features that we examined across these websites.

Competitive Analysis

Persona

The insights we gathered from our research led to the development of the persona. Our main goal was to highlight the patterns and pain points that surfaced, enabling us to better empathize with the users.

Site Map

By doing card sorting, we learned how to organize different sections of our website and made the first version of our site map. However throughout the design process, user testing and the competitive analysis, the final version of the site map was built.

User Flow

Develop

After analyzing our research data and understanding user needs, we developed solutions to address their concerns and incorporated them into our design.

Challenge 1:


Users wanted to visualize product size and color within their own space before making a purchase, enhancing their confidence in the decision-making process.

Solution:


The team highlighted the AR feature on the homepage, enabling users to easily access and use augmented reality to visualize products in their own environment, ensuring a better fit and appearance before purchase.

Challenge 2:


How to effectively showcase the customization feature on the homepage in a way that grabs attention and clearly communicates the capability to users.

Solution:

A dedicated section on the homepage featuring customization is highlighted by a large motion photo. This visual element draws attention and vividly demonstrates the customization capability, making it easily noticeable and engaging for users.

Solution:


The team displayed reviews with real product photos on the homepage, providing quick access to reviews and ratings on the category page, and offering easy access to reviews of the selected product on the product page, boosting the customer’s confidence.

Challenge 5:

Building trust in online purchases by showcasing real customer experiences and ensuring easy access to product reviews and ratings.

Solution:


The team provided clear shipping information site-wide, including specific details on each product page.

Challenge 3:

Users needed easy access to shipping details for all products and specific items.

Challenge 4:

Users required detailed size information and a comprehensive view of products to make informed purchasing decisions.

Solution:


The team provided specific size information, including dimensions, and integrated a 360-degree view feature, allowing users to thoroughly examine the product from all angles and ensure it fits their requirements.

We initially mapped out our ideation using hand-sketched low-fidelity wireframes, aiding communication within the team during the early design stages. Later, we transitioned to creating mid-fidelity wireframes on Figma to visualize page layouts and design direction. These wireframes went through multiple iterations before finalizing the content.

low-fidelity

Sketch

mid-fidelity

Mood Board

To design a high-fidelity interface, we start by making a mood board that reflects the key goals and desired emotions from stakeholders. This helps us set the visual direction and overall look of the interface.

UI Kit

After creating the mood board, we developed a UI kit to maintain efficiency and consistency throughout the design process. We also performed a color contrast test to ensure our chosen colors meet Web Accessibility standards.

Deliver

Here is the last prototype, displaying what we've achieved through our design process.

Iteration and Usability Test

Throughout the project, we went through multiple iterations, driven by the insights we gained from usability tests. These tests were instrumental in shaping our decisions and constantly enhancing our project.