top of page
House2Home
An e-commerce home decor platform with integrated AI and AR.
A UI/UX Design Sprint case study.
House2Home
Overview
House2Home is an e-commerce website that sells home decor and accessories. House2Home has found through research that many of their customers have just moved into a new house or apartment. Users want to purchase multiple items at once to customize their new home but don’t feel comfortable doing it on their own. House2Home does not sell large items like furniture, and their products are $10-$50.
Objective
House2Home sees an opportunity to help people find a “starter kit” to decorate their new home.
Role: UI/UX Designer
Use Case: Conceptual Case
Duration: 5 Days
Tools Used:
Figma
Procreate
Sheets
Forms
FigJam
ChatGPT
Docs
Design Process
This case is formatted for the Google Venture Design Sprint.
As a design sprint, the design strategy is condensed into a five day process. This processes allows for the maximization of time to create a Minimum Viable Product that saves resources spent on costly future iterations.
This diagram by the Interaction Design foundation demonstrates the phases of a design sprint.
.avif)
As shown, empathizing, defining, ideation, prototyping, and testing are the main steps used in the design process. However, they are simplified in day-to-day steps. These steps are often revisited through iteration techniques as needed but made to fit strictly in the time frames allotted.
Day 1: Understand
Research
For this conceptual case, data was already supplied from research and interviews.
While reviewing an interview recording, some notable findings were noted.
-
Big city living for the first time alone in a tiny apartment
-
Goes on social media to find inspiration for a themed home but finds it hard to find items
-
On a tight budget and cannot afford to buy a single thing or too many small things
-
Knows what she wants but needs help with interior design and previewing/organizing items in her own space - desires an interior designer
Summary
Here are some notes jotted down when reviewing consumer behavior.
-
Noncommittal to big or expensive items
-
Desires clear guidance for which items to get
-
Need help sticking to budget
-
Wants a good preview of how items will look in room before purchase
Persona
A designer at House2Home created a persona from research insights.
Here is the summary:
Ally (23 y/o; Chicago, IL)
-
Knows the look she wants but needs help finding decorative items in her budget
-
Just moved into a new apartment so she needs items that are big impact but not permanent or difficult to use
-
Wants to see items together in one space and know how they would look before purchasing
-
Easily overwhelmed by choice paralysis and wants a way to organize her ideas
Map
At this stage, we are already brainstorming potential solutions for this persona. An end-to-end map solution is used to asses the user's starting point and goal at the end of their journey. Between these steps, a cohesive process routes users to the end goal.
End-to-End
Here is an explanation for the steps in the above diagram:
-
User signs up for House2Home
-
User takes a short quiz to curate quick design recommendations that within within their budget
-
User chooses design aesthetics to view products in that category
-
Optional - User opens the Augmented Reality camera in the app to view recommended items in their room
-
User looks through curated product catalog
-
Optional - Selected items appear in AR preview
-
User adds these items to cart
-
User enters checkout to complete purchase
As suggested, House2Home is going to offer an Augmented Reality feature that solves the problem of users wanting to see items in their space before making a purchase. These suggested items will be within the user's budget before viewing.
Day 2: Sketch
Lightning Demos
Competitors were analyzed to draw inspiration of preexisting solutions that solve similar problems to House2Home.
Pier 1 Imports is a popular home decor store.
Remodelix AI is an interior design assistant that helps users brainstorm ideas with AI images.
Zara Home is a high end home interior e-commerce site.
House2Home vs. Competitors
Many competitor websites are successful in offering users a selection of decor items by category. With a simple search and filter system, users generally need to already know what they're looking for.
AI platforms like Remodelix AI allow users to take a still photo their room to generate inspirational ideas using AI. However, these apps don't really offer purchasable items for sale.
There is room in the market for an e-commerce platform that allows users to view real purchasable items live in their room before purchasing using Augmented Reality, not just AI.
AI generated images do not allow sellers to accurately portray their items in accurate detail or to scale (at this point in time). However, AI technology can be used to detect furniture types in a camera shot to place appropriate decor on certain items.
Crazy 8s
The crazy 8s strategy is used to quickly brainstorm potential visual solutions without committing to only one idea. Eight screens are made of the "Critical Screen", or the screen that shows the most important part of the user journey.
Sketch Flow
From the sketches, the first screen and some elements from other screens were chosen as the middle "key" step in the flow of purchasing items from House2Home. A previous and final screen demonstrates more closely how a purchase is completed from this key step.
So far, the core functionality of House2Home is choosing from a pre-curated style selection (from the onboarding quiz users will take), filtering by item type, and selecting from the catalog. Users can optionally open the AR camera to view selected items in their room and use the search bar for more specific choices.
Day 3: Decide
Storyboard
From the previous three sketches and end-to-end map, low fidelity designs are created to finish demonstrating the flow with the purpose of users making a purchase.
We decide elements for the final prototype by combining ideas from mapping, brainstorming, and sketching sessions to create a cohesive piece.
Day 4: Prototype
High Fidelity Prototypes
High fidelity designs were created from the low fidelity storyboards.
Some flows now feature more precise steps. For example, users can add items to their cart directly from their room camera view by tapping on item tabs directly.
For this project, ChatGPT was consulted to generate before and after images of a decorated room.
Prototype Preview
Prototype Demonstration
First Iteration Prototype
Since this is a design sprint, the purpose of this high fidelity mockup is not to show every step that a user can take in a final product, but demonstrate the major end-to-end goal.
As mentioned, there are some elements that are a demonstrative concept for a final product, like the navigation bar and opening screen.
Day 5: Test
Testing Results
Five users were asked to participate in a short test for House2Home to check for accuracy and ease of use. Three tests were conducted in person, and two of these tests were conducted remotely while users shared their screens.
The following results were found:
-
Users were generally pleased with ease of use, especially the short 4 part quiz.
-
No critical errors were found.
-
However, some users missed tapping on small buttons like "Cart" and "Next".
-
A couple users could not immediately locate "Cart".
-
A couple users would prefer less tag crowding on camera view.
Changes to Make
For an extended project, a re-iteration phase and another test would continue from this point. However, since this is a design sprint, changes are noted should this project be given a green light to extend past Day 5.
The following changes to House2Home should be made from testing results:
-
"Cart" button becomes a separate larger floating icon that scrolls with the screen or a separate color.
-
Text buttons like "Later" are made slightly bigger along with other smaller buttons like "Next".
-
Tags disappear or collapse more to a smaller size when the corresponding items is already purchased. Users can refresh or choose to see more items at once to reduce crowding.
Bonus Iteration
UI Cleanup
A post test reiteration round has been created to see what quick improvements can be made after Day 5. Here are the changes:
Final Thoughts
House2Home is at the cusp of AI and AR research in the modern age and would greatly benefit from extended user testing to enhance its ability to grow with user preferences on scale, lighting, and other personalized design elements.
Flash card user sorting would assist with categorizing listings according to users' expectations.
While it is a sprint-based project, this conservative approach helps keep many doors open in regards to the approach developers would take when taking resource limits into consideration. Would it be feasible to use only AI to accurately demonstrate products to scale, AR, or both? At the present moment, House2Home's design accounts for both to imagine what it would be like to step outside the box.
bottom of page