Home Decor E-Commerce Website
Solo GV Design Sprint
Original Website Home Page
House2Home is a home decor e-commerce startup that specializes in small accessories and decorations. Through a modified GV Sprint format, this project focused on developing and testing a "Build a Home Deco Starter Kit" function to help their customers find items easily to decorate their new apartment.
Most House2Home products are $10–$50. House2Home focuses on decorative products and accessories (including prints, posters, photos, lighting, small accent pieces, and accessories), but it doesn't sell furniture, appliances, or other large pieces.
Surveys have revealed that many of the customers have just moved into a new home or apartment. These users want to buy multiple items to personalize their new place, but they don’t feel confident doing it on their own.
In this design sprint, I helped House2Home explore solutions to help their customers to have a great "starter kit" of items to instantly decorate their new place.
*This is a hypothetical bootcamp project
The solution is required to be a website, starting with larger screens (desktops and laptops).
House2Home has its existing logo and brand color, though they can be modified.
Focus only on helping the users that want a "starter kit" of multiple products to decorate a new apartment.
This is a solo project.
House2Home researchers did preliminary user research to find out what their customers are looking for when they are shopping for home decor. My role was to synthesize some of the research.
HMW make the process of selecting and shopping home decor more time efficient and less overwhelming?
HMW find the users items that fit “the look” they have in mind?
HMW help the users see and/or imagine whether the items they like will eventually look good together in their place?
HMW help users stay within their limited budget?
I looked at solutions competitors have offered to solve problems similar to mine. They inspired me to combine their features to provide users multiple ways to discover their style and bundle the items they want. Here is the summary of each of their features that could be adapted to this project.
Houzz product page with filters
Houzz is an e-commerce website for home decorations. Users can explore ideas by browsing by room type, department, or style. What I like about its design is the filters, such as price, rating, style, material, shipping location, etc.
Havenly "style quiz" result
Havenly matches you with an interior designer and can serve as a Pinterest board.
The quiz format is very helpful to identify the users’ style that they are aiming for based on budget, location, room type, etc.
Then the “Explore” page enables the users to pick a photo of a room they like based on their style preference, and show all the items in that bundle with the price listed.
Target augmented reality
The unique feature of Target is augmented reality that helps visualize the items in their users' own space either by downloading the app and using a phone camera or uploading your room photo to the website. They also provide 360-degree styled "shoppable rooms" that list all the items.
I generated possible solutions by sketching variations of the most critical screen.
The primary activity for the user is to select a bundle of items they want to purchase. While sketching the variations of the most critical screen, I asked myself: At which step will the user complete the primary activity? Which screen is most important for solving this challenge? Which screen is the most complex?
Here are the eight ways I thought about for the users to choose what they want to purchase easily:
1. Take a "quiz" about the style, room type, budget, etc., and then match the users with individual items.
2. The user first determines items they would like and preview then them in AR by uploading a photo of their room and placing the items in their space.
Since the product is only a webpage, I cannot make an app for phones where the users can directly view the items in their space through a camera, which would make more sense.
3. Explore items by various filters (budget, style, item category, room category, color, rating, location, etc.).
4. The user chooses one item from each category to build their own bundle (discount from buying individual).
5. Always display on the sidebar the items added to the cart, total cost, and budget.
6. Take the quiz, and match the users with 3 bundles (basic, standard, and premium).
This is less overwhelming than matching with many individual items or kits.
7. Filter and explore 360-degree AR premade shoppable room. The user can click each item in the room to view details and add to their cart.
8. After the user views one item, it will recommend "frequently bought together" bundle and similar item.
I first selected one of the Crazy 8s screen sketches of my critical screen. Then I sketched out a "solution sketch", a three-panel board of
(1) the screen that comes before your critical screen,
(2) the critical screen itself, and
(3) the screen that comes after my critical screen.
I decided to choose sketch number 4 as the critical screen. Combing with the quiz format of sketch number 1, matching the user with a bundle can
(1) "make" the process of selecting and shopping home decor more time efficient and less overwhelming,
(2) find the users items that fit “the look” they have in mind, and
(3) help them stay within their budget.
After the quiz, the users can choose to either use the pre-made bundle, or switch out certain items in the bundle. In this way, the users won't get overwhelmed, but at the same time, they have the freedom to customize.
The final step is from sketch number 2, viewing the items in your room. This can help the users see and/or imagine whether the items they like will eventually good together in their place. This step could be optional.
The first 3 panels of the "6-panel" story board
Continuing off of the 3-panel solution sketch, I created a 6-panel storyboard. Each screen included the necessary UI elements that I would need to build the prototype, but I was not building out every possible interaction a user could have with each screen, rather, just the necessary interactions to complete the task. (The image showed the first three panels).
The whole idea of this product is that by using this quiz-like "build my bundle" function, the users can not only have a discount but also save time and effort in finding multiple items that fit their budget and home style.
*This is a hypothetical bootcamp project
A startup company launched a music app two years ago. It is a freemium model that has a mobile-web experience and a mobile app for both iOS and Android.
The company’s business strategy was to first build a user base by offering a free product and then evolve the feature set so they could monetize on a premium (paid) product.
At this point, the product has been well received and has a healthy user base of free users. They now need to design an experience that will allow users to subscribe and pay a monthly fee.
Very similar to the sketch I made, the home header displays and explains the starter kit with CTA for the users to start the quiz to build their customized bundle.
I added the secondary button "browse items" for users who want to know what items are offered before starting building the kit.
The first step of the quiz is choosing one or multiple rooms. I made this the first step instead of the next step of "choosing a style" because
(1) this is probably the easiest question to answer, and
(2) in the second step, we could show photos of only the room(s) the user wants to decorate.
Slightly different from the sketch, this step I put all the same styles together and showed the names of each style. Since our users might already know the name of the style they want, they can easily just "select all" the images of a style. Other users also already have the "look" in mind, and looking at the many photos of each style, they should be able to determine their style fairly easily.
Users can choose a range for their budget.
They cans slide the slider or type in the range.
The budget is for at least three items, since we're building a bundle.
There is one bundle already selected, so if the user feels too overwhelmed by all the choices, they can use this one.
Or they can look through each category in the tab bar, remove items they don't like, and replace them with the ones they like. When they hover on each item, they can choose to either remove it or view more details.
The total bundle price and discount price are displayed at all times to incentivize the users to purchase, letting them know they're saving a lot by bundling up!
The users can choose to visualize their items in their own room before checking out.
This step is optional because I would like to give the users more freedom, and it could take a long time to gather their room photos. They can go back to edit the kit at any time.
I made an interactive prototype (including micro-interactions) for the users to test out. Here is a demo video:
I interviewed 5 people about your prototype using the Five-Act Interview technique.
1. Friendly Welcome Intro
2. Learn about the customer: context questions
3. Introduce the prototype
4. Give tasks
5. Ask debrief questions
You would like to find several decorations for the living room of your new apartment. You know the style you like the most is Mid Century Modern. Your budget is around $150.
All users were able to complete the task. No critical issue has been found. However, there are many other routes not built or tested.
The biggest challenge was to have the users start the "build my kit" process from the home screen. They wanted to click on other options first, especially "browse items." Some of their first impression was "build my kit" was more expensive than regular browsing the items. Even though I put the discount info twice on the home screen, the users were skimming and not paying attention.
The fundamental question is how can this new "build my kit" feature be integrated into the existing website.
The simplest solution could be just to remove the "browse items" button, but the reason I put there in the first place was to give the users the freedom to look at the products first.
It might not a bad idea for the business to have the users interested in browsing the items first, and then after gaining more of their trust, prompt them again to "build my kit."
So the solution is that on the "browse item" page (which I did not design), add a prominent link to the "build my kit" feature.
1. This hypothetical assignment requires the solution to be a website, but more and more people nowadays use their mobile devices to browse. We need to make the website mobile-friendly.
Like mentioned, for the AR, it makes more sense when the users can directly view the items in their space through their phone camera in real-time, instead of uploading a photo to the web.
2. Technical constraints. AR is a very cool feature to have, but it might be difficult to build and probably will have lots of bugs, so is it worth the investment? The users have limited budgets, and developing such a feature will likely drive the costs of the decoration products up.
3. Question for the engineer: how to build an algorithm that makes good recommendations based on the quiz result.
4. The contents of the quiz could be improved.
What if the users want to select multiple rooms, and each room a different style? So for quiz step 1, maybe we should limit the choice of room to one.
What if they want more than 4 items?
Additional quiz questions we could include: color schemes of their rooms, item types
5. How can we compete against other existing products and businesses?
Maybe on the home or about page include a comparison chat.
Productified helps inventors turn their ideas into products and bring the products to the market. I mainly redesigned the information architecture of the site and created the design system.
Created with Mobirise - Learn more