PROJECT
Domus
TIMELINE
Apr 2021 (80 hours)
MY ROLE
Sole UX/UI Designer
TOOLS
Figma, Photoshop
*This is a fictional project for UX Academy at Designlab.
Domus is a tech company partnering with big 10 furniture stores in the US to create a platform for interior selling. Their primary objective is to elevate the purchasing experience for customers, and to achieve this, they aspire to make their mobile app more innovative by incorporating cutting-edge technologies such as Augmented Reality (AR). Their aim is not only to ensure user-friendliness but also to captivate a larger customer base.
DESIGN STAGES
1. Empathize
Learn about the industry and users by conducting research, including secondary research, competitive analysis and interview.
2. Define
Synthesize the findings from research to define the problems with persona, empathy map, project goals and roadmaps.
3. Ideate
Brainstorm and sketch ideas. In this stage, we start from sketching to hi-fi wireframing and define our brand identity.
4. Prototype
Build a ready-to-use hi-fi prototype with Figma to make it easier to view.
5. Testing
Conduct usability testing to get key insights. Learn from the testing and revise the design.
GOALS & OBJECTIVES
- Design an iOS app that allows users to view a catalog of furniture and place it in their home via AR.
- Design the app to handle more complex furniture in the future, such as combos or multiple items at the same time.
01: Empathize
HOW MIGHT WE
- How might we make the furniture-buying journey go above and beyond what e-commerce can do?
- How might we help users choose the right furniture?
RESEARCH GOALS
- Discover the market trends of furniture in the US.
- Get to know more about augmented reality, its application in mobile apps and business.
- Identify customer’s expectation: needs, motivations, goals and pain points.
METHODOLOGIES
Secondary research, competitive analysis, and interview.
01. SECONDARY RESEARCH
I searched for the US furniture market including the market in 2020; furniture and home furnishings sales. Since this app focuses on bringing customers the try-before-you-buy experience, I also looked for Augmented reality (AR) in business, its benefits in business as well as customer expectation on AR.
02. INTERVIEW
I conducted interviews with 3 millennials as they are my target demographics. A brief interview with 6 questions related to their experiences of buying furniture online/offline, as well as their thoughts on augmented reality technology. During my interview, I realize the problems they have are the same: People like AR, somehow is not useful because it doesn't look true.
03. COMPETITIVE ANALYSIS
RESEARCH FINDINGS
02: Define
The research has shown that millennials, the target demographic, are at the core of many retailers’ growth strategies. This age group is often characterized as individualistic and wanting to differentiate themselves from their peers. At the same time, millennials are very active social media users, highly adept at using technology, and naturally more trusting of online sources, and more comfortable making purchases on their digital devices than older generations are. Because millennials are delaying homeownership, they often look for smaller, multifunctional, and affordable furniture that fits into their dynamic and urban lifestyles. They are also more influenced by product offerings that are marketed as ethical, sustainable, and environmentally friendly.
PERSONA
EMPATHY MAP
PROJECT GOALS
To define the project goals, we have to define the business, user, and tech goals.
FEATURE ROADMAP
In this step, we define the features and their priority.
INFORMATION ARCHITECTURE (IA)
This IA journey is specifically made for finding a drawer unit and can be applied to other categories depending on how many sub-categories we have for certain products. In this case, users can look for a drawer unit in two ways: one is directly using the Categories tab on the home page to narrow down their search or using the Search tool; the other way is through using the AR feature, which also leads to Categories.
For login/sign up, users can access their account via the Profile button on the home page or they will have these options on a different screen once they want to add items to the list. But this is still optional. They can add items to the list with/ without signing in. The app will remind them that if they don't log in, their list and search history will disappear once they quit the app.
TASK FLOW
These two task flows below describe 2 possible scenarios: one is when user is new to the app and they are curious about the AR feature; the other scenario is when user already had in mind what they want to buy so the journey might be different.
03: Ideate
After having the information structure done, it's time to sketch and visualize how I want the app to look like.
SKETCHES
MID-FIDELITY WIREFRAMES
04: Prototype
UI KIT
I designed the logo symbol and wordmark to use for different cases. For this project, I prefer shades of black because black is a formal, elegant, and prestigious color.
VISUAL DESIGN
05: Testing
I conducted the usability testing with 3 participants via a Zoom call using my Figma prototype. 3 participants, age from 20-30 years old, never/ rarely had experience with the apps using AR technology.
GOALS
- Participants can navigate effortlessly.
- Participants can complete the tasks with no confusion.
- Identify the errors participants make and how easily they can recover from them.
TASKS
- Scenario 1: Participants are new to the app. They are curious about the function called My Room, which is the AR feature.
Participants are asked to try out the AR. - Scenario 2: Participants want to buy a drawer unit.
Participants are asked to buy a drawer unit by using Categories.
FINDINGS
- Participants' rating overall is 9/10.
- Participants can navigate easily.
- Participants, on the sub-Categories page, clicked on the photo because they wanted to see the product on the photo.
- It took one participant a few seconds to see the ‘Add to Cart' button on the product page.
OPPORTUNITIES
- Make the ‘Add to Cart’ button on the product page more prominent.
- Make products shown on the banners/ images on the sub-categories page clickable.
Revision
After taking consideration, I decided to make a revision as said in the opportunities.
REVISION 1
Add to Cart button has changed to yellow color to be more prominent.
REVISION 2
Allow user to see and click on the items they see on the photo.
Learnings
I made an assumption too early that using all-black shades in my design would give it a minimal, elegant look. But it turned out a user was not able to see the CTA button in the first 5-10 seconds. I've learned to look for more solutions in my design and receive constant feedback from users. It can never be perfect, but I always strive to find a new approach for it.