House2Home

House2Home is one of the many design sprint challenges created by BitesizeUX. In this week-long exercise, the new startup company wants to make it easier for people to decorate their homes or apartments. I chose this challenge specifically to refine and practice my design solutions towards improving an e-commerce site.

Timeline
5 days
Tools Used
Figma, Miro, InVision, Photoshop, Pen and Paper
Scroll Down

Day One: Understanding & Mapping

Problem

House2Home discovered that many of their customers are new homeowners or new apartment tenants that want to buy multiple items to personalize their new place, but they don’t feel confident doing it on their own.

Solution

My goal is to provide new users the ability to view pre-built styled packages or themes so they can instantly decorate their space with a “starter kit” of various items.

My Role + Process

I took on this project independently as a UX Designer, executing a modified GV design sprint. This included mapping, lightning demos, storyboarding, high fidelity mockups, prototyping, and usability testing over the course of five days.

Based on Google Ventures' Design Sprint model

Design Constraints

My design sprint journey begins with my MacBook, some pens, a rim of paper and some delicious chocolate peanut butter cups. It was a late afternoon and I was getting acquainted with House2Home. I was comprehending their problem, reading synthesized research, understanding user insights and personas, and working with the following design constraints:

  • Needs to be a website, optimized for laptop and desktop screens
  • Products can be only $10-$50
  • Focus on decorative products and accessories only (no furniture, no appliances or other large pieces)

Knowing all this information, I asked myself: What did I ultimately want my sprint to answer? Well, I simply wanted users to find a bundle of living space items effortlessly and efficiently.

Mapping

Establishing this end goal allowed me the ability to create a scenario that I could map out. This map outlined each step a user would need to take to reach that end goal:

Map of new end-to-end experience for House2Home

Day Two: Thunder, Feel The Thunder

The storm was here. Not the regular storm with actual rain, wind and thunder. Those days are actually hard to come by in sunny Southern California. It was rather a unique storm where I was struck with inspiration and ideas.

Lightning Demos

I started off with lightning demos, where I searched for solutions that competitors have produced to solve a similar problem. Three companies really stood out to me:

For Pottery Barn, I really liked they how they laid out their room pages.

I like how their room page is populated with the products you have in the main picture at the top. This helps inform the user that an item in the picture can be bought in the section below:

I also enjoyed Pottery Barn's inspiration pages. Their main inspiration page also breaks down the products into categories, which help filter out what a user may be particularly looking for:

With Restoration Hardware, I loved their room categories.

The way they broke down the rooms into categories is clean and straightforward to navigate:

Additionally, I really appreciated from a consumer standpoint that Restoration Hardware had tagged clickable items.

The clickable items let users immediately know what is for sale. It tells you the price on the spot without wasting too much time:

Last but not least, Wayfair did a fantastic job with listing similar items.

I was also a fan of how they tagged items on their inspiration pages. Even though they weren’t selling the exact item in the photo, it’s nice how they listed all the similar items available.

On top of all that, I took great delight in Wayfair's product description pages. They had ratings available with a section for what customers also viewed. The heart symbol or bookmarking option is also a neat touch:

From this activity, there were a couple of features I wanted to incorporate into my designs for House2Home, including but not limited to:

  • Style pages/categories based on living space (e.g. Mid Century Modern Living Room)
  • Room categories (Living Room, Dining Room, Bedroom, Bath, Office, etc.)
  • Room style with clickable/tagged items
  • Reviews and ratings
  • Similar items for each product

Sketching

The flood of ideas came in when having to come up with 8 different concepts in 8 minutes, otherwise called a Crazy-8s exercise.

Every idea is based on the most important step from my Day One map: Browse through pre-built “starter kit” themes/essentials/packages 

I thought this step of the user journey would be fundamental to achieving the goal of easily finding an assortment of items for their living space(s).

Crazy 8s exercise

Then I chose the most critical screen out of all Crazy 8 sketches to create a solution sketch. The screen I chose was the panel with clickable and tagged items as users would be deciding if this style/theme is the look they want for their living space. For the solution sketch, I detailed what screens came before and after a user makes their style selection.

Solution sketch with most critical screens

Day Three: Storyboarding

Continuing on, it was time to sketch out a storyboard of rough wireframes. The storyboard contains every screen that would allow users to find and purchase an array of items that look great together.

The storyboard starts at the home/splash page of House2Home and displays how the user would find a style for a certain living space, what product description pages would look like, and what the entire checkout process would be.

Day Four: Prototype

It was time to bring my ideas and sketches to life. Prototyping and creating these high fidelity screens is always really exciting because you get to see some parts of the product come together.

The most challenging part of this process was creating an additional feature called “Preview Mode” where a user can upload a picture of their living space and in theory, drag and drop items that can be plopped anywhere on the scene with options to adjust size. With the limitations of InVision, “Preview Mode” could only be mocked by clicking a specific item.

After a day of hardcore design and snacking, here are how some of the final screens turned out:

Home page to get started
Once a user gets started, they are asked what room they want to decorate
After selecting a room/category, user chooses a style that fits their needs
Clickable tagged items in each styled room, with option to purchase entire set
Product description includes ratings, reviews and other items that look great with it

You are invited to play with the clickable prototype, which includes a simulation of the preview function and checkout process, via this button:

Day Five: Test

The final day of the sprint was dedicated to usability testing. I conducted three in-person moderated sessions and two remote moderated sessions. Participants were in their 20-30s, and have at least moved once in their life with some experience shopping online to decorate their homes or apartments.

In summary, the feedback and results were generally positive. Every user was able to pick out a style and purchase a new package of items that would elevate their new home or apartment. Completing most tasks was quick, with the exception of finding the “Preview Tool” which was not clear.

Across the board, I learned that participants commonly thought the product description pages could use more information such as dimensions and a short description of the product. Although each item displayed other items that match with its style, they still wanted other items that were similar so they can see what options are available in terms of look and price.

There were also some specific things that could use some fine tuning:

  • Items in shopping cart are a little difficult to locate on picture reference, solve could be a displayed picture while hovering
  • Preview mode could denote that items are not to scale and are only for inspiration/visual purposes
  • Because there are so many steps/pages for the checkout process, it could use checkpoints along the way so users know where they are