WSI Room Planner Feature
UX Designer
Outward, Inc (Williams-Sonoma, Inc)
San Jose, CA
December 2019 – January 2020
(1 month)
Outward, Inc designed and hosts this platform called Room Planner, which is a new interactive desktop tool makes it easy to furnish and decorate every room in the house. This platform allows Design Crew Members and customers to create floor plans while shopping for furniture from Williams-Sonoma, West Elm, Pottery Barn, Pottery Barn Kids & Teen.
🤝 Team:
Front End Developer
🛠️ Tools:
Sketch, Adobe Illustrator, Draw.Io, Gallery, InVision, JIRA
Project Quick Links
Problem
Outward is to improve the user experience for the room building functionality. Currently, the user presents 6 default room shapes that can be adjusted by adding, deleting, dragging lines, duplicating, or adjusting the overall width and length values; however, this process can be very time-consuming.
My task is to examine how we might improve existing functionality or introduce new functionality to provide a more efficient experience creating floor plans, all while taking into consideration of current engineering restrictions or pain points.
Project Brief
Before getting my hands dirty with designing and ideating, I took a step back and analyzed and established some of our business requirements and design goals. By creating this document of information, I was able to revisit this brief whenever I was stuck on ideating design variations.
When creating this document, I spoke with cross-functional teams to better understand how my project will be handed off to engineering. By understanding how implementation works, I can better design variations that fit within our reach.
NGP Summary
Business Needs:
Primary: WSI is trying to simplify the efforts for designers from Design Crew when designing highly custom room shapes for their clients
Secondary: Outward needs to create 2 approaches to improve the functionality and customization variety of room building
Feature Goals:
Primary: Revise existing room building features to allow for more efficient and varied customization
Secondary: Implementing new room building features without overcomplicating functions and icons
Design Principles:
Avoid Oversimplifying. Strive for simplicity while retaining the value and information credibility.
Add value, not features. Reduce extraneous clicks or steps to convert users with minimal effort. Design features that communicate functionality while educating the user.
UVP Statement:
Simple templates and tools for building a room to get you faster to designing your room.
Solution
Approach One: Adding new content or controls that allow users
to modify pre-selected room shapes
Approach Two: Cut short due to Covid-19 layoffs
User Stories
User Flow
Approach One
In the following two sketches, I was very intent on incorporating Approach One and Two at the same time; however, due to our constraints in time and technical expertise at the moment, we could only think about Approach One. Some of my solutions included rotating existing room shapes as we rotate furniture pieces either within the canvas or using buttons in the drawer.
After speaking with engineering, I found out that there would be trouble implementing a rotating feature because room shapes rotate differently than furniture pieces. Room shapes are created by points on a grid, so the code for calculating to rotate a series of points did not exist yet. Because of that complication, I created another solution to just add more room shapes to the Build Panel. These room shapes will just be a mirror version of the existing selections. We will be going from 6 room shapes to 10 room shapes.
Final Mockups
Below is a mockup that demonstrates the new features for Approach 1:
(1) Adding 4 more room shapes to the build panel
(2) Rotating Icons to the room shape.
Engineering Documentation
Once the mockups have been approved, I created Jira Tickets and carefully outlined any UI Specifications, flow/behavior, and naming conventions to enable a smoother implementation.
I also linked all assets required, so engineering and testing can directly access this ticket and find all the information in one place.
Approach Two
Unfortunately, due to COVID-19, our company went through restructuring and reorganization, and I was laid off before completing this portion.
Click the button to access the Design Crew Room Planner to see my room shapes addition! You may have to create a Williams-Sonoma account and password that applies to all WSI related brands.
Approach One
4 extra room shapes (live)
Rotate room shapes (next release?)
Approach Two
In the works (by another designer)
What I learned…
As a resourceful team member:
Taking the initiative to get things running. Since this project required quick solutions, it was important for me to reach out to developers directly to discuss the best possible solution.
Document my process on those projects. Many things are happening in the office at all times, so it is important to create a log on design processes incase another designer is curious about progress or picking up the project.
As a good designer:
Good user experience does not mean giving the user more options. Through conversations with my manager, it sounded like the fastest solution was creating a series of buttons to allow the user to interact with existing room shapes. However, adding all that clutter would only confuse the user, especially because this room planner tool is already quite new in the industry.
Collaboration with developers can save time. I worked side by side with the developer assigned to this project to come up with 2 solutions: one low effort and one high effort, but both high impact. We implemented one approach and put the other approach back in the pipeline for another day.