SmartDeco

Design of Home Accessories Website

UX UI Designer

SmartDeco is a Home Accessories website that provides the option of uploading photo and with the help of AI assists users in finding their desired products among a wide variety of decorative options that match their home area based on their preferences.

Business Goals

  • Showing decorative items visually in home areas with the option of uploading photos

  • Suggesting the most relevant options based on home area style and user preferences

  • Shorten the process of selecting products and increasing the chance of buying products

Role

UX/UI Designer

Duration

2 months

Tools

Figma, Google sheet, Zoom, Photoshop

Team

3 Member

Business Overview

Target Group

  • people who are interested in home decoration

  • people who would be confused among a variety of decorative items

  • People with no design ideas

Design Process

Discover Phase

Question 1:

Do you prefer to upload a photo of your home area in the first step and check the website's suggestions or explore the website on your own to find your desired items?

Findings:

  • In addition to having the option of uploading a photo on the Home Page, enable this feature across all pages.

Question 2:

Which type of home decoration do you purchase more?

Findings:

  • Arranging the navigation menu in the order of most mentioned items which are: Lightings, Decorative Accessories, Mirrors, and Wall Decor

Question 3:

In which area of your home are you most interested in purchasing decorations?

Findings:

  • Arranging the navigation menu based on the most mentioned areas that are:

Living Room, Bedroom, and Dining Room.

Question 4:

What are the most important factors for you to know before buying home accessories?

Findings:

  • Prioritizing product information in designing product cards and product pages based on important factors like Price, Size, and Color

It helped mostly in designing:

  • Navigation Menu

  • Information Architecture

  • Filters

  • Photo Upload Process

Most participants prefer to search by Decorative Items rather than the Home Areas. So the Navigation Menu was designed based on items, and one specific menu "Shop by Room" was also considered separately.

Interviewees state that the lack of the following information affect negatively on their shopping process:

  • Delivery and Availability of the product

  • Review with real photos

  • Return policy and warranty

Most interviewees believe photos designed version is more useful because they can have an idea about the size of the product in their home area. so the first photo of each product will be shown in the home area. Photos on a white background also will be included in the photo set.

Survey

Interview

Competitive Analysis

Affinity Diagram

As it is shown in Affinity Diagram interview findings confirmed the information found in the survey.

There was some additional information in the interviews as follows:

Define Phase

Persona

Card Sorting

User Flow

Lana

36 Years Old

Lives in Germany

Working in the Digital Art Sector

Love to explore home accessories shops

Key Challenges:

  • She often doubts the items she chooses will match her existing furniture and accessories

  • She often struggles to choose from a variety of products and feels overwhelmed by the options

  • She wants to avoid getting involved in the product return process

Task Flow

This flow is designed for purchasing home accessories via uploading a photo of your home area and receiving designed versions of your home with different accessories based on your preferences.

Site Map

Develop Phase

Sketching, Wireframing

Usability Testing

The "Start Designing" CTA on the home page did not convey the meaning of uploading a photo to start the task. Users were looking for it in Navigation Menu or sometimes scrolling the page.

The simple expression "Upload Home Photo" by adding the camera's icon was clear and understandable for users.

Challenge

Solution

Task: Upload the photo of your home, check different AI suggestions and shop 3-4 items based on your preferences.

After uploading the photo, the color pallet of the area was shown to the user.

Although it was explained above the colors, still was confusing for users. Users thought these were the only colors they could choose for their home accessories and some stated that they did not choose these colors so why it is shown here.

In addition to having a color filter in the next step, it also confused users that they were choosing colors twice.

The color pallet of their home was deleted and only color in filtration was considered to avoid any confusion and shorten the process.

Mood Board

Challenge

Solution

Challenge

Solution

While users were checking the products in one of the AI-suggested photos, they were not able to change or replace the products with proposed alternatives. The option of deleting the product they do not like was provided in the product list beside the photo. but the option of replacing the product did not exist.

Alternative options for replacing products were added to product carts to make it more convenient for users to check other products in photo of the home area.

UI Kit

Challenge

Solution

The process of receiving multiple designed option was too lengthy and needed several clicks

The process became shorter and faster by omitting extra clicks and including all necessary inputs from users on one page

1- Upload photo and receive color pallet

4- Receiving multiple designed photo

3- Apply filters

2- Receiving one designed photo

1- Upload photo and apply filters

2- Receiving multiple designed photo

Deliver Phase

Iteration

Home Page

High Fidelity Prototyping

Photo Upload

AI designed suggestions

Designed Page

Shopping basket

Home Page

Hero Image conveys the concept of designing and shopping furniture, not accessories

Having 2 CTA for starting design was not clear and even confusing

Using GIF in the screen shows the process and makes CTA understandable

Reflections

Next Step

Project Learnings

  • Design a website from complete scratch.

  • Effective communication with team members and lead challenging situations.

  • Understanding users' needs at every stage of the design process. The best way to gain this overview is by keeping track of all research findings and referring to them continually.

  • Keeping the balance of users' needs and stakeholders' strategy while designing.

  • Design a mobile version of the website.