UX/UI Case Study
The Interior Design App is a place to plan, design and build your own projects with the option of help from an expert. This app is for anyone that wants a complete interior design experience ranging from furniture to finishes done completely through the app.
Role
UX/UI Designer
Duration
7 months
Purpose and Context
The Interior Design App is a personal project from my CareerFoundry UX design certification course.
01 Discover
• Competitive Analysis
• User Surveys
• User Interviews
• Affinity Mapping
• User Research Analysis
• Potential Features
02 Define
• User Personas
• Mental Models
• User Journeys
• User Flows
03 Develop
• Card Sort
• Site Map
• Initial Sketches
• Prototypes
• Usability Testing
• Final Feedback
04 Deliver
• Design Language
• Style Guide
• Polished Prototype
• Learnability for Memorability
• Interactive Prototype
• Retrospective
01 DISCOVER
Goals
To understand what tools will be needed to accomplish a virtual interior design project.
What kind of questions would users have along the way? Are they coming from a design point of view, an installation point of view or both?
Research Methods and Deliverables
• Competitive Analysis
• User Surveys
• User Interviews
• Affinity Mapping
• User Research Analysis
• Potential Features
Key Insight
• Interest in DIY projects
• Interest in seeking help from an expert if needed
Competitive Analysis
Havenly
Strengths:
• The ability to connect to ecommerce.
• Price match on FF+E (furniture, fixtures and equipment)
Opportunities:
• Free design advice could lead to getting projects.
• The possibility to introduce architectural products such as wallcovering and flooring.
• The ability to connect with local contractors to make the design come to life.
Weaknesses:
• Lack of strong understanding of existing space.
• The interface is not that simple, too many conflicting choices.
• Scope of projects are very minimal and really only address possible furniture options.
• There isn’t the ability to explore the app without purchasing a package.
Threats:
• A major threat is the quality of the interior designer. Many interior design apps are known to pay their designers below minimum wage. Many reviews read that this is also true for Havenly.
• There is no process of strongly understanding the current conditions of the existing space. This is one reason why connecting with a local contractor could be beneficial and could allow for greater scopes.
Decorist
Strengths:
• To purchase everything in one single checkout.
• Residential and businesses
• The ability to offer finishes.
• The option for advice on something specific such as accessories, layout or paint suggestions for free.
Opportunities:
• The ability to connect and collaborate with a professional that can execute the physical labor of installing new finishes or moving furniture around.
Weakness
• There is no way to ensure the design is actually installed properly.
Threats
• Other interior design apps such as Havenly.
• Quality of professionals
Survey Insight
After gathering data from the surveys, it was evident that there is an interest in users doing, "DIY" projects or hiring the right professional. 50% of users would want help with initial design and only 16% would already have selected finishes. Most users, 72%, would prefer to design and install themselves if they knew it was cheaper, with that said 57% still said they would want help to hire the right contractor. Users want the ability to have the option to use a professional. The majority of users want the ability to create a concept board and a floor plan. It is imperative that the app is organized in a simple sequence that relates to the project. This will ensure that the design process is not overwhelming for the client.
Interview Insight
Based on the interview results, there was a common theme of whether or not to hire a professional. A leading factor is the overwhelming design process of having to source from multiple places for products and professionals. With that said, there is opportunity to help guide users in one place.
Affinity Map
User Research Analysis
Needs/Goals:
• Home improvement projects like furniture, layout, new finishes, lighting and small tasks such as mounting a TV or patching up paint.
• To understand the sequence of a design process/DIY.
• To understand the value of doing it themselves versus a professional.
• To understand budget before committing.
• “If someone could have done some of the steps or if items were delivered I could have saved time.” YW
• “My goal was to make small improvements like finishes to our newly purchased house.” JK
• “I hired an interior designer to help me buy and customize furniture.” SK
Frustrations:
• The biggest frustrations across all users was how to go about starting a project in the most proficient way.
• Not being able to visualize.
• “Sometimes I’m not sure which DIY directions apply to my current situation.” MR
• How to organize goals and needs.
• “I get frustrated with directions that aren’t clear. I think videos would be more helpful.” YW
• “I want to redo my brick patio but I am not sure where to start”. JK
• How to utilize a floorpan.
• When is hiring a professional better then DIY.
Potential Features
Feature 1:
DIY Interior Design
The ability to create their own project and the option of receiving advice/feedback throughout the process would give the user more confidence that their project would be completed effectually.
Feature 2:
Interior Design with Designer
The ability to choose a designer to design for them entirely or partially, as well as edit the project themself.
02 DEFINE
Problem statement
Users need an app that can provide the ability to do interior design projects themselves but also with the help from an expert when needed.
Hypothesis
We believe if we provide an app that lets users create their own “do it yourself” project with help from an expert when needed, the app will be successful and set it apart.
Deliverables
• User Personas
• Mental Models
• User Journeys
• User Flows
Key Objectives:
Working with an Expert:
• To see design options from the expert
• To give feedback to an expert
• Edit the design myself
DIY Projects:
• To choose project products
• To manage project details
• To ask questions when needed
Personas
Sam \\ 27 \\ St.Louis \\ Single \\ Marketing
“As a user trying to make a decision, I want to able to see options, edit the design myself and give my feedback easily in order for me to feel comfortable with buying products and the overall design service.”
Jessica \\ 26 \\ Denver \\ Engaged \\ Physical Therapist
“As a user working on a project myself, I want to feel confident in the process by seeking project specific advice from an expert instead of scavenging the internet for an answer in order to be time and cost efficient.”
Sam: "I want to hire a designer"
Jessica: "I want design and build the project myself."
03 DEVELOP
Deliverables
• Card Sort
• Site Map
• Initial Sketches
• Prototypes
• Usability Testing
• Final Feedback
Key Focus
• Progressive Disclosure
• Understanding scope of projects on the app
Card Sort
The closed card sorting sessions had a wide range of results. In order to completely understand how the app would most benefit the user, it needs to be clear that they can insert themselves into any phase of the project, and that there is also the option to design yourself or hire a designer and then install it yourself or hire an expert. With that said, the feature to do it yourself or to hire a designer should live in harmony. It will also be important that all phases in the interior design project are easily accessible with little navigation, breaking the app into phases and then sub phases.
Site Map
The site map is broken down by 5 home navigation icons. This sitemap contains all the features you would need to create a project yourself or with a designer. The second and final phase, to build your project, would be the next phase in prototyping which would expand the features available within these 5 main navigations icons.
This site map was an ever evolving process throughout user testing and prototyping. Through user testing, I realized some sections were grouped better together than others. I learned it's important to know the participant's first instinct of where to find something is typically the best place to put it.
Interview Questions
What type of help would you seek from an expert/interior
designer while designing a space?
If you knew you could design and install something yourself for
cheaper, would you install it yourself or pay someone?
What would you need help with the most to redesign a space?
Would you create and use a concept board that illustrates a
preview of the design with inspirational images, furniture, a color
palette, etc. ?
Would you need the ability to create a floor plan to help you plan
your design?
.png)
Low-Fidelity
Prototypes
Mid-Fidelity
Mid-Fidelity
Polished Design
Project Page
The Project page was the most difficult to design because it contains the most features. During user testing, the goal was to observe how easily the user could navigate the features. Initially, almost all participants didn’t understand how to navigate the project page and the design options from their designer within it. Moving forward, the goal was to create a flow that allowed the user to easily navigate through a series of pages rather than cramming everything on one page - creating more of dashboard.
Low-Fidelity
Mid-Fidelity
Mid-Fidelity
Design Options
On the design options page, it was crucial to label everything correctly. During user testing, users were unsure what design options even meant and looked past it. Moving forward, everything needed to be labeled in a seamless sequence so it is clear there are three style options and products to choose from within these style options. It was also important to think about labels and how to make them as straightforward as possible.
Polished Design
Usability Testing
The main goals were to assess the learnability and errors made:
• How easy is it for first time users to accomplish basic tasks?
• How many errors do users make?
Final Feedback
04 DELIVER
Deliverables
• Design Language
• Style Guide
• Polished Prototype
• Learnability for Memorability
• Interactive Prototype
• Retrospective
Goals
•Highlight Content
•Colors to be settle but bold
•Happiness
Design Language
Voice and Tone
Plain English
The language of the app needs to be very clear and minimal. Instructions need to be illustrated in clear steps. These steps need to give hints at what to expect when you proceed and inspire the user to move forward.
Inspiring
The whole goal of the app is to create a project. While creating a project, users must feel inspired with colors that are bold and inspiring words that motivate them to keep going. The typography style used in the app has a wide array of font sizes and weights. The reason behind the variation is to create a subtle approach.
Visual Hierarchy
A visual hierarchy that guides the user’s eyes from the most important information to the least. What we want to achieve is to quickly jump the users mind from “seeing the text” to “grasping the text”.
Content Hierarchy
Design
Maintain cohesiveness with the design language already implemented.
Images
Primarily for project related content such as products, renderings, expert profiles and Home Page related content.
Color
The color pallet is mostly black and white and shades in-between. This is to ensure the focal point of the page is project related content.
Style Guide
Polished Prototype
Interactive Prototype
Learnability for Memorability
Key learning tactics for memorability
• Interactions & Gestures
• Progressive Disclosure
• Basic Transitions
• Animation
Search for products yourself
• A Single tap to move forward and as well as to go back.
• Swiping left is also a gesture to go back.
• Animation of product is to support branding.
Design Options
• Animation: To direct the user’s attention where they're in the process of completing their project.
Start a Project
• Color change to tell the user that they’ve successfully tapped a button.
• Tap for page transition.
• Progressive Disclosure: Steps w/ graphic to illustrate sequence.
Onboarding
• Tap for page transition.
• Onboarding to provide overview of app's capabilities.
• Animation used to direct the attention to the title.
Retrospective
Challenges
The biggest challenge, personally, was to remember to take a step back as a professional interior designer. What I might think as basic design 101, might be very complex to someone who doesn’t know anything abut interior design let alone design at all. It was important to break the steps down as much as possible. Another challenge was time management. It was important to remember that it is not necessary to reinvent the wheel. Moving forward, looking at UI elements as inspiration from the beginning, could have helped eased this process.
Final Showcase
The best feedback I got, was being able to choose how to go about the project, whether you wanted some help, no help or you needed help the entire time. I also got positive feedback on the feature where the designer you have chosen, chooses items for you, but as a user, you still have the ability to edit the design by adding or taking away products.
What went well
Initially it was hard for me to switch my perspective from a professional interior designer by day, to building an interior design app by night but in the end, this was extremely beneficial. I was hyper aware that people were not going to have the knowledge I posses as an interior designer myself. Being aware of this, I was very curious during the user research phase, I made sure I truly understood each user and their perspective . Later on, this helped me define my key features.
What didn’t go well
When I was initially building my site map, I was trying to focus on way too much. My original site map was extraordinarily too busy and had too much going on. I was overly excited about bringing my interior design world to an app, that I wanted to do it all versus focusing on a few key features. After talking with my mentor and going back through my user research, I realized I needed to approach the problem in a much more simple, user centered way.
What can be improved
The documentation of my app needs to be improved. At the end, I was so focused on the UI design, I didn’t leave enough time to put a nice portfolio page together which did not do justice to the project in the end. (this web page is the updated version!)
Next Steps Moving Forward
The "DIY" feature, where you can ask specific questions and compare the value of doing something yourself versus hiring, would be the next feature I would like to develop. Right now, the UI is designed with this being in mind that, that would be the next phase. This would require developing the subpages on the Project page.