HEEM AR App
A mobile furniture app to inform an immersive interior design experience with Augmented Reality and Virtual Reality features.
In which novel technology is made accessible and useful.
iPhone prototype
00 Introduction
CLIENT — designlab
ROLE — UX | UI designer
TIME frame — 80 hours
budget — shoestring
focus — mobile app design
concentrate — ui | prototyping
Background
For the average consumer, augmented reality (AR) and virtual reality (VR) are flashy and attractive, but not essentially useful. Though not the first to develop an AR furniture app on the market, heem intends to create purpose for emerging technology and tailor features to inform the user experience.
heem has partnerships in place with prominent U.S. furniture stores — Fritz Hansen, IKEA, Williams-Sonoma, Berkshire Hathaway Furniture, Raymour & Flanigan, La-Z Boy Furniture Galleries, American Signature, Restoration Hardware, Crate & Barrel, and Ethan Allen — with plans to expand in the future.
Personal Challenge
From user research, the top frustration cited was difficulty visualizing dimensions in space while the top challenge cited was lacking a designer’s eye. As furniture are higher financial and time investments, a dread in browsing and making purchase decisions was common. Users often felt overwhelmed by the process and didn’t know where to begin. I challenged the app to make the interior design experience accessible and fun.
Solution
From user research, I defined two consumer groups: customers who bulk purchase multiple furniture items, the majority of which is due to moving, and customers who purchase single items for redecoration, upgrading, or replacement purposes.
To answer these needs, heem’s app has:
Two Functions
Plan, for new spaces.
Replace, for similar product suggestions.
Four Features
AR technology.
A personalized AI design assistant.
VR view, in plan mode.
Bookmarks, to manage favorites, collections, spaces, and swatches.
01 Research
SECONDAry research | competitive analysis
SURVEY
analyze findings | prepare proposal
Methodologies
Competitive Analysis: an analysis of competitors.
App Audit: walk-throughs of user journeys on competitive platforms.
Survey: quantitative insight on user behavior, preferences, pains, and gains.
Competitive Analysis
Across the board of competitors, a combination of a smooth AR feature, easy tryout and browsing flows, and universal icons define a great user experience. Scaling struggles are prevalent, but is directly linked to ARKit’s limitations. High priority features include an AR screen with instructions, categories, and filters. Medium priority features include a wishlist, save to collection, save layouts, an AI wizard, finger gestures, product information, and customer reviews. Low priority was given to social features such as sharing designed spaces with friends.
Survey
Through a Typeform survey, I collected online responses to retrieve quantitative insight on user behavior, preferences, pains, and gains.
Key Findings
The majority of customers bulk purchase multiple furniture items, the majority of which is due to moving. Customers who purchase single items do so for redecoration, upgrading, or replacement purposes.
The majority of customers elect online shopping over brick and mortar, with a heavy desktop preference. Though none have used a furniture retail mobile app prior, all would consider using one with a built-in AR feature.
Customers who shop in stores do so to inspect for furniture dimensions, durability, materials quality, and textures.
Analysis
From the survey responses, the following priorities were identified the heem user:
Priorities
An AI “styling wizard” feature.
Realistic and accurate dimensional visualization.
Extensive product information, details, and filters.
02 Define
provisional archetypes
Provisional Archetypes
03 Information Architecture
SITE MAP
Site Map
I struggled with the temptation to use AR to solve more than one problem, but a product with too many features becomes more complex to use and expensive, which is particularly true for new technologies. Rather than design swatching and shopping checkout flows as well, I made a business and design decision to imagine the AR experience in interior design for dummies. Being realistic about the scope of the project forced me to find a balance between my creative and technical abilities.
Below are simplified user flows in one site map, which helped me figure out navigational hierarchy and to ensure no dead end pages.
04 Design
HI-FI wireframes
logo
HI-FI ui designs
High-Fidelity Wireframes
Below are some examples of high-fidelity wireframes for the heem app on iPhone.
Home
welcome — onboarding — AI assistant
Ar home — info/help — scan floor space
Plan
plan home — draw the space
define the space
explore the space — VR view — product card
save space — bookmarks
Replace
replace home — scan item — best matches
try item in space with ar — product info
High-Fidelity UI Designs
Designing high-fidelity UI screens for iPhone, I focused on branding with bright colors, cube-shaped designs, and a slab serif typeface choice, rockwell std. It was important for me to convey heem’s purpose through its logo. Below is a process of how I came to the isometric h design that doubles as a chair.
In terms of visual design, I found it challenging to create a clean, intuitive, and engaging interface for an environmental medium that accounts for both input and output. How can I blend virtual with real? The AR objects should fit into the environment and users should believe that they’re real. However, not everything in the AR space should be 3-D — I made all the other interface designs flat for less visual distraction. An area I feel I’ve fallen short in is rendering the VR view in higher levels of realism i.e. adding elements such as textures, noise, and dynamic lighting.
Home
welcome — onboarding — AI assistant
Replace
AR home — replace item
all similar items — product card
Plan
scan floor space — draw the space
define the space
vr view — save space
bookmarks — favorites/collections/saved spaces
05 Implementation & Reiteration
HI-FI prototype
—
usability test
Affinity diagram
analysis of findings
—
priority revisions
High-Fidelity Prototypes
With InVision, I created a high-fidelity interactive prototype for iPhone. Give the prototype a play or check out the video run-through below.
Something I’ve realized while designing heem was that it required a different approach to assessing options. Due to AR’s nature of being set in real-life context, instead of using static sketches to make design decisions, it was important to interact with and experience the prototype to evaluate my ideas. For example, it’s important to inform the user that they’re about to transition into AR and to encourage them to get acquainted with the 360-degree nature of a virtual environment during the onboarding process, which is why I later built in an animated transition state when scanning the floor space.
iphone video run-through
Usability Testing
Goals
Test usability of AR furniture mobile app with focus on design pattern optimization for emerging 3-D technology while maintaining intuitivity of design patterns familiar to 2-D interfaces.
Test branding appeal, navigational ease through and between multiple flows, CTA button effectivity, and stress levels during experience.
Test whether plan and replace features are desirable, accessible, and useful for users.
Determine user interest in and likelihood of using AR to inform the furniture shopping experience.
Observe pain points during user tasks. Look for design details or navigation features overlooked or misused by user due to poor UX or UI.
Affinity Diagram
Using an affinity diagram, I bundled usability results into clusters of patterns and reorganized design ideas for priority revisions.
Analysis of Findings
Key Takeaways
The results show an 100% overall positive app experience with an unanimous interest and delight in the “plan” feature, VR view, and branding aesthetic. 75% felt the app was user intuitive. Half of the users are unlikely to use the app, directly tied to their neutral feelings towards AR technology.
Problem: Navigational problems due to unclear icons i.e. back arrow as “Home” indicates return to previous screen and may lose all progress.
Solution: Label icons, revise label copy, and replace back arrow with universal home icon.Problem: Abbi’s presence did not feel prevalent enough after initial introduction.
Solution: Incorporate Abbi into “exiting without saving space” prompt.
06 Conclusion
Reflection
Next steps
Reflection
For a designer, it is important to stay informed on technological trends and solve for creative opportunities within the evolving digital landscape. One technology that’s been gaining steam is AR, for which we are still working to define a compelling experience for the average consumer. What does the UX and design process look like for AR products and services?
Why do we want to use AR? What problem does it solve? Why is this better with AR?
For heem, AR adds value by improving the main use of the app, making the user journey easier, and creating a more memorable experience.
When it comes to designing for AR, researching innovations and successful solutions from other industries, such as retail, is useful. One thing I kept in mind was: AR exists outside of the phone — the technology is a medium for information. The tasks users want to accomplish is the focal point. While the app accompanies the user from the beginning to the end of their journey, they should be able to access information, such as saved spaces, at any point — an example of a convenience reality cannot afford.
Next Steps
Build out more features i.e. swatch collection and continue to refine design based on feedback.
Android interface roll-out and user testing.
Concentrated testing on different age groups.
