House2Home 

A website selling customizable home decor sets.

At a Glance

Context and Role

This was a solo GV design sprint during which I developed a solution for “House2Home,” a company selling home decor sets. I was provided with a project brief and existing user research.

Timeframe

This design sprint took place the week of May 8-12, 2023.

Tools

Figma, Miro, Google Suite

Deliverables

Competitor Analysis, User Map, Sketches, Storyboard, Wireframes, High-Fidelity Mockups, Prototype, Usability Testing, Usability Testing Report, Second Iteration Prototype

Day 1: Understand/Map

User Pain Points

After reviewing the user research, I learned that people…

  • want to stay on budget without sacrificing quality or style

  • are overwhelmed with trying to make decor decisions while staying on budget, and as a result often end up not buying anything

  • often already know the “look” and “feel” they want in their space

  • want to buy items that match

  • want items that will look good in their space

  • do not want to spend a lot of time decorating

User Map

I started drafting some maps of the end-to-end user experience the user may have on House2Home’s website. My final map, pictured here, is as follows:

  1. The user can take a style quiz for personalized recommendations.

  2. If the user chooses not to take the style quiz, they can browse the decor sets by filtering by style, color, price, and number of items.

  3. The user can swap out items in the set.

  4. The user can upload a photo to see the items in their own space using augmented reality.

  5. When the user reaches the shopping cart, they are presented with recommended add-ons that match their selected decor set. They can also buy multiple of any item in their set.

Solution

My overarching idea was to take out the stress of shopping on a budget while still providing plenty of opportunities for customization. Interior design is very personal to users, so it did not feel right to make one size fits all decor sets.

Further Customization in the Shopping Cart

Once they reach the shopping cart page, users can add recommended items or buy multiple of an item(s) in their set. Users already have a set they are happy with — this additional customization is just a low-pressure option to add some personal flair.

Style Quiz

The user can take a fun, professionally designed style quiz to receive customized decor recommendations. Or, the user can opt out of the style quiz and explore on their own using search filters.

Customizing Decor Sets - Swapping Items

If a user almost loves a set but thinks the aesthetic is a bit off, she can adjust it to her liking by swapping out items. This removes the stress of having to find decor on a set budget, eliminates the paradox of choice, and still allows for customization.

Search Filters

Since users typically already have a decor vision and price point in mind, I included a variety of search filters: 1) style, 2) color, 3) price, and 4) number of items.

Day 2: Brainstorm/Sketch

Design Inspiration

To seek inspiration, I explored the websites of competitors and other e-commerce sites. I was most inspired by Hello Fresh and NestSet.

Like my concept for House2Home, Hello Fresh conveniently preselects items (in their case, meal kits) but allows users to customize. As illustrated in the annotated screenshots, I was inspired by 1) the feature allowing users to remove or get more than one of a meal, 2) the stylized cards drawing attention to the customization options, and 3) the “change meals” button.

NestSet also sells home decor sets. I found their user interface confusing and disliked that there was little opportunity for customization. However, I found inspiration in NestSet’s 1) filters allowing users to search sets by style, color, and room, and 2) product page layout.

Sketching the Critical Interaction

I chose the item swap feature as my critical interaction since it is the most unique aspect of my solution. I could not find a competitor that allowed users to customize curated home decor sets.

I used the “Crazy 8” sketching exercise to brainstorm eight ways to approach the item swap.

Day 3: Storyboarding

Iterating on the Item Swap Screen

I chose my favorite Crazy 8 sketch and made three adjustments:

  1. My original idea was to use a dropdown menu on the decor set page to customize the number of items, which in turn would determine the price. I decided this method was cumbersome so I removed the dropdown menu and added filters for price and number of items to the main filter bar.

  2. I turned the “swap” option into a button.

  3. Lastly, I slightly tweaked the layout to allow for more room to display the included items.

I sketched the storyboard of searching for, selecting, and customizing a decor set. The red annotations indicate the click points.

Storyboarding the Item Swap

Day 4: Prototype

Visual Design

Users are already stressed and overwhelmed when it comes to decorating, so I knew I wanted the website to have a calming, minimalistic aesthetic. To accomplish this, I used a green color palette and chose a dark shade of terracotta for the text rather than black or gray. I also utilized rounded corners, incorporated lots of whitespace, and took care to ensure the UI would not distract the user or overpower the decor sets.

Usability Testing Goals

My goals for testing the prototype were as follows:

  1. Ensure there were no usability issues with the search filters

  2. Ensure users understood how to use the swap feature

  3. Ask users if they liked the swap feature or if they found it overwhelming

  4. Ask users’ opinions on the general UI design of the website

Day 5: Usability Testing

To validate my design, I conducted usability testing with five participants. All of the participants had an interest in interior decorating, were in the 25-35 age range, and were comfortable using the internet and navigating websites, particularly e-commerce sites.

Overall, users found the swap feature to be straightforward and liked the website’s visual design. However, I uncovered a usability issue with the price filter and received useful feedback on the layout.

The checkbox-style price filter did not include lesser price options unless they were also checked. This did not make sense for the target user who wants to save money.

I told participants their budget was $250. Two users tried to check the $150-$200 box as well as the $200-$250 box because they also wanted to see the sets that cost less than their budget.

Solution: I replaced the checkbox style filter with a drop-down price range slider. This way, all sets at price points under the user’s max budget amount would be included in the search results.

The swap feature was not prominent enough.

A user said that the swap feature needed to be larger and more apparent. She believed the current design did not highlight the feature enough considering it was the most unique feature.

Solution: I used color-blocked cards to draw the user’s gaze to the swap feature. I was inspired by Hello Fresh’s interface, as explained earlier.

Second Iteration

I created a second iteration, pictured below, after implementing the changes inspired by the usability testing.

Important note: On the real website, the photo will update to reflect the item swap. I was not able to accomplish this in the prototype since I was using existing photography.

View the Prototype:

Conclusion

While I was initially doubtful about the efficacy of developing a solution and creating a prototype in less than a week, I have learned to trust the process and my own design intuition.

I developed an appreciation for the mental stimulation associated with working under strict time constraints. The fast-paced brainstorming exercises sparked my creativity by encouraging me to explore incomplete thoughts.

Prototype Recording