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.