Room Planner
Simplifying interior design for customers and professionals across Williams Sonoma brands
Role: UX/UI Designer — responsible for end-to-end design strategy, user flows, wireframes, and stakeholder collaboration.
Company: Outward, Inc. (a Williams Sonoma subsidiary)
Tools: Figma, FigJam, Jira
Timeline: Jan–Mar 2023
Team: 1 Designer, UX Manager, Sr. PM, Exec PM
Overview
Project Background
Room Planner is a virtual space planning tool that helps customers visualize furniture and layout options across Williams Sonoma brands (Pottery Barn, West Elm, etc.).
However, 40% of users abandoned the tool shortly after starting—pointing to a complex interface and lack of guidance. This redesign aimed to fix that.
Problem
User data revealed that the Room Planner had a steep learning curve, especially for first-time users. Its many features were powerful—but overwhelming.
Key pain points:
No clear entry point or journey
Disconnected features (e.g., Mood Board, Floorplan)
Navigation wasn’t intuitive
High drop-off rate post-room creation
Goal
Redesign the experience to:
Guide users through the design process
Simplify key workflows for customers and store associates (Design Crew)
Increase retention and task completion
01: RESEARCH
Objectives
Understand user goals when using the platform
Determine which features are currently working well and which need improvement
Collaborate with Project Managers to align on company goals
Maintain attention to detail while keeping the big picture in mind
Competitor Research
I began competitor research in order to understand the key features of room planning platforms.
Project Kickoff
As this project involved redesigning an existing product, I wanted to carefully navigate the process of leveraging existing product knowledge while effecting tangible, positive changes. Geared with several overarching concepts I had for the Room Planner, I met with project managers to understand their goals and timelines. Collectively, we developed a new and improved guided user journey as follows:
User Journey:
Plan: Begin with William Sonoma’s Moodboard application to ideate a style for the planning process.
Build: Create rooms according to specifications and constraints.
Furnish: Select furniture and accessories and decide on placement within the room(s).
Review: Evaluate chosen elements for style and budget.
Purchase: Add final selection to cart and proceed with purchase.
02: DEFINE
Persona
The Room Planner application has two target audiences: Williams Sonoma customers and Design Crew members. Design Crew Members are Williams Sonoma employees who work with customers to help bring their vision to life. For the first step of the redesign, I am focusing on the Design Crew Members as they account for a majority of our user group and incoming revenue. The following persona represents this user group.
Journey Map
I created a detailed journey map to understand the current user experience and identify areas for improvement. The map outlines the steps a Design Crew Member takes when working with customers along with qualitative and quantitative notes on each step of the process. With these detailed notes I determined areas that needed improvement, potential opportunities, and began optimizing each step of the journey to improve customer satisfaction.
Site Map
The next step was creating a site map. I identified key steps from the journey map and grouped them into categories with a hierarchy of information. Then I arranged the overall structure to ensure information flowed naturally through the process. Finally, I used the previously determined opportunities to insert additional features. The resulting site map provides a clear and organized representation of the website's intended structure to serve as a reference throughout the development process.
User Flow
After creating the site map, I created a user flow to visualize the steps a user takes to achieve their goal on the website. This helped me identify potential pain points and areas for improvement in the user journey. The user flow also allowed me to see the overall structure of the website and how different pages were connected. I used this information to make informed decisions about the design and functionality of the website to ensure a seamless and satisfying user experience.
03: Design
Sketches
Having outlined the essential stages of the process, I began my design by creating rough drawings. My primary objective was to ensure that users could effortlessly switch between various features.
Wireframes: V1
Next, I proceeded to create mid-fidelity wireframes. Throughout this stage, I aimed to maintain maximum consistency in the user interface. My primary focus was to enhance the user experience by introducing new features and finding solutions to current issues. I intend to address the UI updates in later phases of the design process.
To begin, I added a Mood Board to the “Get Started” page as we want to encourage users to use it more. Additionally, I added five tabs below the menu bar to emphasize the different stages of the guided design journey: Plan, Build, Furnish, Review, and Buy. This approach encourages users to move from left to right as it feels natural, but they are not limited to this sequence and can easily skip to different stages as needed.
Iteration #1
During the meeting with project managers, we discussed ways to enhance the design process. I presented my wireframes and received valuable feedback. The managers expressed appreciation for the use of tabs to enable easy navigation between features and for the approach of guiding users through the mood board and planning stages while maintaining flexibility.
One manager provided insightful data gathered from Room Planner users, revealing that 75% of plans are single-room plans. This means that most users either create a plan for a single room or create a new plan for each room in their project. The data also showed that users tend to generate several options for the same room, including varying layouts, furniture, and decor.
To encourage users to create multiple mood boards for different rooms within the same project, the managers recommended prioritizing the mood board feature and then shifting attention to the guided journey of the room planner. To facilitate this, I plan to enhance the drawer function, making it easier for users to store items they are interested in.
Wireframes: V2
After receiving feedback, I shifted my focus toward improving the Mood Board feature. To start, I decided to create a blank canvas that would allow users to add their ideas freely. I added a rectangle on the left side of the page to represent a toolbar containing various functions for the Mood Board.
Furthermore, I believed that it would be better to combine the Plan and Build phases to encourage users to start their design with the Mood Board instead of jumping directly into the Build Layout phase. However, before proceeding with higher-fidelity wireframes, I wanted to discuss this idea with the Project Managers for further input.
Iteration #2
During the meeting, it was agreed that combining tabs would simplify the design process and make it more flexible. The addition of a toggle between Room Planner and Mood Board was also suggested due to some overlap in their features.
To aid in visualization, it was recommended to include a toggle between 2D and 3D views, where 2D is for editing and 3D is for visualization. Additionally, a call-to-action in the Mood Board feature was proposed to allow for easy exporting of designs to Room Planner.
Importing a list of SKUs to add to favorites was identified as a high-priority feature, but its implementation was delayed due to parameters and capability on the engineering side of things.
Moreover, exporting products and creating a presentation board for designers to showcase their designs to customers were also suggested.
Overall, these recommendations provide valuable insights into improving the design process and enhancing the user experience. The ideas will be incorporated into the wireframes and further discussed with the project managers and engineering team.
Wireframes: V3
After gathering the necessary information from my discussions, I proceeded to create high-fidelity wireframes. Based on the current capability of the engineering team, I adjusted the tabs and removed the checkout feature from Room Planner for this iteration. I moved the build feature from the planning phase and added it to the Floorplan tab. I also changed the wording to better fit the current plan.
As suggested, I included a toggle between 2D and 3D views to easily switch back and forth. Within the toolbar, I added the other features we discussed such as the export feature, list of SKUs import, and presentation mode.
Additionally, I added a "drawer" tab at the bottom of the page, which allows users to save items they would like to use in their design.
Finally, I made adjustments to the review page by fitting it to the screen rather than having it as a Picture-in-Picture (PIP).
04: NEXT STEPS
Conclusion
The Room Planner redesign was successfully completed, resulting in a more intuitive and engaging user experience. After launch, the drop-off rate decreased by 17%, while first-time user completion rates and overall satisfaction saw significant improvements. The updated design streamlined the user journey, simplified navigation, and integrated key features such as the Mood Board, 2D/3D toggle, and item drawer, laying a solid foundation for increased retention and usability.
Next steps involved presenting the final designs to product managers and working closely with engineering to prioritize feature development and ensure smooth implementation.
Key takeaways from this project underscored the importance of thorough documentation to facilitate future design work, strong collaboration with cross-functional teams to navigate technical constraints, and prioritizing simplicity and consistency to guide users effectively through the process.
This experience highlighted how balancing quick wins with a clear long-term vision can drive meaningful product improvements. If you’d like to hear more about this project or other design contributions at Williams Sonoma, I’m happy to provide additional insights!