case study:

House2Home

GV Design Sprint

 
 
 
 
 

Introduction

Decorating your first home or apartment is an exciting yet daunting challenge. You want a home that reflects your style, but with so many home decor sites, endless inspirational photos, and no clue how to achieve that “look” on a budget, it can feel overwhelming. As a new startup in the competitive home decor market, I wanted to set House2Home apart by creating an enjoyable experience for first-time home decorators to make their new home beautiful within a manageable budget.

I used a modified GV design sprint framework, which is a 5-step design process condensed into 5 days; one day dedicated to each of the following: understanding, sketching, storyboarding, prototyping, testing. At the end of the sprint, I was able to come up with a solution where users can take a fun quiz to discover their style, create a look from a selection of items, and see how it could all look in their home before purchasing.

A typical design sprint is a group effort, but I worked solo and dedicated a few hours a day to each step, then conducted 5 moderated usability tests with a prototyped solution. I did not think it would be possible to come up with a realistic prototype in such a tight timeline, let alone a solution that users enjoyed and were excited about.

 
 

 
  1. Understand

Summary

House2Home is a new startup that wants to make it easier for people to decorate their new homes and apartments on a budget. Their target audience are people who have moved into their own place for the first time, typically recent college graduates, so they specialize in smaller budget items in the $10-50 range rather than large furniture or expensive decor.

The persona we will be focusing on knows what she likes, loves to save inspirational pictures she finds of rooms that have the “look” she wants but has a hard time figuring out how she can achieve that look with a few choice items since she’s on a budget.
H2H is an ecommerce site so could be viewed across multiple devices but for the purpose of this project, we will be focusing on designing for larger screens like laptops/desktops.

 

Research Highlights (Quotes)

  • It’s hard to stick to a budget

  • I don’t know if items will look good together

  • Will it look good in MY living room? Staged vs real space

  • I know the “look” but not how to achieve it

  • I look at blog posts on decorating but they usually require 10+ items and I have a budget. How can I achieve that look with 3-4 items?

  • I don’t enjoy searching for things but want my apt to look good and I’m not picky

  • Budget constraints - want maximum impact to achieve look and feel

  • Save inspiration pics but usually of fully decorated rooms that have the right “look” and I don’t know which items to get to achieve that

  • I don’t want too many small cheap items or one big expensive piece. Goldilocks, just enough items on a budget

  • I move often, need smaller items that are easy to move

 

Target Persona

The main persona we’ve identified that we will be focusing on is Ally, a 23 -year old recent college graduate who has just moved into a small apartment in Chicago. Ally is eager to decorate her new place to make it her own, and sets aside time to look up decorations but gets overwhelmed and puts it off for another time.

Frustrations:

  • Ally knows what look she likes but doesn’t know what items to buy to achieve that same look in her apartment

  • Saves inspirational photos but cannot afford to buy too many items so wants to recreate the look on a budget

  • Cannot make big changes like renovation or painting so wants to buy a few choice items that will have the most impact

  • Sees items she likes, doesn’t know if they will work well together in the same space

 

User Interview

CHELSEA, 24

  • Moved into new apt 3months ago

  • Small apt in NYC

  • Brought stuff with her but mostly small items, framed photos & prints but apt looked bare

  • Found nice stuff but didn’t order because didn’t know how to get right “look”

  • Inspo from Instagram #tinyapartment, but gets stuck recreating style

    • Apt is dark, not a lot of light. Likes beach theme—wooden signs etc.—but felt she needed a lot of items to create that look and she was on a budget

  • Moving was expensive and she didn’t have budget to hire designer or buy expensive art

    • Willing to spend $250

    • Doesn;t want to spend it all on one item and have nothing left to get other items to go with it

  • Ideal scenario: hire an interior designer

    • Someone who knows her taste and can make it come to life

    • Has an eye for design and can pick stuff she likes but they don’t always look good together once in a setting

    • Specializing in tiny apt

  • Likes finding stuff, but feels that right when you move in it’s overwhelming because everything looks unfinished and boring

 

Map

 
 

 

2. Sketch

Lightning Demos

This example from Guitar Center shows shoppers additional items they can add to their main purchase and buy as a bundle. Complimentary items are shown side by side with prices and the total cost while allowing the user to remove items from the bundle to stay within their budget.

 

Pros

  • Total amount shown before user adds to cart 

  • Unchecking a suggested item automatically updates the amount

  • User can add whole bundle to cart at once

Cons

  • Limited number of suggestions

  • No option to swap out an unwanted item with something else

  • Checkbox to unselect items is in a list below the images so hard to tell which checkbox is for which item without reading full name

 

Gap offers shoppers several styling options when they are viewing details of one item. Prices of additional items appear on hover with the option to view full details

 

PROS

  • Several combinations of items

  • Easy to see how items will look together in “mood board” layout

CONS

  • User still has to view details of and add each item to the cart individually

  • Combined cost is shown only in the cart

 

Express, like Gap, shows users several “looks” they can create with the item they are viewing. Clicking on one of the opens opens a side panel where shoppers can view details of each  recommended item, make size and colour selections and add to cart directly.

 

PROS

  • Several combinations of items

  • Easy to see how items will look together in “moodboard” layout

  • Scroll through recommended items and see full details of each on same screen

  • User can add to cart directly

Cons

  • Combined cost is shown only in the cart

  • Viewing pane is small

 

West Elm provides many room style ideas that combine the current item being viewed with other items. Hovering over the suggested items reveals the price and allows the user to add to cart, view details, or swap the item with similar items. Clicking “Details” opens the product details page in a new tab, easily allowing the user to navigate back to the room style page. Clicking the Add to Cart button on any of the items triggers a popup that shows the user how many items are currently in the cart and total, and closing out of this will take the user back to the room styles to continue.

Pros

  • Several combinations of items

  • Easy to see how items will look together in “mood board” layout

  • User can swap out a suggested item with a similar type of product

Cons

  • Items added to cart individually

  • Combined cost is shown only after item is added to the cart and only way to undo is leave the room style page and go to the cart

 

Priceline offers travellers add-ons during the checkout process of other services they provide. In the example below, I’ve looked up trip packages and I’m given the option to select the flight and modify the hotel or room choice. Options displayed show the net cost (+/- to the total amount) rather than the actual cost of each item. Other services include car rentals and airport pickup. Selecting an option automatically updates the total cost.

Pros

  • Starts with a budget based on package selected and any modification shows up as +/- that original budget

  • Options provided for each add-on

  • Total amount always visible and automatically updated with each selection

  • Single “add to cart” action for all items

Cons

  • Too many options and could feel overwhelming

  • Slower checkout process because there is always the option to modify at each step so could cause indecisiveness in the shopper

 

Coolors is not an ecommerce site but I wanted to explore ways in which a user can modify a selection of items. Coolors generates colour palettes based on an uploaded image. The scale allows the user to cycle through many variations and after one is selected, the user can modify further. Chosen colours can be locked (Royal Blue Dark in the example below) and other colours can be tweaked to be darker or lighter but in the same colour family.

Pros

  • Set a tone or “look” first

  • Several colour palette options provided based on the image uploaded 

  • Starts with 5 colours but user can add or remove

  • Side by side comparison of colours makes it easy to see if they will look good together

  • Colours can be reordered to see how one looks right next to another

Cons

  • The scale in the photo upload step hard to understand. It wasn’t immediately clear what it does (cycles through different palettes)

  • Too many actions when a user hovers over a colour (remove, favourite, copy, move, lock) that could make it hard to get to a final decision

  • Too many options when user wants to select a new shade, can feel overwhelming

 

Crazy 8s

 

Solution Sketch

 
 

 

3. Decide

Storyboard

For the solution storyboard, I focused on answering the How Might We questions I identified on Day 1 after reviewing the research:

  1. HMW discover a user's taste so we can show items they would like?

  2. HMW suggest items that look good together?

  3. HMW help users stay within a budget?

  4. HMW show users how items will look in their home?

  5. HMW make it easy to browse options

The style quiz addresses the first question by helping the user identify their style and “shop the look” after completing the quiz. While browsing, if a shopper clicks on an item to view more details, they would be presented with an option to “create a look on a budget” which lets them enter a budget amount and see what other items they can match with their selected item within the specified budget. This step answers the second and third HMW questions. The room visualizer button in the “create a look on a budget” screen would allow the user to upload a picture of their home and see how the items they have picked would look, which addresses the fourth HMW. To keep the storyboard to no more than 15 steps, I did not show how users might browse alternative options if the suggested items did not appeal to them but I plan to work that into the final prototype.

 
 

 

4. Prototype

I decided to use Figma to prototype because it is what I am most familiar with and knew I could work fast and efficiently on the design and would be able to prototype simultaneously. I leveraged UI kits which I modified as needed and invested quite a bit of time on searching for imagery, style quiz questions and copy inspiration.

I eliminated some steps and combined others in the storyboard. For instance, I chose to combine the “Create a look on a budget” module with the item details page rather than create a separate page. After researching several room visualizer and interior design apps, I realized it would be incredibly difficult to simulate in a prototype, but that I could still test the usefulness of a feature like this without showing all the functionality of a true visualization tool.

My goals for the test are to evaluate if the HMW questions were successfully addressed and users are able to discover their style by taking a quiz, browse items, view matching items for things they like, show interest in the room visualizer feature, and are able to easily checkout after selecting and viewing multiple items.

 

Prototype Video

 

Screenshots

 
 
 

homepage

style quiz

 
 
 

Shop by Style

Item Details

 
 
 

Room Visualizer

Basket & Checkout

 
 
 

 

5. Test

I interviewed 5 users ranging in age from 25-45. Though the older participants did not perfectly match the persona identified from Day 1 research– specifically, they are not decorating their first apartment or home— they have some of the important traits. Namely, they often browse decor websites and inspirational images, redecorate their homes once in a while, are not able to articulate what their decor style or taste is but know what they like when they see it, and are budget-conscious.

Prior to the tests, I created a script and had a list of open ended questions about the overall website, what they thought of each screen, and a short list of prompts to keep them engaged with the content and to find and respond to some of the key screens I wanted to evaluate.

 

Findings

Users really enjoyed the quiz and felt it was very easy and intuitive

  • The prototyped quiz only allowed users to select a single image in each step, and clicking Next is an extra step that can be eliminated. After each selection, users should automatically be taken to the next screen but have the ability to go back if needed

  • Not all users were able to discover the Quiz on the homepage without some prompting

    • The quiz could be more prominent on the homepage, maybe on the top banner rather than below the fold

  • Most users liked that at the end of the quiz, there was an option to browse items in that style

    • 2 users pointed out that they typically have an idea of an item they want to buy, e.g. something for their bathroom, living room, kitchen, etc. so they would usually search the categories for that specific room

    • Filter by Style could be added to the filtering options in Category pages too, so that if users are looking for bathroom decor, they can filter by the style they discovered in the quiz. There is an option to filter by Category in the Shop by Style page but the suggestion above would be useful for users who are typically browse by Category

  • The “Create a Look on a Budget” module on the Item Details page was not immediately noticeable to 2 users

    • Depending on screen size, that portion appears below the fold, so perhaps an anchor link in the item description section could make it discoverable without scrolling

  • The budget slider in the “Create a Look on a Budget” module was not prominent enough, not all users noticed it immediately

  • All users clicked on the Room Visualizer and said this is a feature they would love to see in more decor websites

    • Due to the prototype limitations, the visualizer was not fully interactive but all users were able to upload a photo easily

    • The “Drag and Drop Items” prompt after uploading a room photo was not easily noticeable. Prompt could be animated to draw the users attention to the item thumbnails below

    • 2 users were uncertain if the “x” icon on the thumbnails would remove the item from the photo or from the row of thumbnails, and thus, from the “Add to basket” button

    • Option to remove or reposition an item should probably be done from the photo rather than from the thumbnails below

  • Checkout flow was familiar to all the users and did not require much evaluation

 
 
 
 

 

Reflections & Learnings

I spent more time on the prototype than I would have liked but a lot of it was gathering the right imagery and finding appropriate copy. It did pay off because users did read it and reacted positively to the fun, playful tone of the quiz. But in future sprints, I would go about collecting assets and copy in a more structured way rather than regularly interrupting my design flow to search for a different image or reworking copy.

I chose to use Figma as my prototyping tool because it was what I felt I would be able to work with the fastest, but I realize now that it may have also slowed me down because out of habit, I was organizing and naming layers as I would in a regular project rather than focusing on quickly creating a facade.

There are areas to improve in my solution, both in how the user can see groups of items within a budget, and in the Room Visualizer feature which was difficult to prototype in a realistic way.