HEEM
AUGMENTED REALITY MOBILE APP
OVERVIEW
Heem is an augmented reality (AR) interior design app. With a number of top furniture store partnerships, Heem is looking to provide a better experience visualizing furniture in their customer's own space.
THE CHALLENGE
Heem is a new app for interior design and they have partnerships with a number of top 10 furniture stores in the U.S. Heem is currently scanning all the catalog items featured by these stores, as well as setting up processes to keep their catalogs updated. It’s now time to start designing their app! Users should be able to select any type of furniture (e.g. small objects like boxes or up to something as complex as kitchens) and see it in augmented reality through their smartphone or tablet app.
THE OUTCOME
A mobile app with augmented reality (AR) feature that allows customers to browse through the and order anything online through their app.Users will be able to see their desired furniture where it would be placed in their home via on their smartphones or tablets.
LENGTH OF PROJECT
80 hours
ROLE
Lead UX + UI Designer
LIVE PROJECT
PHASE 1
RESEARCH
I began the process with doing some market research to gain a better understanding of the furniture industry as well as user demographics within the space. This was followed by identifying competitors and conducting user interviews.
MARKET RESEARCH
First, I conducted market research to gain a better understanding of the problem space. I learned about the furniture industry’s trends, the demographics of furniture shoppers, and the current role of augmented reality in the market.
COMPETITIVE ANALYSIS
To observe how other furniture businesses are approaching a similar problem, I identified the strengths and weaknesses of Heem’s direct and indirect competitors. This allowed me to evaluate the role Heem would play in the market.
PROVISIONAL PERSONAS
In order to frame my mindset to design for the user, I created provisional personas based on market research. They would be validated or invalidated with findings from my user interviews.
USER INTERVIEWS
I conducted several user interviews in order to collect information about their overall experience with shopping for furniture both online and in-person. Of the interviewees, 4 were female and 2 were male. All the interviewees fall between the ages of 18 - 55. Through these interviews I was able to tap into their goals, needs, motivations, and frustrations about furniture shopping as well as their experiences with AR.
EMPATHY MAP
I created an empathy map to synthesize my findings. This was an efficient way to observe patterns among my findings, pull insights, and identify user needs.
.jpg)
PERSONA
In order to define a target audience and design for real user needs, I created a user persona based on my research findings. Ericka represents Heem's target demographic. With Ericka, we can better empathize with the target user throughout the design process.
PHASE 2
DEFINE
I created POV statements to frame the problem from the user's perspective and HMW questions to approach the problem in different ways, guide my design and spark brainstorming ideas. Furthermore, I reflected on the business and user goals to find a happy medium for all stakeholders. Once I had identified common goals, I listed product features that were necessary for the prototype.
POV STATEMENTS + HMW QUESTIONS
I developed POV statements to frame the problem from the user’s perspective and asked HMW questions in order to spark ideation sessions that approached the correct challenges.
BRAINSTORMING
With the problems defined, it was time for me to focus on generating as many solutions as I could to each HMW question without evaluating how they would be executed.
.jpg)
.jpg)
.jpg)
PROJECT GOALS
To begin strategizing, I created a Venn diagram of business and user goals to observe the shared goals among them. It was important to remind myself to advocate for the user by providing the best user experience possible while also adding value to Heem’s business.
.jpg)
PRODUCT ROADMAP
With all these ideas generated, it was essential for me to prioritize them by importance. I created a product roadmap to
prioritize the features I would design based on their goals and ease of implementation.
To view the full Product Roadmap, click
here.
PHASE 3
IDEATE
Here I started laying out the foundation and organization for the new mobile app. I followed this up with a site map as well as a user flow and task flow to show how a user might navigate through the new proposed website.
SITE MAP
To plan out Heem’s information architecture, I created a sitemap by referring to my product roadmap. The sitemap helped me visualize the structure of Heem’s mobile app and the organization of its features.
.png)
TASK FLOW
To better understand how users will navigate through the app performing specific tasks, I produced a task flow diagram. This allowed me to think through the user's process and make sure all possible screens are designed to help the user perform the given task at hand.
USER FLOW
Furthermore, I created a user flow to observe the various ways users can interact with Heem’s mobile app. This helped me understand the different decisions users can make, so I could design to accommodate the possible interactions.
UI REQUIREMENTS
To ensure that I would
meet the high-level and detailed requirements of Heem’s main screens, I created a UI requirements document by referring to my sitemap and flows. This document remained fluid throughout the project, adapting to the decisions I made.
Read UI Requirements document here.PHASE 4
DESIGN
To begin the design process, I sketched out various screens for the app thinking through how the user might navigate to the selected features. I then proceeded to add more context to these sketches through high-fidelity wireframes.
LOW-FIDELITY WIREFRAME SKETCHES
Creating low-fidelity wireframe sketches of Heem’s mobile app was an efficient way to experiment with the structure, layout, and organization of Heem before adding actual content. I referred to competitor apps including Wayfair and Overstock for inspiration.
.jpg)
.jpg)
HIGH-FIDELITY WIREFRAMES
I created mid-fidelity wireframes for the key pages to see my ideas come to life digitally. This helped me visualize the layout, structure, and hierarchy of these pages before adding actual content.
PHASE 5
PROTOTYPE
During the prototyping phase, I used the high-fidelity wireframes in Figma app to create a working prototype. This is the prototype I had participants test, going through a few different user tasks.
HIGH-FIDELITY PROTOTYPE
To make sure the design I put together functioned the way it should and to
allow users gain the information they were looking for, I created a high-fidelity prototype using Figma.
VIEW HIGH-FIDELITY PROTOTYPEUSABILITY TESTING
I tested my prototype with users to observe how they interacted with the mid-fidelity prototype. I conducted testing with 5 participants in total, 4 females and 1 male, ranging from ages 18 to 45. The moderated in-person think aloud usability tests lasted approximately 12 minutes each. I gave my participants 4 tasks to complete. Usability testing allowed me to uncover user pain points and make improvements to Heem's mobile app.
i. TEST OBJECTIVES
• Evaluate and understand the user's pain points with Heem’s mobile app.
• Identify pain points and successes of the design and flow
• To gain insights from user feedback that can be used to improve Heem’s mobile app
II. TASKS
• Sign-in to your Heem’s mobile account
• Find the Rogersville Armchair in color beige
• Use the augmented reality feature to see how Rogersville Armchair in beige looks in your living room
• Purchase the Rogersville Armchair in beige
PHASE 6
ITERATE
Here I gathered the feedback from my usability testing through the use of an affinity map. The findings discovered helped me make key adjustments to my screens for the wireframes. I also began putting my research together for coming up with Heem's brand and overall design.
AFFINITY MAP
After conducting the usability testing, I was able to identify key insights and generate the top recommendations from test users through an affinity map. Taking these recommendations, I now had areas of the app I could improve upon, making for a better user experience. I synthesized my usability testing findings in an affinity map in order to group patterns, pull insights, and identify improvements I needed to make to Heem’s mobile app.
BRANDING
Before moving into the high-fidelity wireframes, I created branding guidelines to bring more cohesion to the brand. To help with this process, I created a
mood board using Pinterest and chose some adjectives to help define Heem's brand. A few of those being calmness, peace, and cleanliness.
HIGH-FIDELITY WIREFRAMES + PROTOTYPE
Finally, I applied the branding and styling to the wireframes and made an updated prototype using Figma. The new prototype shows the updated look and feel.
VIEW HIGH-FIDELITY PROTOTYPEUI KIT
This document keeps all of the UI elements and patterns in one place for easy reference.
CONCLUSION
This project introduced me to a fairly new sector – Augmented Reality (AR). Having not really used AR before, I was able to research and explore new techniques and capabilities with regards to mobile devices. Given the time restraints, I could see more research and testing to further push the boundaries of what AR could really do on a mobile device.
NEXT STEPS
• Expand upon the AR functionality to provide more ways for the user to use the technology when designing a new space
• Discuss challenges with developers and engineers with AR capabilities
• Continue with user testing and gathering data
• Continue improving UI Kit based on feedback and adjustments made to new features
