House2Home
A Google Venture Design Sprint project to redesign an eCommerce app.
Timeline: Nov 2019
Tools: Adobe Photoshop, Google Doc, Figma, paper and pen
Backgound
This design sprint is a modified GV design sprint. The research and background information was provided by Springboard and Bitesize UX.
House2Home is an e-commerce startup that sells decorative items and accessories. Through customer surveys, they have found many of the customers are people who just moved into a new home or an apartment.
Problem
Many of the House2Home customers want to purchase multiple items to personalize their new place, but often they don't feel confident in their choices. They are unsure if items they've selected will look great in their place, or if those items will go well together.
My role
I joined the team as a solo UX designer to run a design sprint and to quickly test out a possible solution.
Solution
I helped the team to develop and provide a "starter kit" with items customers can use to decorate their place instantly. Plus, they can preview how products look in their own place before purchasing.
Process
Clickable prototype
Now, I would like to show my design process steps
Step 1. Understand
Design constraints
-
The design should be a website or an app
-
Focus on helping users that want a “starter kit” of multiple products to decorate their apartment as an “added feature”
-
Most of the products are from $10-50 dollars
-
The company does not sell furniture, appliances, or other large pieces
Target users
Young adults who have just recently moved into their home or apartment.
Here are some highlights of the quotes from their customers.
"I read a bunch of blog posts on how to decorate a small apartment. They always include 10+ items to buy - which ones should I get if I can only afford three or four of them?"
- Lindsey
"So many items look great in the staged photos - but will they look good in MY living room? You don't really know until you order them and see how they look in the space."
- Anna
"I found lots of cool little items that I like, but I never know if they'll all look good together in the same room until I buy them. Usually, I get overwhelmed and end up not buying anything ."
- Dan
Personas
I drafted a possible end-to-end experience a user might have with the product by making a user map
How Might We (HMW statement)?
-
... let users purchase the decorative pieces of their preferred style that go together within their budget.
-
... allow users to easily see how the pieces they are interested in look in their home before purchasing.
-
... enable users to find similar items to get when they originally find something they like but not within the budget.
Step 2. Sketch
Lightning Demos
(See details)
Before I start to ideate possible solutions, I searched for existing solutions in the market and completed lightning demos on three competitors (IKEA place, Houzz, Amazon) to see how they approach a similar problem.
Ikea
Place
After having a greater understanding of the project, I tried to think about a few different ways to enable users to access what they may like as a package. I also came up with some ideas to help them make sure the items they like can go well with other pieces before purchasing.
I selected one of the Crazy 8s screens and drew a solution sketch based on it. My plan is to have the product provide users with packages based on their preference in terms of the style and the price range. After that, users can preview the suggested packages of products in AR mode before they make their purchase.
Step 3. Decide (Storyboard)
I chose one of the solutions and created a storyboard that includes my solution sketch.
A user can explore products and choose a product she likes. She can check product info and preview how it looks in her environment in the AR mode. After that, the app provides some suggestions based on the products she picked in the beginning as a "starter kit package." She will be able to use the filter to refine the recommended products and preview a few pieces in her budgets all together in her environment before she makes a purchase.
Step 4. Prototype & Validate
I used Figma to prototype the design and build out the essentials features that can allow me to test the functionality.
I asked testers to pick one product (a pillow as default) they like and review it in AR mode. They are also encouraged to try to duplicate, replace, and add products in AR.
Here were some parts that needed improvement. I created a table and organized the items by their priority.
Here are the main pages for the final design.
-
Orders of buttons are decided based on the sales numbers of product categories
-
Colors used in the product are adjusted to be accessible for visually impaired people
-
Product information is provided in expandable buttons
-
Easy to understand guidelines for users to follow step by step
-
When a product in AR mode is selected, the edit options appear. The background becomes in grayscale as a visual cue to show it's in a different layer.
-
"Starter kit" packages will be suggested based on filter settings
-
If there is a product added in AR mode, the package will be updated to include the product the user selected
-
If there is no filter setup, the best sales starter kits will be suggested
-
Users will be able to see recommended products in the AR mode instead of the product page.
Below is the clickable prototype.
Takeaways
-
It reminds me that the design decision I made should be justified with a reason. For example, the product orders shown to users can be based on seasonal options or based on popularity.
-
Things as AR which I am very familiar with may not be applicable to everyone. If I am introducing something relatively new to users, I have to make sure to give enough explanation and guidance.
-
Less is more. Giving too many options and choices can be overwhelming to users.
Next project
