CRM
From Hidden Feature to Power Tool: 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
Single Click, Complete Picture: The Focus Drawer Advantage
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:
A Spec-First Approach for Flawless Execution
I detailed the user flows and interactions and crafted thorough specs, in light and dark mode, to ensure design fidelity in implementation.
User Research:
Real Users, Real Feedback, Real Results
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:
Testing Early to Shape Smarter Solutions
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:
Validating Concepts To Determine User Preferences
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:
Delivering a Unified, Immersive User Experience
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:
Imagining the Next Evolution of Focus Drawer
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: Research + Collaboration = A Stronger Product
-
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: Why Users Missed It and How We Fixed It
When Focus Drawers were first launched, they were accessed via a hover button to avoid disrupting users’ typical flow. Those who used the feature loved the easy, in-context access to information.
Recognizing an opportunity for improvement, I conducted research with users who relied on Focus Drawers to understand what they valued, as well as 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. This insight shifted my focus toward boosting discoverability and improving the overall experience.
UX Improvement Flow: Optimizing Access Points to Improve Feature Usage
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