Project Overview
Challenge: DECOR4U is a new app for interior design and has linked up with many of the top furniture companies in the states. They are going to be focused on selling different items and also incorporating AR features to better help users understand what they are looking at. For this reason, they want to make sure the app is well-designed for users to use. In order to do that, our main goal of this project were to 1. come up with problems and design solutions based on research 2. add in AR feature that allow users to view different items and 3. to come up with a brand image.
(The content provided here is solely for educational purposes)
Role: UX Researcher, UX Designer, UI Designer
Duration: 4 weeks
Tools: Figma, Photoshop
Empathize
Research Plan • Market Research • Competitor Analysis
Provisional Personas • User Interview • Empathy Map • User Persona
I started this project by creating a research plan document that included some of my research questions, assumptions, methodologies, and most importantly, goals. A few of these goals include 1. Understanding the current online furniture industry, 2. Gain knowledge on customer behavior regarding furniture shopping, and 3. Understanding more about the AR industry.
Research Goals
First, I conducted secondary research through market research in order to gain a better understanding of the current online-furniture business and some facts about AR. The following are some of the key insights I found through market research.
In 2019, retail e-commerce revenue from furniture and homeware sales amounted to 44.48 billion U.S. dollars and are projected to increase to over 56.8 billion U.S. dollars in 2024.
In 2018, Millennials accounted for 42% of all furniture and bedding purchases in the United States. (while 30% are Baby Boomers and 40% are Gen Xers)
In a research survey done by LeapFrogg, it shows that 9 out of 10 will shop a site that contains specific price information.
The AR market is projected to be worth over $18 billion in 2023.
In a research from 2019, it shows that over 45% of consumers would prefer buying at a retail that provided AR experiences
Market Research
After having a better understanding of the furniture business, I moved on to conducting a competitive analysis to see the strengths and weaknesses of different brands and businesses. I analyzed 3 direct and 1 indirect competitors by writing out some of their strengths and weaknesses.
Competitive Analysis
After finishing the competitive analysis document, I created 3 hypothetical provisional personas to help me identify the demographics for potential users I can recruit to conduct user interview with. Then I followed by creating an Interview script document to fully prepare myself with the necessary information in order to recruit participants and conduct user interviews.
I was able to conduct interview with 4 participants regarding their furniture shopping experiences. Most of the questions were open-ended questions that encourage the participants to share their stories. By the end of the interview, I was able to collect qualitative data which I can later synthesize.
(Click here to see interview research notes)
User Interview
After conducting interviews, I created an empathy map to synthesize the data collected from the interviews. I pulled out the following 3 insights to match 3 needs from the empathy map to help me have a better understanding on what goes on in the mind of an actual customer.
Many users usually look at the design and aesthetics of the furniture first when shopping, therefore they need to see an accurate image of the product
Some users depend highly on reviews to help them decide on their purchase , therefore they need a reliable customer’s review section
Many users compare prices to make sure they get the best deal, therefore they need to know they can find the best deal through comparing prices or other functions
Empathy Map
Based on the data that I collected from my previous research methods, I then created a user persona to serve as a model for viewers and stakeholders to reflect back on.
User Persona
Define
POV & HMW • Brainstorming • Project Goals
App Map • UI Requirements • Task & User Flows
I started this stage by creating a POV statements & HMW questions document in order to smoothly connect us from the last stage to this one. The main focus here is to use the insights and needs pulled from the empathy map to create 3 POV statements that helps us better understand the user’s situation. Then with the statements, I created corresponding “How Might We” questions to state the problem.
POV & HMW
After creating three HMW questions, I executed a quick brainstorming activity in order to help me generate potential ideas for solutions. For this brainstorming activity, I wrote down as many ideas as I could think of within 2 minutes every round ( two rounds for each question ). Afterwards, I was able to generate a list of ideas that could be potential solutions.
(click here to view brainstorming document)
Brainstorming
The next step was to create a document highlighting business, user, and technical goals. By looking at where goals overlap each other, I have a better understanding of how to prioritize my design.
Project Goals
After having a better understanding of what goals I should be focused on, I moved on to creating a app map document which helps give a clear idea how how the structure of the app would look on a high level.
App Map
I followed by creating a UI Requirements document that includes some tasks, screens to design, and some high-level and detailed requirements I would need to focus on when designing the screens.
UI Requirements
After creating the a sitemap and UI requirements document, I created one user flow and one task flow to illustrate how a user finishes each task. This is a crucial step in this process because it helps us understand not only what the user’s actions are, but also what the user is thinking about.
The following is one of the 4 user flows which shows the direct path and the actions needed in order to complete each task along with some decision making within the process.
User & Task Flows
Ideation
Product Roadmap • Low-Fidelity Wireframes • Mid-Fidelity Wireframes
Mid-Fidelity Prototype • Usability Test • Affinity Map
Logo Design & Branding • High-Fidelity Wireframes
The first step in the ideation stage was to create a product roadmap in order to prioritize the necessary features and provide us a better idea of what each feature does. For example, I need to make sure I include large image of products, filtering function, and a clear reviews section.
Product Roadmap
With a clear idea of the structure and essential features required with in the website, I moved on to creating my first set of low-fidelity wireframes by sketching. While sketching out different ideas, I kept in mind the goals and frustrations that “Curtis” had from my user persona.
(click here to view low-fidelity sketches)
Sketches
After sketching out the first set of wireframes and having a better idea of how each screen should look, I created a set of mid-fidelity wireframes to further show how I want my designs to look like. I created screens from the home screen, search screen, categories screen, product screen, and AR screen. This allowed me to have a better idea of how the visual hierarchy, element sizing and spacing, and what the overall flow would look before adding details.
Mid-Fidelity Wireframes
Before moving on to creating our brand style tile, we plan on running a usability test. In order to do so, I must create a simple prototype with the mid-fidelity wireframes created from the previous stage.
I used Figma’s built in prototype tool to create this prototype which focuses on letting users be able to complete the different tasks.
(click here to view mid-fidelity prototype)
Mid-Fidelity Prototype
After creating a working prototype, I created a usability test plan and successfully found 4 participants who were willing to help me test things out. Each person was given the 5 tasks created from the previous stages. As my participants ran through the test, I made sure they spoke out each and every action they took in order for me to takes note and look back on them.
(click here to see full test findings notes)
Usability Test
After gathering all the data from the usability test, I synthesized the test findings by creating an affinity map. Similar to the empathy map from the earlier stages, the affinity map allows me to find important patterns through the user’s behaviors, actions, comments, and feedback.
(click here to see full affinity map notes)
Affinity Map
After running the usability tests and synthesizing the data by creating an Affinity Map, I made some minor updates to my wireframes based on the insights drawn from the Affinity Map. These updates include: 1. Changing the layout of the home screen to make it less confusing for users to browse, 2. Adding one more AR screen to make the feature feel more usable, and 3. some slight changes in design elements to make the whole app look more modern.
Wireframe Updates
Moving forward after creating wireframes and conducting usability test, I begin my process of creating a brand style tile which includes the logo, colors, typography, and other elements I intend to use for this design. But before actually designing the logo, I created a mood board using Pinterest to gather inspiration from different images.
After having a better understand of how I want my website to look in terms of imagery, color, and typography, I started the logo designing process by listing out the brand attributes which are: excitement, warmth, minimalist, and modern. I created a simple and modern logo that clearly represents the brand attributes. Then I created a brand style tile that includes the website’s color palette, typography, imagery, and other elements.
(click here to view logo sketches)
Logo Design & Branding
Brand Style Tile
After identifying the brand’s style and elements, I moved on to designing high-fidelity wireframes by implementing the brand logo, color, typography and imagery on to the screens.
(click here to view all hi-fidelity screens)
High-Fidelity Wireframes
After creating the high-fidelity wireframes, it is important for us to make sure things will function correctly. Therefore, for the last part of this project, I created a high-fidelity prototype with the wireframes created previously.
High-Fidelity Prototype
Although this is a project solely for educational purpose, it would only make sense if I conducted usability testing for the high-fidelity prototype in order to collect more data and insights from actual users. This would help me further understand where I can improve in order to make this into a better application.
Next Steps
This project has definitely left a great impact for me, mainly because furniture isn’t something that I was familiar with or fascinated by. So being able to commit myself into doing research to coming up with designs really helped build my confidence as a designer. A few highlights of this project include: 1. Understanding user behavior through conducting interviews 2. Creating brand attributes and actually implementing them in design
Reflection