Project Overview

Timeline

UX/UI Designer

10 Weeks

Team

Group of 4

Role

Tools

Figma, Figjam,
Photoshop, Canva and
google Form

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

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

Business Goals

• 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

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

To gain a deeper understanding of user preferences, we conducted a brief survey and gathered insights from 50 respondents. Here are the key findings:

Presentation of Sofa Options:

Complementary Accessories Display:

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.

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

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

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 influences my purchasing decisions."

Competitive Analysis

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.

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.

Sitemap

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.

Sketch

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

mid-fidelity

Mood Board

To design a high-fidelity interface, we begin by crafting a mood board that captures the primary objectives and desired emotions as defined by stakeholders. This process helps us set the visual direction and overall aesthetic for 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

Prototype

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.

Version 1

Version 2

Homepage

Version 2

Final Version

Version 1

Version 2

Category Page

Version 2

Final Version

Version 1

Version 2

Product Page

Version 2

Final Version