What is Spoak?
Spoak is an online interior design platform for both design enthusiasts and professionals. To help users bring their dream space to life, they offer features such as mood boards, floor layout planning, and room mockups. Built exclusively for interior design, Spoak's web app has all the tools necessary for visualizing and planning projects, and requires no previous experience with photoshop or CAD.
The Ask
To make their product more customizable, Spoak hoped to implement a feature for users to upload a photo of their own room as the base image for interior design changes. Our task was to design and build a feature that allows users to upload and manipulate their own images before entering the "Viz Studio" (their current product, which offers digital paint jobs, drag-and-drop furniture, etc.). While we designed the prototype, the developers' main tasks were to build object mapping capabilities and a magic eraser.
My Role
As a product designer, I worked on conducting user research, creating the user flow, and designing the prototype for the customization feature. After creating the prototype, I handed it off to our developers and made any updates or changes as necessary. At the end of the semester, we presented a demo of the built-out product to members of the Spoak executive team in a final deliverable.
HMW
After understanding the task given by our points of contact at Spoak, we started our project by asking:
User Research
Why a “dash?”
Since this project involved both design and development, our team of 3 product designers needed to hand off our final designs as soon as possible to ensure that the engineers had enough time to develop everything. We decided to conduct a “dash” of research - enough to understand the needs and desires of Spoak’s users, but not too much that it would impact our team’s handoff timeline.
User Interviews
To gather insights on how users interact with their physical space and with digital platforms, we conduced user interviews to uncover the needs, desires, behaviors, and habits of Spoak’s user base. We split our questions into 2 main sections:
Interior Design (Physical)
UI/UX (Digital)
Overall user needs
So, what did we find?
After conducting all of our user interviews, we created an affinity map to organize our findings and to note down various quotes from our interviewees. Through this, we found 3 key insights (keep scrolling!).
Synthesis
Key Insights
After completing our research and affinity mapping, we synthesized our findings into 3 key insights:
Key Insight 1
Space Allocation
Users need a clear way to visualize how future furniture can physically fit in their space with existing pieces.
Key Insight 2
Room Aesthetics
Users need an easy way to play around with the placement of various items to ensure visually appealing arrangements.
Key Insight 3
Creative Freedom & Editing
Users value creative freedom and ease of use, emphasizing their desire for intuitive editing and re-editing.
Meet Jordan
To further synthesize the information gained through our interviews, we created a user persona from our key insights. By highlighting Jordan’s background, goals, frustrations, needs, and current visualization apps, we aimed to understand the Spoak user more holistically.
User Journey Map
As our last step before ideation, we created a user journey map to visualize the user’s experience throughout each step of the interior design process, both currently and in an “ideal” world. In doing so, we were able to see which steps of the interior design process had the largest gap and needed the most attention as we began designing the new customization flow.
Ideation
Making the Flow
Before starting to design wireframes, we first needed to map out the various touch points a user would interact with. In deciding which pages and decisions users would encounter, we communicated with the developers to understand the abilities and limitations of their AI code (magic eraser, object labeling, etc. — but we’ll get into that later!) and with the clients to figure out how our features would integrate into their existing Viz studio. The flow for "entering text" is crossed out here because this is where us designers split up - I worked on the uploading image route!
Low-fi Wireframes
With that, we began designing initial wireframes and mid-fidelity pages! At this point of the project, our developers were sharing and discussing various methods of implementing the AI-backed image manipulation features, but since a final approach was still in the works, we made sure our wireframes were in a goldilocks zone - detailed enough to clearly articulate the purpose and interactions of each page, but general enough to be later tailored to the limitations and advantages of whichever approach they ultimately picked.
What’s the issue?
With so much information presented and user interaction needed on the customization page, we needed to figure out a clear way to communicate the steps and possibilities of the platform. Some questions we asked were: should each step have its own page? How should the user correct the AI if its labelling mechanism has made an error? Should the user start with an empty room? How do we present the labels and mapping?
With these in mind, we designed 4 variations of the customization flow - a screenshot from each is shown below.
The “Choose Your Path”
The “Two-In-One”
The “Start from Scratch”
The “Guided Steps”
Pugh Chart
To help us determine which iteration was most effective and user-friendly, we evaluated each one through 4 criteria: ease of editing, consistency with main use cases, intuitive user flow, and friendly UI. Shown below is a summary of our findings - we can see that the "Guided Steps" approach was the clear winner!
.
Ease of Editing?
Fits Use Cases?
Intuitive Flow?
Friendly UI?
The “Choose Your Path”
The “Two-In-One”
The “Start From Scratch”
The “Guided Steps”
What is second nature to users?
Since the product of an AI-backed interior design studio is relatively new to the industry and to most users, we wanted to incorporate elements of familiarity throughout the user flow to make the interface both clear and intuitive. We conducted UX competitor analysis (Figma, Photoshop, & Procreate) to understand what core functionalities users are familiar with on existing platforms. Then, we also examined common entertainment and educational platforms (Apple Notes, Gradescope, & Spotify) to uncover any subtle UI/UX features that are second nature to most users.
Figma
Photoshop
Procreate
Apple Notes
Gradescope
Spotify
One of our key findings through this process was the incorporation of layers: across all competitors, layers were included as a way of organizing information and allowing users to show and hide certain objects. We also noticed a consistent manner of information organization, where an item title is on the left (“Layer 1” or “Song Name”) and its status (“show/hide” or “duration”) is on its right. In ideating various approaches to structure mapping (walls & ceilings) , we also noticed Apple Notes’ feature of allowing users to drag corners and edit existing object mappings.
Prototyping
Mid-fidelity Designs
Taking all of the above into consideration, I designed a solidified mid-fidelity mockup of each page, ranging from route selection to the handoff into Spoak’s existing Viz Studio.
Route Selection
Improved integration to current Viz Studio by turning selection page into pop up.
Turned selection options into drop down as it is a more familiar format among users.
Ensured consistent iconography by utilizing existing Spoak components as basis for new icons.
Structure Mapping
Added a progress bar to give users clarity on the flow and their progress.
Drew inspiration from the Apple Notes app to ensure feature familiarity and intuitiveness.
Added a magnified view to improve ease of editing when adjusting wall/ceiling mappings.
Furniture/Object Mapping
Allows users to make edits to AI-generated furniture labels.
Numbers and hover states on the left column align with the furniture itself for increased clarity.
Kept labelling page separate from magic eraser to avoid overwhelming users with info & choices.
Images shared by our engineers, showing us how the structure/object mapping code worked!
I really loved all the creative freedom that came with the customization feature and the whole process of brainstorming different ways to visually communicate each step of the process. I also had so much fun practicing more of Figma's component and prototyping features (one of my favorite prototyping learnings of this project was figuring out how to animate letter-by-letter!), and designing different versions of each page to visualize different user experiences. In working with developers, it was so interesting to watch the prototype being built out step by step - one of my favorite moments from our team meetings was seeing the developers give a demo of how the object mapping code worked, and how it was able to produce labels for each object! If given more time, I’d incorporate more methods of user research such as contextual inquiry or a user survey to further learn about user behavior when it comes to interior design, and I'd also conduct usability testing on the final prototype.
Outside of the technical details, I also had so much fun getting to know everyone on our team, whether it was through our weekly meetings or our star-gazing, Golden-Gate-sight-seeing social!
Team Spoak in San Francisco!
