Heem
An end-to-end AR furnishing app that makes selecting furniture easy.
My Role
UI/UX design, brand design, 3D design.
Timeline
80 hours
Tools
Sketch, Paper and pen, InVision, Principle, Illustrator, Photoshop, Keyshot, Alias.
Platform
IOS
Introduction
Have you ever been in a store and agonized over which furniture would look good in your home? Have you wondered if the furniture will fit your space and create a user-friendly layout? Did you have to go to every furniture store to compare among different options?
Selecting the right furniture can cost tons of energy, time, and money, which is not good news for our target users, who have a busy schedule and a limited budget in the establishment stage of their careers.
Heem solves these problems and takes the solutions to the next level. Integrated with AR technology, Heem helps users pick furniture with the right style and size for their home; It assures the furniture creates a user-friendly layout and makes trying out different furniture options at home easy.
I put lots of passion in this project because it combines my love of the 2D and the 3D world to solve practical problems. I also truly enjoyed the process of using AR technology to provide value to people’s life.
The Challenges and Solutions
Challenge one:
How might we help users pick furniture with styles that match and look good with the rest of the room?
Solutions:
Provide home style inspirations. Heem provides inspirations for users to define their desired home styles and find furniture that matches these styles.
Offer reviews and product details. Users can search and read others’ posts of renovating experience, product reviews, and brand recommendations. Users can also see product details of the furniture they are interested in.
Place the furniture in your room through AR technology. With the help of AR technology, users are able to see how a piece of furniture looks when placed in their room. This feature helps users decide if the style of the furniture matches with the style of their room.
Challenge two:
How might we help users make sure the size of the furniture fits their space and would create a user-friendly layout?
Solutions:
Notify furniture dimensions and the distance between the furniture and its surroundings. Users can get the furniture dimensions as well as the distance between the furniture and the objects around it by pressing the “Dimension” button in the toolbar. This feature helps users decide if the furniture fits their space sizewise, or if the furniture creates a nice flow with the rest of the room.
Identify problematic room layout and suggest furniture replacement. Heem will alert the user if the added furniture is causing a problematic room layout. By pressing the “Find a replacement” button, the user can replace the current furniture with a new one that fits better in their space.
Challenge three:
How might we help users test how different furniture options fit in their space to find the best fit, without having to go to the store?
Solutions:
Switch among various furniture colors and sizes in the AR scene. Uses can try out various furniture colors and sizes within the AR scene to select the best look.
Try different furniture options without having to re-placing them. To try different furniture options, simply click on the replace button. Heem will recommend furniture in the same category as the current one. After the user selecting a new item, Heem automatically replaces the current furniture with the new one at the same location.
My Process
1/ Research
Competitive Analysis and Market Research
What’s happening in the home improvement market?
We began our process by looking at how today’s home improvement apps help users pick the right furniture. To lay the ground for the user interviews step, we searched for people’s opinions about selecting furniture online, and their attitude toward using technologies like AR to assist them while shopping.
Through our market research and competitive analysis, we learned four things about the current home improvement field:
While selecting furniture online, it’s difficult for users to get a sense of what a piece of furniture will look like when placed in their room.
Users want to see and feel the products in real life.
70% of consumers under 40 years old have or willing to use AR to assist them while shopping.
Most of today’s home improvement apps use features such as: Virtual placement of furniture in users’ space through AR; visual match to find an item; provide home design inspirations; saving and sharing the AR scene.
User Interview and Findings
What are our target users saying about selecting furniture?
To understand the experience from our users’ perspective, we interviewed people from 25-35 who bought furniture for their home within the last six months. We had our participants walk us through the last time they buy furniture, and asked questions about how and why they select that specific piece. We collected their opinions of their researching, selecting, purchasing, and using experience.
We concluded the interview with five key findings:
When selecting furniture, it’s hard for participants to picture if the furniture will look good with the rest of our room, or with each other.
Participants want to know if the furniture will create a user-friendly layout among the space.
Participants want to look at how different furniture options look like in their space to pick the best fit.
Most participants research before purchasing furniture. They get inspirations from customer reviews, friends’ recommendations, and interior pictures that have a similar room layout.
To make sure the size of the furniture fits their room, participants measure their space and then compare it to the furniture size. Many participants are annoyed that they have to measure and remember everything.
2/ Synthesis
Empathy Map
Uncover user pain points and needs behind interview observations.
We created an Empathy Map to help synthesise our observations from the user interviews. We started to notice repeated patterns while laying out what our users see, hear, do and think during furniture selecting. These repeated patterns draw out insights about user’s pain points (Pains) and needs (Gains) towards picking the right furniture for their home:
Persona
“I will never just rely on eyeballing and imagination when selecting furniture.”
From the user interview, we noticed the common patterns in behaviors, goals, and attitudes among our users. Our target users are middle-class tenants and first-time homeowners from 25-35 years old. Being in the establishment stage of their careers, they have a busy, quality, and simple lifestyle. While selecting furniture, they are motivated by pragmatism, price, and aesthetics.
To create a good user experience for our target user, we created a persona named “Summer” to remind us of our users’ experiences, behaviors, goals, and frustrations.
HMW Questions
Define our challenges
After synthesizing user’s pain points and needs, we defined our design challenges and framed them as How Might We questions. Due to the 80 hours timeline, we decided to focus on the following three problems that our users most addressed during the interview. We used these HMW questions to guide us through the rest of our design process:
3/ Interaction Design
Ideation; Crazy Eight Method
Sketch out as many ideas as possible.
We drew out ideas and user flows for each HMW questions. We discovered overlaps among ideas and focused on the happy flow.
Lo-fi Wireframes
Get a sense of the basic structure.
Quickly sketched out lo-fi wireframes to get a sense of the basic structure before moving to mid-fi wireframes.
User flow and Mid-fi Wireframe
Initial Solutions
After a few rounds of sketching using the Crazy Eight method, we created the happy flow that targets our three HMW design problems and built our solutions into mid-fi wireframes.
4/ Test and Iteration
Prototyping & Rapid iterative testing and evaluation (RITE)
Improve the user experience during testing.
We built a mid-fi prototype in InVision to test the initial design.
Why mid-fi? Because it contains enough details for participants to understand the context such as changing furniture in the AR scene, but also allows us to test the flow and usability before spending too much time on UI.
We used the RITE method to constantly and efficiently evolve the user experience during the testing. We conducted two rounds of testing. After the first three participants encounter some usability issues, we improved the prototype and fidelity before the next test.
We recruited middle-class tenants and first-time homeowners from 20-35 years old. Each of them was asked to: A. find a bed that fits their bedroom; B. See if the nightstand they saved before matches the bed and the whole room.
🎉The success:
100% of the participants completed the tasks without interfering.
Participants feel that the Measurement feature, the layout alert, and the AR function make selecting the right furniture easier.
🔎Areas to improve:
Helpful new features
A more straightforward flow
Clear & Intuitive UI
User-friendly design elements
Priority revisions
Improve our design based on usability test findings
✔️Improvement One
✔️Improvement Two
✔️Improvement Three
✔️Improvement Four
5/ UI Design
Branding & UI kit
The Heem brand is inspired by our user’s love of Scandinavian design and Minimalism interior.
The Heem brand is characterized by simplicity and functionality, which came from our target user’s favoritism of Scandinavian design and Minimalism interior. The cleanness in style allows the AR scene and interior inspirations to stand out.
Design elements: Our design elements, such as icons, buttons, and toolbar, were designed with soft and natural form. The rounded corners add visual interests and make our product warm and inviting.
Typography: We use Proza Libre font for the Heem logo and large titles because it brings a sophisticated impression to our product and renders exceptionally well on screens. We picked Open Sans font for small title and body text because its upright form and neutral appearance match beautifully with our design elements.
Color swatch: Heem’s color swatch is made of shades of grey and an orange shade of red. The neutral grey colors create a clean and friendly effect, while a pop of red brings contrast for elements with higher hierarchy.
Hi-fi prototype
Users love the simplicity and cleanness in the improved design.
We were able to test our UI design as well since we applied the RITE method in the testing phase. Participants appreciate the simplicity and cleanness in the interfaces. They like how inviting and friendly the UI is.
“After all, It’s not about AR. It’s about better living”, they said.
3D modeling & rendering
Make AR scene realistic to receive accurate user feedback.
To make the AR scene realistic and receive accurate user feedback, we set up the AR room scene in Alias (3D surface modeling Software) and rendered it in Keyshot (3D rendering software).
What People Are Saying about Heem
“Heem is user-friendly and exactly what I need. It notifies me problems of my layout, helps me understand the reason, and provides me with better options.”
— Bin, participant
“It’s exciting how Heem is like a game. You can switch between different options and move them around in your room.”
— Yue, participant
“I like this dimension feature. It tells me the distance between the furniture and the objects around it in my room. I can get a sense of the space and layout. It’s better than just looking at numbers from a product page.”
— Jim, participant
“The AR function is cool. It shows you what a piece of furniture will look like when placed in your room.”
— Milo, participant
Reflections
I put lots of passion in this project because it combines my love of the 2D and the 3D world to solve practical problems. Being able to use AR technology to improve people’s life also excites me very much.
Learning one: Having less content on a page doesn’t always create a smoother experience. My initial design of the AR scene was cleaner than the current one. Then basing on user feedback, I added the “Replace” button in the AR scene. I was worried this feature would make the AR scene crowded, but the testing result shows that the complication and effort in user interaction were reduced, even though there is more content on that page. The UI doesn’t look cluttered at all after designing. This experience taught me to always think of the purpose behind each design element.
Learning two: Trailer the design method and process based on the problem to solve. During this project, instead of spending lots of time studying the lo-fi wireframe, I focused my time on testing the mid-fi prototype. The AR scene in this project relies deeply on visual for users to understand the context, thus a mid-fi prototype is more suitable for getting accurate feedback in usability testing, because it contains enough details but doesn’t require too much time on UI. This project taught me to be flexible at choosing the design method to better service design goals.
Next steps
Help users define the styles they like. While in this project, we helped users select furniture that fits their home’s style, size, and layout, we discovered that it’s hard to start the search for some people. Some have no idea which furniture matches the other furniture in the room; others know what they like but can’t put a name on that style. We’d like to help users define what they are looking for, maybe through setting up preferences, recommending trendy styles, and giving furniture pairing suggestions.
Explore more AR tools such as Torch and Apple’s ARKit SDK. We learned basic knowledge about AR tools during our secondary research. However, under our tight timeline, we decided to use 3D design tools and rendering software that we are familiar with to create the AR effect. With more time in the future, we’d love to do an in-depth study of professional AR tools, and build our design into a real product to help users select the best fit furniture for their home.