Spoak Interior Design Studio
Focus
UI/UX Design
Prototyping
Developer Handoff
Tools
Figma
Team
Me: Designer
Cal WDB Project Team
Spoak Executive Team
Timeline
Feb 2023 - May 2023
Overview

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 Task

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 flow that allows users to upload and manipulate their own images before entering the "Viz Studio" (their current product offering virtual paint jobs, furniture swaps, etc.). After designing 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 flow. 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.

Introducing a new customization flow.

Structure Mapping

AI will automatically map out structures such as walls, floors, and ceilings. The user can then make adjustments by dragging the corners.

Object Labeling

AI will automatically detect and label various objects in the photo. The user can then re-label objects as necessary.

Magic Eraser

Users can choose specific objects to show/hide before proceeding to the Viz Studio, and the magic eraser will fill in the background of any hidden objects.

Reflection

I really loved all the creative freedom that came with the customization flow 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, 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! 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!