CRM
Focus Drawer Enhancements
COLLABORATORS & PROJECT PEERS: Product Management, Engineering, UX Team Leads
& Executive Stakeholders
Company
SugarCRM
Role
Senior Visual Designer
Collaborators
Product Managers, Engineering Teams, UX, Executive Stakeholders
Timeline
6 months
"Everything You Need on One Screen"
The 'Focus Drawer' gives a 360° view of the customer with a single click. It boosts productivity by offering quick, contextual access to detailed information—without forcing users to leave their current page. With data that showed great user adoption since their release, I wanted to shift focus onto how the information available could be better presented.
Sugar CRM's Focus Drawer Before the Redesign
Project Description
Focus Drawers were a major success for SugarCRM when I helped design them in 2021, but they were in need of a refresh. Focus Drawers eliminate the need to jump between screens by providing a seamless, all-in-one view of relevant information. Instead of navigating multiple windows or losing context, users can access detailed records with a single click.
Timeline
From explorations to final designs in 6 months while working on multiple projects at the same time.
Background
-
Improve visibility and access to power greater adoption of this tool.
-
Streamlined action panel with quick access to process automations and contextual buttons to help users take action on needed items.
-
Consistent module identification helps users maintain context as they breeze through multiple modules for any given task.
-
Maintaining context through updates to typography and hierarchy to guide users' eyes as they scan for information.
-
The ability to edit data readily through inline editing inside of the focus drawer.
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.
User Research
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.
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 Testing Prototype Screen Recording
User Survey
Results
We also conducted user surveys which users filled out after navigating our Figma prototype, and Concept 2 emerged as the clear favorite, with 81% of users preferring it.
Final Result
Although the final version did not incorporate the timeline scrubber concept, the completed UI introduced new sections in the Focus Drawer, including 'Insights,' 'Related,' and 'Customer Journey.' Additionally, a full-screen Focus Drawer feature was added to enhance the immersive experience.
Future Vision
For this iteration, 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 is adjusted.
Key Insights: Driving Success Through Research, Collaboration, and Alignment
-
User Research
User feedback and testing played a crucial role in shaping the final product. Their insights guaranteed that prototypes addressed actual user needs, uncovered usability challenges at an early stage, and enhanced designs efficiently, leading to a more intuitive and user-friendly experience.
-
Collaboration with Developers
Collaborating with the development team taught me the importance of aligning goals and priorities for high-quality project execution. By promoting open communication, I bridged the gap between design and development, prioritizing user experience while considering technical feasibility. This collaboration improved work quality and workflow efficiency, resulting in cohesive, well-executed solutions.
-
Bridging Business Goals and User Needs
Clear communication with the project manager and dev lead ensured alignment between business goals and user needs. By collaborating effectively, we balanced innovation with feasibility, prevent misunderstandings, and created user-centered solutions that drove this projects success.
Pain Points
When Focus Drawers were first launched, they were accessed via a hover button to avoid disrupting users’ typical flow. Those who adopted the feature became enthusiastic fans, appreciating how easily they could gather context without leaving the page.
Recognizing an opportunity for improvement, I conducted research with both users who relied on Focus Drawers to understand what they valued and those who didn’t use them to identify barriers to adoption. The overwhelming response was that non-users were simply unaware of the feature’s existence. When shown how it worked, they were impressed by its functionality. This led me to pivot the conversation toward how the experience could be further improved
UX Improvement Flow
My hypothesis suggested that by swapping the functions of the link and focus drawers icons—shifting access to the link while updating the icon to represent a detail view—we would encourage users to consciously choose to open a detail page. I believed this change would lead users to embrace focus drawers more effectively, enhancing their workflows. I tested this theory with the users previously mentioned, and the feedback was overwhelmingly supportive of this new direction.
The Double Diamond Process
I made good use of a common UX research and design framework known as the Double Diamond Process to gain true understanding of the problem at hand and drive solutioning meetings between myself and other key members of the product team. The Double Diamond Process promotes broad exploration before narrowing down, ensuring UX decisions are research-driven, not assumption-based.
1. Understanding the Problem
-
Discovery (Diverge): Gather insights through research, analytics, and stakeholder input.
-
Define (Converge): Synthesize findings to pinpoint the core problem.
2. Creating the Solution
-
Develop (Diverge): Explore multiple solutions through ideation and prototyping.
-
Deliver (Converge): Test, refine, and implement the best solution