House2Home

House2Home case study header with main high fidelity screens

The Challenge

House2Home is an e-commerce startup that helps people decorate their new homes and apartments. Users experience blocks when trying to decorate their spaces on a budget, and often give up when shopping for decor items. The challenge was to come up with a way to help users choose multiple items that fit their style and budget, while reducing the bounce rate and increasing sales.

The Solution

I created an augmented reality app prototype called “virtual designer” that integrates into the product page, where the user can view products in their home, add suggested products, create a virtual design with the items, and add all to cart.

Responsibilites

My Roles
Competitive Analysis
Solution ideation
Sketching
Wireframes
High Fidelity Mockups
Prototyping
Usability Testing

Salvador Perez Figueroa (Senior Designer, LVL) & Andrea Cevinini (Senior Designer, Everlane)
Design feedback and critique

Tools

Figma
Adobe Creative Suite

Duration

July 26 - 30th 2021

Constraints

Understand/Map

User Persona

Joe from Bitesize UX provided a persona-based off of 10 user interviews and highlighted the main pain points and user goals through “Ally”, a 23-year-old college graduate in Chicago, IL.

User Goals
  • Give a ‘facelift’ to her apartment without shopping for a lot of individual items
  • Find decorative items in her budget that will give her apartment the look and feel that she wants
Pain Points
  • She knows the look she wants but struggles to achieve it while staying within her budget and not buying too many different items
  • She doesn’t know how to find and arrange the items that fit the look she’s going for

Solution Map

Based on the information provided, I created a possible solution map that in theory would help solve Ally’s pain points and help her achieve her goals.

In this map, the user would:
  • Find a product that she loves
  • Click on the “virtual designer” button on the product page
  • See suggested items
  • Virtually place the original product and suggested items in her room
  • Add all to cart and check out
sketched map of the user flow
Solution Map

Solution Sketches

Lightning Demos

With the initial solution map in mind, I performed lightning demos -- searching other apps and websites to look for possible UX patterns and solutions.

Reviewing features on West Elm and Amazon

Crazy 8's Sketches

With newfound ideas from the lightning demos, I divided a paper into 8 sections and sketched 8 possible solution screens within 8 minutes.

ideation sketches for potential solutions
Crazy 8’s Sketches

I decided that the most important screen in this function was the primary action of viewing items in your room using Augmented Reality.

With AR, there is an opportunity to show examples of how people have styled their spaces, but if someone is using their own space and has the option to design it themselves, they feel empowered by the help of suggested products to go with one that they have selected.

By using the app, they also feel empowered by creating their own design while being in control. They can also see the final design in their room, enticing them to buy the items.

Main Solution Sketch

I sketched 3 screens to visualize what using the app might be like and the necessary features:

Chosen solution sketch with product page, app page, and checkout
Crazy 8’s Sketches

I chose the augmented reality solution because the “View in my room” feature is now widely used in sites like Wayfair and Amazon. With familiarity as an advantage, I believe that re-thinking the use of this technology could be a highly useful tool in selling more than 1 product at a time to customers.

Storyboarding

The User Flow

I sketched several screens to “storyboard” to get an idea of a user flow for the prototype. I wanted to go more into detail with the specific functions of the app and the flow of how a user might interact with it.

A few features that I added after the initial solution sketch were:

  1. Touch to move
  2. Tap to place
  3. Tap to place
  4. Suggested products


solution sketch with storyboarding to simulate the user flow
Storyboarding Sketches

Prototyping

Wireframes

In the prototype, I wanted to get as close to an AR experience as possible. While it was difficult to achieve, I think that it made enough sense in the testing phase to use an iPhone photo of a wall in my room.

I also wanted to incorporate camera accessibility and 3D touch, but it wasn’t possible due to limited prototyping in Figma.

The user flow is as follows:

  • Tap on ‘virtual designer’
  • Place item
  • Adjust item to position in room
  • Add additional item
  • Add all to cart
  • Checkout
Screens for user flow

Testing

User Testing

I found 3 participants from my social media network to test the app and validate whether or not my solution prototype was effective.

Thankfully the participants seemed to understand the concept regardless.

screenshot of moderated usability testing
Moderated usability testing

Testing Takeaways

Based on overwhelming feedback from participants in the first round of usability testing, I dedicated a page to add to calendar after the checkout process.

Once the changes were made, I tested the designs with 5 more participants. Much to my surprise, each participant enthusiastically added the event to their calendar.

Here are some key takeaways:

  • Many claimed that they might forget about the event without adding it to their calendar because they didn’t want notifications from the app.
  • The ‘cart’ icon is important and should be visible throughout using the product, even with ‘go-to checkout’ as an option.
  • ‘Go to checkout’ may not be as good of a final step as ‘go-to cart’. The users seemed to want to review their order and see the prices and products before committing to checkout. This aligns with the user’s pain point of wanting to stay within budget.

Outcomes & Reflections

Based on the usability testing, I believe that the prototype helped to accomplish the users’ goals. The suggested items section helped users design their interior space while showing prices and giving access to the cart to help them stay within budget.

After observing multiple users click on the cart icon, designing a screen for the cart would have been helpful in hindsight.

It’s difficult to speculate whether or not the bounce rate would be reduced or sales increased, but since the general feedback from testing was positive, I believe that pairing multiple items in a design and having the option to ‘add all to cart’ would result in more multiple item sales.

Reflections

Through completing this short design sprint, I see the value in rapidly testing a product idea to save time and money. Although this was a fun week, I see the advantage in working with a full team. If it weren’t for the feedback from Sal and Andrea, I would have been stuck at certain points - especially in the prototyping phase when small interaction details matter.

Next Steps

I feel that the prototype was effective but could be iterated on. For instance, instead of toggling through suggested items, a menu of items could pop up from below. In this case, I think that allowing the user to choose multiple products at a time would result in a better experience and higher sales. Adding extra features such as ‘save design’, ‘save room’, and ‘speak with a designer’ could help to create an even better user experience and increase sales.

Also, I wished that I could have made a prototype that utilized the camera, but Figma prototyping isn’t equipped with AR technology.

Back to top