Date: March 2019
Client: Heem Interior Design
Role: UX/UI Designer
Deliverables: iOS App Prototype, Branding
The Challenge
Enhance the furniture
shopping experience with AR
Heem is an interior design company with 10+ major furniture brand partnerships. Heem seeks out to build a new app with augmented reality function to offer better furniture shopping experience. So I was asked to design an iOS app where users can browse products and see their desired furniture where it wold be placed in their home via augmented reality.
Secondary Research
Being somebody who doesn’t familiar with AR/VR industry, my first priority was gaining about the subject matter. Throughout thorough secondary research and competitive analysis, I was able to find out that AR has been taking off to offer better shopping experiences by major technology companies as well as direct furniture brands, but AR is still new to overall people and its proficiency of technology still hasn’t been perfecting yet. Next, it’s time to go outside and talk to real people how people do their furniture shopping and their thoughts about AR. Feel free to view the full competitive analysis.
Primary Research
Thanks to six participants for interview and easy accessibilities of major furniture stores, I was able to identify that customers do need the in-store experience as well as online to purchase furniture. To empathize deeper, I spent some time to observe how people would interact with furnitures, families/friends, and customer service team at Williams Sonoma, West Elm, Rafael Interiors, Homenature, and Crate & Barrel. Additionally, I observed the categorization, product information, selection, successful in-store design patterns. This allows me to deeply understand customers’ behaviors in store shopping for furnitures, furniture arrangement, categorization, inspiration and how the store shopping would shape the rest of shopping journey.
"Love hanging out in the store with my families- it's fun! However, when it comes to actual buying products, it's not as fun as it was with browsing!"
Empathy Map
After synthesizing the data into insights about the user needs, I was able to understand that people genuinely like to hang out for browsing. However I also identified some barriers preventing people to buy products more and often. Below empathy map findings clearly indicate what are the challenges they are having which translate into the user needs of Heem’s target user.
Define Persona
To represent the data from the empathy map, I created the persona “Pam”. By giving context and personality to the research data, we can better empathize with the target user throughout the design process.
"Furniture shopping is about total experience. I need both website and the store to make a final buying decision."
Thinking about a
total experience
From the brief, the client asked to create AR features for a new app. In order to develop right AR feature for both the client and user, I first needed to understand fully a whole experience how Pam would do for her furniture shopping. I drafted a full shopping experience in the store and online from browsing online to checking out in the store with a store navigation map to viewing the potential furniture in her space to sharing AR photography with her friends/ families to making final purchase from iPhone. This phase is very crucial to totally emphasize with Pam’s insights/behaviors to offer the right solution.
POV Statement + HMW Questions + Business Goals
Throughout emphasized research and clear representation of target user, I was able to ideating solutions to Pam’s challenges and goals. Then I aligned it with Heem’s business goals to find common goals to find the foremost goals to achieve a successful design solution. Feel free to view a full view of POV statements and HMW questions.
Requirements
Considering the most valuable points from the user interview and the how-might-we questions, I ended up with these points to solve. I underwent a rapid brainstorming activity and chose features to prioritize for each Pam’s needs to select features based on feasibility and effectiveness. Feel free to view the product roadmap.
Biggest Pain Points
Sitemap
Then I created a sitemap in order to visualize the information architecture of the app. From studying iOS Material Design guideline, a challenge for me was how to organize AR features with a full online shopping service. To overcome this, I analyzed the patterns in existing furniture apps and empathized with my persona, Pam. This allowed me to identify the most intuitive way to structure the app. Then I employed the card sorting to improve and verify the information architecture and navigation of the app.
User Flow
To analyze the flow throughout the app, I mapped out for user flows and task flows that were based on a whole storyboard and by examining the sequence of user actions for each scenarios showed the relationships between screens. This process gave me a better sense about how to craft intuitive experiences through the UI.
Sketches
I started designing the UI of the new features by roughly sketching out ideas after inspired by the design pattern research. Then I made clear versions of the sketches with iOS material guideline reference. This sketch process helps to share my ideas with peers/mentors to gain constructive feedback at an early stage of the design.
Logo Development
Before creating hi-fidelity wireframes, I first defined Heem’s branding as versatility, extensive, large-scale, moving forwarding, inclusive, multi-functional, and visionary. Then, I started exploring different ideas of logo for Heem. I mixed nature and raw textures and elements with sharpness from refined industrial elements as erecting juxtaposing design.
Branding
Next, I made a moodboard with references from iOS Material Design. In order to emphasizing Heem’s goal, a broad range of products from major partnerships, I intentionally root on an idea of tree as a symbol which could express the large-scale and versatility. Feel free to view a styleboard.
Content Creation
From Interview
It’s time to think about content strategy and in order to create engaging and highly retainable contents, it’s crucial to understand what people are truly thinking and interacting with the subject matter. During the emphasize and ideate phase, I gathered thoughts and observed/ asked people for their furniture shopping. After synthesizing the data, I deeply understood the patterns of insights. Additionally, I studied from competitors and understood common patterns as well. New arrivals, decoration inspirations, newest sales, direct access to each category and contents from each store are valuable to take the high real estate of the home screen.
High-Fidelity Wireframe
I created the high-fidelity wireframes include the branding and initial design sketches of main AR features and product pages for usability testing. Feel free to interact with the prototype using the button below.
Affinity Map
I created an affinity map to synthesize the usability findings, identifying reoccurring behaviors and feedback. This allowed me to better understand the usability of the current design. Then I made insights from the synthesized information, which informed recommendations for the next iteration by giving priority options.
Key For A Total
Furniture Shopping
Experience
As I deeply understood how furniture shopping should be and users’ expectation for furniture shopping which must have a total shopping experience for both digital and in-store, I understand it’s important to develop app features to connect those two worlds. Using key feature, users are able to seamless browse all the previous saved products during their trip in-stores; they can truly experience about furniture shopping. The major features should include a key code, AR map product navigation, visual/ barcode searching, AR feature which allow users to use saved room measurement to view the product on their space without being a presence in the personal space.
Reflection
In this project, I was challenged with a subject matter I wasn’t familiar with. As a result, I paid more attention to gathering research and empathizing with a target user group. Looking back, I only had time to concentrate on designing for one persona, but the research indicates that Heem could cater towards other certain user groups who do not live in the city or do not have an access to those stores where Heem has partnered with. A key goal moving forward would be to identify other potential user groups as well as develop the other major features to complete a whole shopping experience for both in the store and online. Another challenge was overcoming all AR features which requires an advanced technology to build properly. Consequently, usability testing is even more necessary to understand how the product can accommodate different levels of needs.
Next Step
- Develop the next priority features
- Conduct research with other target groups
- Gather usability testing date from the target groups
- Iterate the major UI features for handoff