The idea for an interior design app came from my staring for hours at the walls of my NYC studio apartment trying to figure out how to better organize it. And wishing I had someone to ask beside Pinterest.
Goal: Provide tailored and affordable interior design solutions to apartment and other small-space dwellers (micro-apartments to 1000sq ft), initially focusing on urban areas.
Role: User research, information architecture, low- to high-fidelity wireframing, prototyping, usability testing.
Tools: Paper & pencil, Adobe XD, InVision, OptimalSort, UsabilityHub, Reflector 3, QuickTime.
Timeframe: Jan 2019 - Sept 2019
Effectively building an app from the ground up meant utilizing a user-centered design process of discovery, concepting, prototyping, and user testing to determine pain points and a potential solution.
Then an iterative process using feedback received from usability test participants and design peers, helped refine APT Rx’s design.
The first step was conducting a competitive analysis on two popular online interior design services, Decorist and Havenly. The SWOT analysis revealed that while both offered tiered pricing for affordability, neither specialized in small-space/apartment dwellers and only Havenly has an app (iOS only). This indicated a large opportunity for APT Rx to offer a competitive service.
Our target audience is 25-44 year old apartment-dwellers in major metropolitan areas. Anyone younger than 25 is probably still trying to adjust to life outside of college and may not want to spend any disposable income on interior design services. Those mid-40s and older may not have interest in using an app to receive professional services.
With a problem statement in mind, I wanted to find out how potential users discovered ideas and advice. I ran a Google Forms survey with 24 participants to gauge interest in asking a designer a specific one-off question versus working with a designer on a project. I also wanted to better understanding the issues apartment-dwellers have, so I conducted 3 user-interviews to learn about their pain points decorating while living in a dense, urban environment.
- 25-44 year olds preferred (66.7%) to ask a quick design question versus working directly with an interior designer on a project.
- 35-44 year olds had greater interest to work directly with a designer. Also it would be important the designer be able to see their space.
- APT Rx needed to have three main features: asking a design question, starting a project, and video chat.
User Personas, Journeys and Flows
I created two personas, their user journeys and task flows to potential users and to act as a guide to designing a better experience for them.
Open Card Sorting
After creating an initial site map, I conducted an 8 persona open card sort on OptimalSort to validate APT Rx’s navigation.
- One match with original site map and results, Advice.
- The Similarity Matrix clarified relationships between categories and what content to put in each. The original site map Account includes My Projects. Revised map excludes My Projects.
- Site map was revised according to the Similarity Matrix.
Seeing how varied the participant groupings were was quite interesting, particularly when groups would be named similarly. When I tried to standardize them, agreement would be low. For example, Advice and Ask a Designer, when combined generally as Advice, was at 68% agreement. But adding Get Advice lowered it to 47%. While the participant group was low (8 people), this still illustrates how people organize and understand things differently.
Low- to Mid-fidelity Wireframes
Then I began ideating, quickly sketching out possible iterations to see what would work, keeping mobile-first design in mind. After selecting my favorite ones, I used Adobe XD to create mid-fidelity versions that allowed me to build out the design.
Developing mid-fidelity wireframes was helpful to better visualize the layout and flow to complete a task. I was also able to address some potential usability issues prior to testing. For example, in both the Advice hand-drawn and first mid-fidelity wireframes, the search bar was buried under an image. In subsequent iterations, I placed it at the top, standard for where users expect to see one.
PROTOTYPE & TEST
Prototype & Usability Testing
With the mid-fidelity wireframes built and an InVision digital prototype created, it was time to finally test APT Rx’s design for usability and user satisfaction.
Identifying participants and scheduling were the biggest challenges. I was able to confirm 6 NYC-based participants within the target age range and of varying decorating interest and experience.
Over 5 days I ran moderated, in-person usability tests with three tasks: ask a design question, book a design package and schedule a video chat with their designer. The usability test script is here.
Using a combo of Reflector 3 and Quicktime, the usability tests were recorded picture-in-picture to document both participant reactions and on-screen movements.
Through testing, it was obvious that users think differently from me. Every cringe I had when someone became confused or couldn’t quickly figure out how to do something, was actually a positive; it meant an opportunity for improvement.
With usability testing complete, it was affinity map time again! Observations, errors and quotes were categorized. Duplicate observations and errors for multiple participants were consolidated into a single sticky note indicating which participants experienced this.
The main takeaways were:
It was easy to start the process of asking a design question and booking a design package.
The payment flow was straightforward.
When a task is completed, users want to know what the next step is - “I booked a guy to help me…is he now working on my project?”
If users are paying for something, what exactly comes with it and the price should be clear.
Each app page in a task flow should have an obvious way to move forward.
The most severe usability errors are below and the prototype updated accordingly.
Issue 1: No Submit button on Keyboard screen (High)
Evidence: 4 participants expected to see a Submit button and were confused how to proceed with the task with only a Back button visible.
Iteration: Add Submit/Next button then delete next screen (same screen but w/o keyboard).
“Why would I want to go back? I want to submit my question.”
The Home page design felt off and two participants validated that.
Most participants completed the tasks via the menu, so it wasn’t a usability issue per se. However, this opened the possibility of streamlining Home, thus reducing cognitive load and meeting expectations of a clean and simple mobile app UI.
Two images were presented to 24 participants via UsabilityHub. (Note: images were also added - the usability test prototype only had place holders.)
- 79% favored the revised version and is 99% likely to be statistically significant.
- Participants felt the revised design is cleaner and less cluttered, “…an easier way to scan the content.”
ITERATE & REFINE
After revising the Home page and implementing smaller updates based on the feedback and portfolio review (ex. removed the “Back” CTA button and replaced the logo with a back arrow), the next big phase of iteration was conversion from mid to high-fidelity. Colors, fonts and images were chosen. Using a responsive grid system and incorporating a combination of Gestalt properties, Principles of Design, iOS Human Interface Guidelines and Material Design, APT Rx’s UI took a big leap forward to being visually pleasing.
Peer Design Collaboration
The peer design collaboration phase provided valuable insight into refining the design. My peers were able to highlight additional usability issues and pointed out ways to further simplify the UI. One usability issue noted was the sample Advice question. It was unclear who was asking the question (was it from other users?) and who submitted the photo.
This was incredible feedback since I assumed it was clear that a user asked the question and the picture was part of the designer’s answer. It was also valuable because it wasn’t an issue brought up in usability testing.
The design has evolved again for accessibility including meeting WCAG 2.1 color contrast standards.
User Flow Refinement
Initially, a small fee would be charged to ask a design question but changed that feature to be free as an incentive to “try” APT Rx’s service. While asking a question is free, before submitting their question, users would be given an “upsell” option of video chatting (small fee) instead.
APT Rx’s design language will ensure UI consistency across iterations. The complete language is here - Design Language.
Through prototyping and testing, I’ve learned to refine a design quickly. For apps in development like APT Rx, iterations based on testing can be made BEFORE going to market, avoiding potential costly changes in the future and possible user aggravation (users are accustomed to how an app works and become upset at changes).
Testing made it clear that as a designer, I need to keep the end user in mind - to design for them not you. Both usability testing and the peer review showed that not everyone thinks like you and that clarity through good design is paramount.
One challenge I faced was spending too much time making wireframes pixel-perfect. While attention to deal and perfection are important, it shouldn’t come at the expense of an on-time deliverable. I’m learning to get projects done but not perfect, knowing they will be iterated upon.
In retrospect, APT Rx’s design could’ve been streamlined to one major offering - asking a design question - and exploring two secondary ones (video chatting and messaging). Being able to ask a question and video chatting fulfilled two needs uncovered during user research. Focusing on these three initially might have allowed perfecting that user experience. I included a second major feature - booking a package with a designer - both as a business move (revenue-generation) and to specifically address the needs of 35-44 year olds. This group preferred to work directly with a designer. In the end though, I believe having both options addresses the overall needs of my personas Claire and Lizzie.
APT Rx’s design will continue to evolve with user testing and iteration. The now free ask a design question and added upsell option would need to go through user testing.
Future plans include implementing an AR feature to enhance the user experience.
Check out the digital prototype - APT Rx Prototype
Watch the APT Rx demo below