House2Home

Home Decor E-Commerce Website
Solo GV Design Sprint
June 2020

Overview

Original Website Home Page

Company Background

House2Home is a home decor e-commerce startup that specializes in small accessories and decorations. Through a modified GV Sprint format, this project focused on developing and testing a "Build a Home Deco Starter Kit" function to help their customers find items easily to decorate their new apartment.

Most House2Home products are $10–$50. House2Home focuses on decorative products and accessories (including prints, posters, photos, lighting, small accent pieces, and accessories), but it doesn't sell furniture, appliances, or other large pieces.

The Challenge

Surveys have revealed that many of the customers have just moved into a new home or apartment. These users want to buy multiple items to personalize their new place, but they don’t feel confident doing it on their own.

In this design sprint, I helped House2Home explore solutions to help their customers to have a great "starter kit" of items to instantly decorate their new place.

Constraints

*This is a hypothetical bootcamp project

The solution is required to be a website, starting with larger screens (desktops and laptops).

House2Home has its existing logo and brand color, though they can be modified.

Focus only on helping the users that want a "starter kit" of multiple products to decorate a new apartment.

My Role

This is a solo project.
Research Synthesis,
Generating Ideas,
Sketching,
Prototyping, and
Testing.

Tools

iPad Procreate
Sketch App
Adobe XD
Miro

Time

June 2020
1 week

Modified GV Design Sprint Process

Day 1: Map

User Research Highlights

House2Home researchers did preliminary user research to find out what their customers are looking for when they are shopping for home decor. My role was to synthesize some of the research.

"I find lots of cool little items that I like, but I never know if they'll all look good together in the same room until I buy them. Usually, I get overwhelmed and end up not buying anything."
"I don't want to decorate my place with a bunch of tiny, cheap items ... but I also don't want to spend all my money on one big thing. How can I get the look I want within my budget?"
"I'll admit - I want my place to look good, but I never enjoy the long searching. I'm not super picky about specific items, so spending time searching for stuff just gets tiring."

User Research Synthesis: Affinity Map

User Research Synthesis: Persona

User Research Synthesis: How Might We (HMW)

HMW make the process of selecting and shopping home decor more time efficient and less overwhelming?

HMW find the users items that fit “the look” they have in mind?

HMW help the users see and/or imagine whether the items they like will eventually look good together in their place?

HMW help users stay within their limited budget?

Day 2: Sketch

Lightning Demo – Competitive Analysis

I looked at solutions competitors have offered to solve problems similar to mine. They inspired me to combine their features to provide users multiple ways to discover their style and bundle the items they want. Here is the summary of each of their features that could be adapted to this project.

Houzz product page with filters

1. Houzz

Houzz is an e-commerce website for home decorations. Users can explore ideas by browsing by room type, department, or style. What I like about its design is the filters, such as price, rating, style, material, shipping location, etc.

Havenly "style quiz" result

Havenly

Havenly matches you with an interior designer and can serve as a Pinterest board.
The quiz format is very helpful to identify the users’ style that they are aiming for based on budget, location, room type, etc.
Then the “Explore” page enables the users to pick a photo of a room they like based on their style preference, and show all the items in that bundle with the price listed. 

Target augmented reality

Target

The unique feature of Target is augmented reality that helps visualize the items in their users' own space either by downloading the app and using a phone camera or uploading your room photo to the website. They also provide 360-degree styled "shoppable rooms" that list all the items.

Crazy 8 Sketches

 I generated possible solutions by sketching variations of the most critical screen.

The primary activity for the user is to select a bundle of items they want to purchase. While sketching the variations of the most critical screen, I asked myself: At which step will the user complete the primary activity? Which screen is most important for solving this challenge? Which screen is the most complex?

Here are the eight ways I thought about for the users to choose what they want to purchase easily:

1. Take a "quiz" about the style, room type, budget, etc., and then match the users with individual items.

2. The user first determines items they would like and preview then them in AR by uploading a photo of their room and placing the items in their space.
Since the product is only a webpage, I cannot make an app for phones where the users can directly view the items in their space through a camera, which would make more sense.

3. Explore items by various filters (budget, style, item category, room category, color, rating, location, etc.).

4. The user chooses one item from each category to build their own bundle (discount from buying individual).

5. Always display on the sidebar the items added to the cart, total cost, and budget.

6. Take the quiz, and match the users with 3 bundles (basic, standard, and premium).
This is less overwhelming than matching with many individual items or kits.

7. Filter and explore 360-degree AR premade shoppable room. The user can click each item in the room to view details and add to their cart.

8. After the user views one item, it will recommend "frequently bought together" bundle and similar item. 

Day 3: Decide

3-Panel Solution Sketch

I first selected one of the Crazy 8s screen sketches of my critical screen. Then I sketched out a "solution sketch", a three-panel board of
(1) the screen that comes before your critical screen,
(2) the critical screen itself, and
(3) the screen that comes after my critical screen.

I decided to choose sketch number 4 as the critical screen. Combing with the quiz format of sketch number 1, matching the user with a bundle can
(1) "make" the process of selecting and shopping home decor more time efficient and less overwhelming,
(2) find the users items that fit “the look” they have in mind, and
(3) help them stay within their budget.

After the quiz, the users can choose to either use the pre-made bundle, or switch out certain items in the bundle. In this way, the users won't get overwhelmed, but at the same time, they have the freedom to customize.

The final step is from sketch number 2, viewing the items in your room. This can help the users see and/or imagine whether the items they like will eventually good together in their place. This step could be optional.

The first 3 panels of the "6-panel" story board

Story Board Skecth

Continuing off of the 3-panel solution sketch, I created a 6-panel storyboard. Each screen included the necessary UI elements that I would need to build the prototype, but I was not building out every possible interaction a user could have with each screen, rather, just the necessary interactions to complete the task. (The image showed the first three panels).

The whole idea of this product is that by using this quiz-like "build my bundle" function, the users can not only have a discount but also save time and effort in finding multiple items that fit their budget and home style. 

Overview

Company Background

*This is a hypothetical bootcamp project

A startup company launched a music app two years ago. It is a freemium model that has a mobile-web experience and a mobile app for both iOS and Android.

The company’s business strategy was to first build a user base by offering a free product and then evolve the feature set so they could monetize on a premium (paid) product.

At this point, the product has been well received and has a healthy user base of free users. They now need to design an experience that will allow users to subscribe and pay a monthly fee.

Home Screen

Very similar to the sketch I made, the home header displays and explains the starter kit with CTA for the users to start the quiz to build their customized bundle.

I added the secondary button "browse items" for users who want to know what items are offered before starting building the kit.

Quiz Step 1: Choose a Room

The first step of the quiz is choosing one or multiple rooms. I made this the first step instead of the next step of "choosing a style" because
(1) this is probably the easiest question to answer, and
(2) in the second step, we could show photos of only the room(s) the user wants to decorate. 

Quiz Step 2: Style

Slightly different from the sketch, this step I put all the same styles together and showed the names of each style. Since our users might already know the name of the style they want, they can easily just "select all" the images of a style. Other users also already have the "look" in mind, and looking at the many photos of each style, they should be able to determine their style fairly easily.

Quiz Step 3: Budget

Users can choose a range for their budget.
They cans slide the slider or type in the range.
The budget is for at least three items, since we're building a bundle.

Quiz Step 4: Result

There is one bundle already selected, so if the user feels too overwhelmed by all the choices, they can use this one.
Or they can look through each category in the tab bar, remove items they don't like, and replace them with the ones they like. When they hover on each item, they can choose to either remove it or view more details.
The total bundle price and discount price are displayed at all times to incentivize the users to purchase, letting them know they're saving a lot by bundling up!

Quiz Step 5: AR Preview (Optional)

The users can choose to visualize their items in their own room before checking out.
This step is optional because I would like to give the users more freedom, and it could take a long time to gather their room photos. They can go back to edit the kit at any time.

Prototype

I made an interactive prototype (including micro-interactions) for the users to test out. Here is a demo video:

Day 5: Test

Usability Testing

I interviewed 5 people about your prototype using the Five-Act Interview technique.

1. Friendly Welcome Intro
2. Learn about the customer: context questions
3. Introduce the prototype
4. Give tasks
5. Ask debrief questions


Tasks
You would like to find several decorations for the living room of your new apartment. You know the style you like the most is Mid Century Modern. Your budget is around $150. 

Usability Testing Debrief

All users were able to complete the task. No critical issue has been found. However, there are many other routes not built or tested.

Problems

The biggest challenge was to have the users start the "build my kit" process from the home screen. They wanted to click on other options first, especially "browse items." Some of their first impression was "build my kit" was more expensive than regular browsing the items. Even though I put the discount info twice on the home screen, the users were skimming and not paying attention.

The fundamental question is how can this new "build my kit" feature be integrated into the existing website.


Potential Solutions

The simplest solution could be just to remove the "browse items" button, but the reason I put there in the first place was to give the users the freedom to look at the products first.

It might not a bad idea for the business to have the users interested in browsing the items first, and then after gaining more of their trust, prompt them again to "build my kit."

So the solution is that on the "browse item" page (which I did not design), add a prominent link to the "build my kit" feature. 

How to Improve/ What I Learned

1. This hypothetical assignment requires the solution to be a website, but more and more people nowadays use their mobile devices to browse. We need to make the website mobile-friendly.

Like mentioned, for the AR, it makes more sense when the users can directly view the items in their space through their phone camera in real-time, instead of uploading a photo to the web.


2. Technical constraints. AR is a very cool feature to have, but it might be difficult to build and probably will have lots of bugs, so is it worth the investment? The users have limited budgets, and developing such a feature will likely drive the costs of the decoration products up.


3. Question for the engineer: how to build an algorithm that makes good recommendations based on the quiz result.


4. The contents of the quiz could be improved.

What if the users want to select multiple rooms, and each room a different style? So for quiz step 1, maybe we should limit the choice of room to one.

What if they want more than 4 items?

Additional quiz questions we could include: color schemes of their rooms, item types


5. How can we compete against other existing products and businesses?

Maybe on the home or about page include a comparison chat.

Other Projects

Chillhop Music App Mockup
Chillhop Music
Branding, UX Research, UX Design, UI Design
Mobile App

I converted the free music service into a paid one, designing all the brandings, visuals, and flow that incentivized the returning and existing users to subscribe.

Wheaton Mobile (1 of 3)
UX Research

Wheaton Mobile is an app for students at Wheaton College, IL. For part one: to find out the user's needs, problems, and goals, I conducted and synthesized user research

Productified
UX Design, UI Design
Mobile and Desktop Website

Productified helps inventors turn their ideas into products and bring the products to the market. I mainly redesigned the information architecture of the site and created the design system.

About

Daini Eades is a UX/UI Designer at LexisNexis

Follow Me

Created with Mobirise - Learn more