CASE STUDY
Sugar Modernization:
Focus Drawer Updates
COLLABORATORS & PROJECT PEERS: Product Management, Engineering,
UX Team Leads & Executive Stakeholders
The Background
"Everything You Need on One Screen"
The Focus Drawer is a UI component that boosts productivity by offering quick, contextual access to detailed record information—without forcing users to leave their current page. Where a single click gives a 360° view of the customer. They were introduced several releases ago and were in needed a refresh.
The Blueprint
Wireframes
With the PMs assistance, I wireframed the flows to ensure users could seamlessly switch between Record View, Focus Drawer, and Focus Dashboard, prioritizing ease and productivity.
Key Takeaway:
“The Power of UX User Research”
🔬
User feedback and testing were invaluable to the final product. They ensured prototypes met real user needs, identified usability issues early, and refined designs effectively, resulting in a more intuitive and user-friendly experience.
Sugar Modern 2
Exploration
Future Vision 2
This concept envisions adding new sections to the Focus Drawer, such as ‘Insights,’ ‘Related,’ and ‘Customer Journey,’ while also exploring a full-screen Focus Drawer concept for a more immersive experience.
Ship it!
Final
Version
After multiple iterations of styles for the dashboard-record switcher, I finalized the design. I refined the icons to switch between outline and fill based on selection and fine-tuned the module tabs’ styling for selected and unselected states.
Exploration
Future Vision 1
For this project, I was tasked with “going wide” to envision the future potential of the Focus Drawer, free from engineering constraints. My initial exploration introduced a “Timeline Scrubber” concept, dynamically updating items by date as the scrubber’s window was adjusted.
The Result
User Research
User Survey
Results
We conducted a user survey, and Concept 2 emerged as the clear favorite, with 81% of users preferring it.
User Research
User Testing
Prototypes
We conducted 3 feedback sessions with customers, showing them 3 concepts for accessing the focus drawers and new entry points for accessing a record's detail page. We also performed internal user testing with teams that use our product daily to gather their feedback on any impact on their work this would have.
User Research
Feedback
Sessions
The UX and PM teams conducted a series of feedback sessions, allowing both external and internal users to test some prototypes, and participate in our feedback
Specs
Design-driven Documentation
I detailed the user flows and interactions and
crafted thorough specs, in light and dark mode, to ensure design fidelity in implementation.
