House2Home

A DESIGN SPRINT CASE STUDY

of an e-commerce making home decor effortless for everyone.

Service

UI/UX Design Sprint

Client

House2Home

Year

2021

Design Sprint

Tools: Sketch, InvisionApp | Duration: 5 Days (approx. 4 hours per day)

April 5th - 9th, 2021

The Brief

Design Constraints

House2Home is a new startup that helps people to decorate their homes and apartments. It is an e-commerce website that sells small accent pieces and decor items, such as small prints, posters, and lights. They see an opportunity to offer a “starter kit” to help customers jump-start personalizing and decorating their new space.

The solution should be designed as a website, starting with designs for larger screens (desktop & laptop).
Focus on helping users that want a "starter kit" of multiple products to decorate a new apartment.

Day One

The Goal

To understand the users in the context of this Sprint
To decide on what questions we want this sprint to answer

After studying the background of the company and the results from their user experience research,
I understand that:
customers are easily overwhelmed by the variety of products to choose from
would abandon their shopping cart because they do not know how the product will look in their homes
would abandon their order beacuse the list of items they pick has exceeded their budgets
the customers often know what “look” they like, but do not know what items to get
they are not sure how the items will look together when they buy them separately

So, I briefly mapped out a user flow that initially solves the addressed problems.

Question:

How might we help customers find the perfect decorative items for their new homes?

Solution:

Day Two

The Goal

Find inspiration
Start sketching concepts, and
Decide on what concept to move forward with

I began the day by conducting a solo version of the lightning demo, to look at the solutions some of the competitors, such as Joss & Main, and Ikea are using.

Get Inspired

Joss & Main Home Furnishing Website

Users will get item suggestions from their photos gallery or upload their photos of the styles that they are looking for, which

users will be able to get a visual sense of what the product looks like in a certain space
is easier for users to search or shop for similar products they saw elsewhere

Get Inspired

IKEA

Users are able to search for items with image and budget, and create their own design, users are able to:

upload images to search for the items that they are looking for, or
look for items by price, so users know they are shopping within their budget, and
use a planner tool to design their own combinations

Get Inspired

Microsoft vertical browser tabs

Other than studying what other competitors do, I also looked at solutions that may offer a better user experience browsing the website. For instance, Microsoft’s vertical browser tabs give users better access to a long list of items, which has the benefit of

allowing users to access different tabs faster
is easier to read, and
working great on larger screens

Sketch

After getting some inspiration here and there, I referred back to the map I made on Day 1 and as the research showed, the “see items together” screen is the most critical for the users and sketched out the screen using the Crazy 8s method.

Crazy 8

8 variations of the critical screen for House2Home:

To let users select and view the products in their space

Solution Sketch

To prepare for the next day, I selected the last screen to further design and created a solution sketch to show how a user would interact with it.

Rationale:

This layout has a higher flexibility to include large amount of information and products, and would be easier to navigate without constantly scrolling the whole screen up and down.

(Left) Screen 1 - Understand the user’s preference, budget, and space
(Middle) Screen 2 - Suggest items and let the user apply them to space
(Right) Screen 3 - Checkout and Place order

Day Three

The Goal

To finalize the concept to move forward with
To refine, and create a storyboard for the concept

Decide

To create a storyboard for the concept, I used posted notes to sketch out the screens. There were some screens that I wasn’t sure about, and using posted notes allows me to easily rearrange the screen order to come up with a flow that makes the most sense for the concept.

Here’s a quick map of the storyboard:

Day Four

Build it!

For this design sprint, I decided to use the tools that I am most familiar with, Sketch and inVision, to build the prototype. With all the wireframes created on day three, I was able to put together a 17 screen design in around 1.5 hours and fine-tuned some elements to get things ready for the prototype testing on day five.

For the prototype testing, my goal was to test if this is a possible solution to reduce cart abandon rate and to learn about end-user behavior while they interact with the “see items together” feature, and if the steps are simple enough for everyone to operate.

Build a prototype and props for testing to answer the Sprint question

The Goal

Day Five

For day five, I contacted five participants who may need to shop for decorative items online for their homes. All sessions were started with a little chit-chat to get to know the participants and they were introduced to the company House2Home. They then start interacting with the prototype to purchase an item from the website.

Key Findings:

An imagery survey would be more helpful, as users might not want to provide social media information
Instructional texts needed to be more eye-catching
The space viewer setup step could use a little more constraint to help the users scale the photos they provided

Clickable Prototype

Interactive prototype created with inVision, the path has been limited to test the new “see the item in your own space” feature. For a larger view, please click HERE to access.

The Goal

Test the prototype with the end-user to understand if we could answer our sprint question

Questions:

How might we help customers find the perfect decorative items for their new homes?

Test it

Conclusion

This new “see the item in your own space” feature of House2Home provides a virtual personal shopping experience to the users. It begins with collecting style preference information with an imagery survey or a Pinterest board and recommends the most relevant style to grab the users’ interests. Meanwhile, allowing the users to see the items in their own space gives them the confidence to make the purchase.

Due to time constraints, I chose to focus on the "starter kit" feature for the website and left some room to further develop other features later.