|
Demystifying Interior Design
Designing a tablet-friendly app to simplify interior design for beginners
UX/UI Design | UX Research | Wireframe | Prototype | Testing |
|
Background
This case study presents a beginner-friendly interior design app developed in response to post-pandemic interest in home improvement.
It offers an accessible, educational platform for non-professionals, addressing the lack of formal design education and helping enthusiasts effectively use technology to plan and organize their home designs. |
|
Secondary Research
The secondary research for the interior design app project involved gathering existing knowledge and insights related to the interior design market, user behaviors, and technological trends from various sources such as published articles, industry reports, and academic studies.
This information was systematically organized and analyzed to extract valuable insights relevant to the project, including anticipated user demands, technological barriers, and current user pain points. Below were the main insights from the secondary research:
This information was systematically organized and analyzed to extract valuable insights relevant to the project, including anticipated user demands, technological barriers, and current user pain points. Below were the main insights from the secondary research:
Growing Interest
Social media and e-learning contribute to a rising interest in interior design among non-professionals, amplified by the surge in DIY culture during the pandemic.
|
Financial Growth
Anticipated demand in design services, consumer goods, and software indicates significant investment opportunities, particularly evident in the booming home improvement sales and DIY projects.
|
Advanced Technology
AI, AR, and VR are transforming interior design, emphasizing personalization and sustainability, while the rise of DIY culture underscores the need for accessible technology innovations, especially in apps featuring 3D visualization.
|
Brick-and-Mortar Prevails
Despite technological advancements, brick-and-mortar stores remain preferred for in-person shopping experiences, indicating their enduring relevance in the retail landscape.
|
|
Screen Survey
To identify relevant participants for user research, we needed to create a screener survey—a concise questionnaire designed to filter individuals meeting specific research criteria.
The purpose was to assess eligibility based on recent engagement in furnishing or designing spaces, interest in interior design, frequent shopping for home goods, employment status, ownership of smart technology devices, and daily technology use. |
|
User Interviews
|
|
We utilized user interviews as our qualitative research method to gain insights into users’ perspectives, behaviors, and needs related to interior design.
I conducted 5 user interviews through virtual one-on-one video calls, employing open-ended questions to encourage participants to share their thoughts and provide valuable qualitative insights. The purpose of these interviews was to achieve a deeper understanding of users' motivations, goals, behaviors and pain points they experience throughout the design process. |
Affinity Map
To organize qualitative research data from user interviews, I created an affinity map, a visual tool for categorizing insights and identifying patterns. This involved inputting observations and data onto virtual sticky notes, grouping related content, and labeling common themes. The map was then analyzed to distill information into actionable insights, aiming to synthesize research findings for informed design decisions that prioritize user needs.
I narrowed the notable takeaways to the following:
I narrowed the notable takeaways to the following:
(Click image to view)
|
→
|
|
Empathy Map
To empathize with users, I utilized an Empathy Map, a visual tool to understand their feelings, thoughts, actions, and motivations, guiding design decisions for our target audience. Creating the map involved dividing it into quadrants labeled "Say," "Think," "Do," and "Feel," with data from user interviews populating each section. The purpose of creating the empathy map was to compile real user experiences in initiating an interior design process, whether for the first time or as a recurring endeavor.
Below were the main insights I took upon creating an Empathy Map:
Below were the main insights I took upon creating an Empathy Map:
(Click to view image)
|
→
|
|
JTBD (Jobs-To-Be-Done)
To begin the brainstorming, a “Jobs to be Done” (JTBD) framework that focuses on the fundamental reason why consumers would use an interior design app and what task would need to be accomplished to make the app valuable. Below is a condensed version of the JTBD framework that I concluded with:
|
|
|
Based on this framework, I summarized the essential factors that users need in order to complete their jobs:
|
|
How Might We (HMW) Statements
|
Before formulating the HMW statements, I compiled users' pain points from qualitative research. Following this, I developed 3 questions to refine the focus of the issues as follows:
Using "How might we..." followed by a problem and solution ensures relevant, audience-focused ideas. This approach encourages generating unique, actionable insights tailored to the target audience rather than organizational or product perspectives. |
User Persona
After finalizing the problem statements, I crafted a user story to humanize the end user's perspective, encapsulating their frustrations, expectations, and goals representing the app’s ideal audience. Using a template, I outlined basic details, a short biography, technology behavior, and digital usage.
Utilizing notes from qualitative research, I categorized insights into Interests, Fears, Goals, Needs and Expectations, Motivations, and Pain Points.
Utilizing notes from qualitative research, I categorized insights into Interests, Fears, Goals, Needs and Expectations, Motivations, and Pain Points.
|
Emily Tang "The Learner"
I recently bought my first single-family home and am excited to design a space with my husband and our active, shedding dog. Having always lived with others, this is my first chance to create a home for hosting gatherings, while ensuring pet-friendly options.
I use Instagram, TikTok, and Pinterest for home decor inspiration and enjoy online shopping. I'm still discovering my interior design style and aim to find affordable items that fit my aesthetic. |
(Click to view image)
User Flows
In order to create a visual representation of the journey the user will take to accomplish their task, I created three user red routes that are essential in solving the problems that most users’ face. The user flow encompassed the users’ initial entry, the steps (decisions, interactions, or inputs) that they take, routes, and the end.
|
Vision Board Task
Users create, edit, and shop on a collage-style interior design board
(Click to view image)
|
Budget Task
Create a budget sheet that includes graph and editing toolbar
(Click to view image)
|
Bookmark Flow
Save, filter, and organize website links, images, and files in folders
(Click to view image)
|
Sketches
To initiate the design brainstorming for the user flow, I sketched on white paper using pencil, pen, and highlighter for notes. These sketches helped identify the most crucial and streamlined user pathways to complete tasks. They facilitated the raw generation of ideas and visualized the user interface for tablet view, prioritizing core issues.
Designing the Vision Board
(Click image to view)
Product Panel on Vision Board
(Click image to view)
Insights:
- Consistency is crucial for the user experience, given the app's creative nature.
- Multiple editing tools in each user route increase complexity.
- Real estate for displaying editing options must be carefully considered.
Wireframes
After sketching, I created three digital wireframes to define layout, content, and functionality clearly, maintaining a low-fidelity design. Using Figma, these wireframes illustrated functional aspects and user interactions in grayscale. This process helped clarify the content layout, interactions, and task completion visuals for the end user.
(Click to view image)
|
Budget Sheet
(Click to view image)
|
Bookmark
(Click to view image)
|
Wireflows
After completing the digital wireframes and user flows, I created wireflows to present a comprehensive view of the app's user journey. This included illustrating layout and interaction flow to demonstrate how users engage with each route, incorporating hand gestures, screen navigation, and page feedback. The wireflows specifically highlighted the complexity of the creative customization flow inherent in the dynamic app, emphasizing its gesture-heavy nature and the need for clear capture of all details.
(Click to view image)
Brand
|
To define overall company image of the app, a lightweight brand platform was created. Below is a brief summary of the brand profile:
Company name After some brainstorming and utilizing the qualitative user research, I chose the word “Sanbo” as the company name, which is short version of the word “sandbox” to represent creative open play. Mission Sanbo’s mission is to make an interior design toolset that is simple, playful, and approachable to everyone. We want everyone to feel delighted, inspired, and organized in their process of making spaces feel like home. |
|
Moodboard
I created a moodboard, a visual collage featuring images, color palettes, and design elements, to convey the app's personality. Organizing images into four categories—Illustrations, Photography, Color Palettes, and User Interface—I noted key elements from each.
The mood board brought the brand concept to life and visualized the potential user experience with these elements. Initially, the color palette was vibrant and bold, but after feedback, I adjusted it to avoid overwhelming users and maintain focus on the app's main purpose.
The mood board brought the brand concept to life and visualized the potential user experience with these elements. Initially, the color palette was vibrant and bold, but after feedback, I adjusted it to avoid overwhelming users and maintain focus on the app's main purpose.
Style Guide
I created a moodboard, a visual collage featuring images, color palettes, and design elements, to convey the app's personality. Organizing images into four categories—Illustrations, Photography, Color Palettes, and User Interface—I noted key elements from each.
The mood board brought the brand concept to life and visualized the potential user experience with these elements. Initially, the color palette was vibrant and bold, but after feedback, I adjusted it to avoid overwhelming users and maintain focus on the app's main purpose.
The mood board brought the brand concept to life and visualized the potential user experience with these elements. Initially, the color palette was vibrant and bold, but after feedback, I adjusted it to avoid overwhelming users and maintain focus on the app's main purpose.
High-Fidelity Mock-Up
The next phase involved creating high-fidelity mockups to represent the polished version of the app, incorporating colors, typography, imagery, iconography, and user interaction.
Before designing, I gathered wireframes, the user story, research findings, and brand guidelines. Mockups were crafted in Figma for three user flows: Vision Board, Budget, and Bookmark, with unique icons designed as components for brand consistency.
Colors and layouts were assessed for visual hierarchy, alignment, contrast, and accessibility. High-fidelity mockups played a crucial role in refining initial sketches and wireframes, enabling clearer communication and multiple iterations to enhance user experience.
Notable changes included adding a dashboard for easy navigation, simplifying the budget layout to accommodate beginners, and shifting emphasis in the Vision Board to address user time constraints by presenting a catalog-style panel of products.
Before designing, I gathered wireframes, the user story, research findings, and brand guidelines. Mockups were crafted in Figma for three user flows: Vision Board, Budget, and Bookmark, with unique icons designed as components for brand consistency.
Colors and layouts were assessed for visual hierarchy, alignment, contrast, and accessibility. High-fidelity mockups played a crucial role in refining initial sketches and wireframes, enabling clearer communication and multiple iterations to enhance user experience.
Notable changes included adding a dashboard for easy navigation, simplifying the budget layout to accommodate beginners, and shifting emphasis in the Vision Board to address user time constraints by presenting a catalog-style panel of products.
Home Page
(Empty State)
(Empty State)
Home Page
(Partially Complete State)
(Partially Complete State)
High-Fidelity Prototype
Once the high-fidelity mock-ups were done, I proceeded with creating the prototype to progress into the testing phase. The prototype was created to closely resemble the final vision of the app including the visuals, the interactions, and the functionality.
The prototype was also created in Figma while still using the same design elements from the high-fidelity mock-ups. In order to mimic how a user would accurately interact with the app, multiple screens needed to be linked together to make the navigation clear and intuitive.
Transitions were included for smooth and realistic flow. It was imperative that the prototype clearly communicated the app's functionality, encouraging various types of feedback and minimizing risk while also ensuring that the features were designed for our target audience.
The prototype was also created in Figma while still using the same design elements from the high-fidelity mock-ups. In order to mimic how a user would accurately interact with the app, multiple screens needed to be linked together to make the navigation clear and intuitive.
Transitions were included for smooth and realistic flow. It was imperative that the prototype clearly communicated the app's functionality, encouraging various types of feedback and minimizing risk while also ensuring that the features were designed for our target audience.
Usability Testing
In this phase, I proceeded to conduct 2 rounds of moderated usability testing (a total of 10 participants) in order to capture the following
|
|
|
UI Changes
Based on the test results, I included another button as an alternative choice to begin with a guided experience that involved going through a style quiz and selecting pre-designed Vision Board templates based on their quiz results.
Based on the test results, I included another button as an alternative choice to begin with a guided experience that involved going through a style quiz and selecting pre-designed Vision Board templates based on their quiz results.
After updating the prototype, I conducted the 2nd round of usability testing with the remaining 5 participants. Below were some notable highlights.
Conclusion
In conclusion, our user testing revealed several key insights that will guide the continued development of our interior design app. Users placed a higher priority on the cost of products over managing their overall finances, indicating the need for clear and upfront pricing.
Reactions to a blank budget sheet varied, with some users feeling comfortable due to familiarity while others felt intimidated, highlighting the importance of customizable and flexible budgeting tools. The varying preferences for guidance, from self-exploration to hand-holding, suggest that our app should offer both autonomous and guided experiences.
Lastly, the positive response to curated templates and a comprehensive product catalog underscores the value of providing users with easy, creative options to enhance their design process. These findings will help us create an intuitive and user-friendly app that caters to the diverse needs of our audience.
Reactions to a blank budget sheet varied, with some users feeling comfortable due to familiarity while others felt intimidated, highlighting the importance of customizable and flexible budgeting tools. The varying preferences for guidance, from self-exploration to hand-holding, suggest that our app should offer both autonomous and guided experiences.
Lastly, the positive response to curated templates and a comprehensive product catalog underscores the value of providing users with easy, creative options to enhance their design process. These findings will help us create an intuitive and user-friendly app that caters to the diverse needs of our audience.
Learnings