Room planner
Redesigning the Room Planner application for Williams Sonoma, Pottery Barn, and West Elm.
Role: UX/UI Designer
Company: Outward, Inc (Williams Sonoma, Inc)
Tools: Figma, FigJam, Jira
Timeline: January 2023 — March 2023
Team:
UX Designer: Shirin Jeevan
UX Manager: Jelissa Bueza
Senior Product Manager: Timothy Wang
Executive Project Manager: Brenda Eyckens
overview
PROJECT BACKGROUND
Room Planner is an interactive tool designed and hosted by Outward, Inc. The application allows customers to view furniture and decor from all Williams Sonoma brands, build mood boards, create customized layouts, and share designs.
problem
The Room Planner platform initially presents a plethora of features, potentially overwhelming users. Research conducted by Outward revealed that 40% of users abandoned their plans after the creation step. The primary challenges identified are the platform's steep learning curve and the complexity of navigating its various modules.
Goal
The primary goal is to enable users to create high-quality plans with ease and speed. Therefore, we aim to create a fully guided user journey for both customers and designers by revamping Room Planner to have seamless maneuverability between features and a clean, intuitive design within modules. We define success metrics by increasing user adoption and retention through the entire room planning lifecycle.
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
Unfortunately, I was laid off before I could complete the project. However, before leaving, I gathered all relevant documentation and handed it over to my UX Manager, Jelissa. If I had continued with the project, the next step would be to present my third iteration of wireframes to the product managers and get their feedback.
Further Ideas:
For Inspiration Gallery:
Create preset furniture plans
Show a preview of the plan when hovering over it
Add a shuffle button to reposition furniture in the room
Work with the engineering team to:
Integrate the checkout process within Room Planner
Make it easier for users to buy from all brands in their plan
Add the ability for users to create and customize personal rooms in the 3D feature.
Key takeaways from my experience:
Document the design process in detail, including ideas that didn't work out, so future designers can easily pick up the work.
Collaborate closely with project managers and engineers to understand constraints and design within them effectively. Communication is key to working effectively with a team.
Prioritize simplicity and consistency over offering too many options.
Design in a way that encourages users to follow a guided journey without feeling forced to go step by step.
Recognize that every UX process is unique and will require different areas of focus depending on the project at hand.
During my time at Williams Sonoma, I was involved in various projects, with a major focus on the redesign of Room Planner. Apart from that, I also dedicated a significant amount of time to designing UI elements for the website. If you would like to know more about the other projects I worked on, please feel free to reach out and ask any questions!