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.
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:
HMW discover a user's taste so we can show items they would like?
HMW suggest items that look good together?
HMW help users stay within a budget?
HMW show users how items will look in their home?
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.