Where Style Meets Budget

House2Home is an e-commerce website that sells home decor items & accessories. The Company's research found that many of their customers have just moved into a new home or apartment and want to buy multiple items to personalize their new place, but they just don’t feel confident doing it on their own. House2Home sees an opportunity to provide their customers with a “starter kit” of items, giving them an easy and confident way to decorate their new place.

JUMP TO PROTOTYPE
Project Type
Solo Design Sprint
Role
UX UI Designer | Researcher
Duration
5 Days - October 2021
Tools
Figma
Photoshop

The Challenge

This modified Google Ventures Design Sprint project was conducted over the course of 5 days. The goal of the sprint was to design and develop a way to showcase a “starter kit” of products on the website that would allow customers an easy, stylish and affordable way to confidently decorate their new apartment. The hypothesis being it would improve CRO by reducing cart abandonment and maximizing the potential of converting website visitors into paying customers.

How Might We...

help users decorate their apartment on a budget using a “starter kit” of multiple products?

The Constraints

  • Focus on helping users that want a “starter kit” of multiple products to decorate a new apartment.
  • House2Home focuses on decorative products and accessories that range from $10-$50.

My Role

I reviewed the project brief provided by House2Home which included user interview notes and recordings, company research insights, and a persona. My role as the sole UX Designer was to analyze the data, map out an appropriate user flow, design an MVP prototype, and then conduct usability testing.

The 5 phases of the Design Sprint

Day 1: UX Research & Journey Mapping

User Data

In order to narrow in on the problem and the user’s pain points and goals, I organized the company's research from 10 customer interviews into an affinity map. I categorized what customers reported as their needs and main motivations when searching for items to decorate their apartment.

"
I don’t have a huge budget for strictly decorative items, so I want the stuff I buy to make the most impact in giving my apartment the look and feel I want.
Sylvia, customer interview participant

Affinity Map

Persona

Key Insights

User Journey

After synthesizing the research, I ended the first day by sketching a map of the end-to-end user experience showing how a user might move through the website when purchasing a starter kit.

Day 2: Sketching

Lightning Demos

Next, I searched the web for products, interfaces, and screens that presented solutions that inspired me and that I might want to improve or experiment with. I also did a competitive analysis by looking at solutions competitors have produced to solve a problem similar to the one I am trying to solve.

NESTSET  (direct competitor)

  • Simple categorization w/filters on one page for narrowing down photo inspiration.
  • Displays photo with tagged items for quick view option.
  • Product Bundle page lists bundled items and details along the side for easy view, but does not list individual prices. Items are only sold in bundles giving limited options.

IKEA  (semi-competitor)

  • Gives two ways to shop: Gallery of rooms by theme | Pinterest style inspiration.
  • Pinterest style displays photos with tagged items for quick view options.
  • Product page lists individual items with pricing and details along the side for easy view, but does not have a bundle or budget option. 

HOUZZ  (virtual interior designer)

  • Good display of organizing categories and filters on one page.
  • Displays photos with tagged items for quick view options.
  • Product page lists several individual items with options and pricing along the bottom for easy view, but does not have a bundle or budget option.

Crazy 8's

Referring back to my user journey map, I decided which step (screen) was the most critical for my users based on primary activity, most important for solving the problem, and the most complex. I believe the product filter page fits this criteria the best. Using the Crazy 8s Design Sprint method, I brainstormed 8 variations of the product filter page utilizing the below key categories derived from the Research Key Insights.

Key Categories

  • Budget
  • Room Type
  • Theme | Style
  • Color

I reviewed my sketches based on a user’s ease of selection and chose #1 as the best critical screen idea to move forward with.

Solution Sketch - 3 Essential Screens

Using #1 as the best critical screen sketch, I made a three screen storyboard. This solution sketch consisted of the critical screen along with the before and after screens to show:

  • How a user interacts with the interface
  • What results from their interactions
  • What the user will do next. 

These essential steps include:

SHOP STARTER KITS (CTA)      
FIND KIT    
ADD TO CART

Day 3: Decide

Storyboard

On Day 3, I created a 7-panel storyboard, similar to a lightweight, sketched wireframe,  that included my initial solution sketch to use as a blueprint to build my prototype on Day 4. For the GV Sprint process, I just needed to sketch out the key screens with the interactions that the user will need to have to complete the task. Using my user journey map scenario as my baseline, I created a common path assisting users in selecting a starter kit based on their desired criteria of space, style and budget. The storyboard includes the scenario of how a user might shop the site by browsing looks using filters, selecting a starter kit, reviewing the items in the kit and confidently making a decision to purchase.

Day 4: Prototyping

Quick Prototyping

The key to a GV Design Sprint prototype is to only build out the bare essentials that I need to test the functionality of my design. Working as fast and lean as I could, I built a “a realistic façade” prototype to test with users. I chose Figma for prototyping because I wanted to use the scrolling and smart animation features to create more realistic interactions. I built 7 main screens in order to test the MVP with users on Day 5, with the most critical page having various filter interactions.

Behind the Design

The idea behind a robust filter menu on one page, as opposed to a quiz style questionnaire, is to save time and frustration when starting on a new search. It can all be done without leaving the results page. In this solution, the user can update the filters easily and still cover the same categories of space, style, budget, color and product indirectly through five key drop downs. In addition, the images of starter kits are updated to coincide with the current filter choices. The styled images provide inspiration for the user, giving them a better idea of how to decorate their space as well as allowing them to find their style quickly. They can scroll through the images to get inspired and also save images they like, to refer back to at a later time. Adding tags to the images allows users to review the individual products at a bigger scale and in more detail. On the Starter Kit product page, the thumbnail images can be scrolled through and can be selected as the main image, allowing users to easily identify and review all products within the kit.  All of this hopefully results in a better and more confident shopping experience.

The Prototype

VIEW IN FIGMA

Key Screens

Day 5: Test

Usability Testing

The main goals for testing the prototype were:

  1. To understand potential customers’ perceptions of my proposed design as well as discover possible failures and successes. 
  2. Validate if the design allows users an easy way to find and purchase a starter kit based on their individual needs being met with the proposed filter features, therefore increasing customer confidence, reducing cart abandonment and maximizing the potential of converting website visitors into paying customers for House2Home.

I conducted 5 moderated usability tests, 1 in person and 4 remote, with participants recruited through friends and colleagues following the “5 Acts” strategy introduced by the GV Sprint. All participants were happy with the overall flow and thought the process was easy. While there were some design problems that proved to distract participants, there were no major failures and all were able to successfully complete the task.

Participant #1 - Amanda
Participant #3 - Lindsey

Key Problems

  1. 2 out of 5 participants struggled to find a way to save the images. It was not clear to them that the heart icon was the way to save the image and find it.
  2. 1 out of 5 participants was confused that there were already images on the page before they filled in the filters.
  3. 1 out of 5 participants was able to click the image to get to the product page, but expressed that it wasn’t obvious.
  4. 2 out of 5 participants wanted the option to buy the pieces separately. One example given was, “what if I wanted to buy a second lamp, or if I didn’t like or need an item and wanted to replace it, or remove it?”
  5. 1 out of 5 participants thought it would be more helpful to list the series of steps to take so customers were aware of the process - a Step 1, 2, 3.
"
Oh, the save option wasn't obvious to me. But I love that idea!
Ashley, usability test participant

Iteration Recommendations

  1. Adding text labels to the navigation menu icons such as “search” , “account” , “wishlist” , and “cart” to communicate the meaning and reduce ambiguity.
  2. Adding the following text to the Filter page: “Step 1 - use filters to narrow your search,  Step 2 - browse starter kits based on your search, Step 3 - view your starter kit of choice and add to cart,” customers are notified of the process before they start and given more clarity why there are already images on the filter page upon arrival.
  3. Adding a clickable arrow or “view starter kit” text to the filter page images would help communicate where to click to view the product page from the image.
  4. Presenting to House2Home the participants’ suggested the option to buy the starter kit pieces separately as a possible business opportunity or added feature, and not as a user experience problem

Final Takeaways

This was super fun! Conducting a modified GV design sprint was valuable in quickly uncovering major problem areas, accelerating possible solutions and validating early ideas in a short amount of time. Though there is value (and enjoyment) in conducting a solo modified design sprint, it’s missing some critical components such as sharing early ideas and making design decisions with feedback from multiple key stakeholders. I look forward to participating in a Design Sprint with a team!

1
Day 1 - Map
2
Day 2 - Sketch
3
Day 3 - Decide
4
Day 4 - Prototyping
5
Day 5 - Test
6
Iteration Recommendations
7
Final Takeaways