House2Home

A 5-day sprint for an AI-based website solution: Enable new homeowners to find perfect home decor with ease

Highlights

Working with the prompts from Bitesize UX, I delivered a new website design in this 5-day sprint that leads to:

  1. A new website feature that helps new homeowners find decorative items with confidence.

  2. A efficient way that offers users a place to see how the selected item look together, which can help them make informed decisions.

  3. A convenient assistant for them to control their expense while shopping.

Role

Solo UX designer

Tools

Figma

Timeline

Feb 2023 to March 2022

Day 1: Understand the challenge

What’s given?

House2Home (H2H) is an e-commerce platform selling a range of home decor items and accessories, including prints, posters, photos, lighting, and various small accent pieces & accessories. H2H has completed user interviews and shared the interview videos. After reviewing the videos and analyzing the results, I have identified three pain points that customers are experiencing.

I identified 3 pain points for users from user interview

Lack of confidence in selecting home decor

As a user, I need professional design suggestions to help me select items that are cohesive and visually appealing for my room so that I can feel confident selecting good decor by myself.

No way to visualize how items look together

As a user, I need an efficient way to visualize how it looks with all the selected items in one place so that I can make informed decisions and pick the most satisfactory decor set.

Absence of a tool to help stick to the budget

As a user, I need an effective tool that can help me control my expenses and stick to my budget so that it would free up my time and energy and I don't have to worry about thinking about the price of everything.

Start at the end & define the Perfect- future goal:

Help new homeowners purchase perfect home decor on a budget with ease

Mapping a journey

For Day 1 of the sprint, I created a rough draft map that shows a possible end-to-end user flow with my product.

In this flow, customers will go through these steps: Upload a photo of their home, select a style they like, enter their budget range, select one preferred idea, switch items to compare, add items to the cart, and place an order.

This map reminds me to offer:

  • A way for users to tell the system where they want to decorate by uploading their home photo

  • A channel to communicate with the system what their expected style is by selecting the preferred style

  • A place to limit cost they would stick with by entering the the highest and lowest budget in their mind

A slight iteration

After completing this map, I realized that an easier way for users to enter their preferred style is to upload a photo with the style they want. This would allow the generated outcomes to be closer to what is expected by the users.

Day 2: Sketch solutions

Get inspired by reviewing other great solutions

Analyze the furniture retailer websites

Through analyzing the website of furniture retailers such as Ikea, Dania, Rove Concepts, Articles, and more, I discovered the approach that they utilize aesthetically pleasing images along with related item options to inspire users.

Explore websites for idea displaying

By exploring platforms like Pinterest and Instagram, I learned that incorporating the price of an item directly onto a visually appealing image can enhance the overall user experience.

Learn from e-commerce platform

By examining established e-commerce platforms like Adidas, Nike, Lululemon, Macy’s, Bestbuy, and others, I gained insight into the way that mature e-commerce companies display their products, show product details, and design smooth and clear purchasing flows for customers.


Ideation for the most critical screen

1. Deciding the most critical screen for the users

  • This page addresses all the main pain points of users, such as providing the visual outcomes, making it possible for users to see how items look together in their room, and showing users the prices of these items.

  • It is the most complicated screen with multiple contents including rendering, item cards, price information, and more.

  • It is a creative way for users to interact with the website to pick the products, so there might be more unexpected challenges.

2. Creating 8 design solutions for the screen in 8 minutes

After deciding on the most important screen, I used 8 minutes to create 8 ideas on one A4 paper as shown in the left picture.

Create the storyboard

The user flow for my product is as follows:

Home page > Upload photo of room > Upload style pictures > Generate ideas > Product detail page > Shopping cart > Order.

The most important page in the flow is the fourth page, where the user sees the generated rendering and suggested items. This page allows the user to see how the items would look in their room, and it also makes it easy for them to add the items to the shopping cart.

Day 3: Decide

Deciding the best idea from Crazy 8s

After generating these 8 ideas, I decided to choose the second idea on the up row of the paper. The reasons are:

  • Its information hierarchy is very clear, with the heading in the middle and the ideas listed in a row of pictures. Users can click on one of the pictures to see a larger rendering of the idea below.

  • The layout is also well-designed, allowing users to easily review the rendering and view the list of products at the same time.

  • The recommended items are presented on the right side of the rendering, so users can easily see them without having to scroll. I plan to add a total cost on the top, so users can easily see the price of the items.

Day 4: Prototype

Home page: Introduce the mission & function

The home page of the website introduces the mission of the website, which is to help users 'Bring your dream home to life with our decor - fast, easy, and you-inspired!' The page also explains how the website works in 3 simple steps and highlights three reasons why users will love the website:

  • It helps them to make design decisions easily and quickly,

  • It will generate design ideas based on their own insights

    It will help users decorate their homes within budget

Step 1: Upload a home photo

To get started, we simply need users to upload a photo of their home to the website. We'll use this photo to generate design ideas that are tailored to users’ specific needs.

Step 2: Upload photos of the preferred style

In the second step, users will upload several images with the style they like to the system. This will give the system a better understanding of the user's desired style and help it to generate more accurate design ideas.

Step 3: Ideas generated!

.On the 'Ideas for decorating your room' page, users can click on different ideas in the row of pictures above the large rendering to see how the items would look in their room. They can also see the effect of each item when it is on or not on the rendering, which helps them to make informed decisions about their décor.

A page for displaying product details

Users can click on a product image to view more information about the product.

Day 5: Test

I conducted user testing on my prototype with 5 users and received a lot of valuable feedback that I used to improve my design. The goals of the testing were to identify any usability problems with the prototype and to see if it was meeting the needs of users.

How do potential users like H2H?

Critical

  • The content of one topic should be arranged in just one screen folder to reduce unnecessary movements of the users.

  • The breadcrumb navigation should be existing on every page for easier navigation.

Major

  • A session should be added to provide similar items when users click one item from the list.

  • A feature should be created for providing users with more items to compare and allow them to compare items in the rendering.

Minor

  • A filter should be created for users to range the items by price.

  • Some generated renderings should be added on the home page to let the users see the results directly to know what they will get from this website.

Feedbacks for improving the design

8.6/10

Satisfaction in finding target items

8.4/10

Ability to help users stick to their budget

9.2/10

Recommendation rate

What have I learned?

Set clear goals for each day in the sprint

I learned that setting clear goals for each day can help me to stay focused and productive. By knowing what I needed to accomplish each day, I was able to make sure that I was making progress on the project and was able to complete the entire design within 5 days.

Keep users’ problems in mind

I learned that it is important to keep users' problems in mind when designing solutions and that communicating with users can help you to understand their pain points and find real solutions.

Design an AI-based E-commerce solution

Through this project, I gained valuable insights into designing a user flow for making purchases on an online platform that would make users feel pleasant. I also learned how to design AI-based website screens to improve the user experience. Overall, the project was a valuable learning experience for me.