Every now and then, I like to push my design thinking by exploring issues in existing products and reimagining how they can be improved.
This time, I designed a CRM dashboard to help users complete tasks faster and with fewer context switches.
I began by defining a clear problem statement and breaking it down to understand the context, users, and their key needs, setting a focused foundation for the design direction.
Users
I identified the personas who will use this CRM tool, this helps to design with context. It primarily serves sales teams including product managers, business analysts and mostly used by salespeople.
Purpose
The common purpose among all these users is to create offers, manage customer relationships, and communicate efficiently with clients all within a single, connected workspace.
Obstacles
Juggling between multiple tools slows users down and wastes valuable time. Even simple tasks take several steps to log, while the lack of clarity on “what to do next” breaks workflow and reduces efficiency.
Junior Salesperson at a SME, Daniel, is a motivated and fresh employee at the workplace.
He is ready to collaborate with PMs and business analysts to manage leads.
Needs
A single, clear product experience for managing all interactions. Identify;
-Who is the contact?
-What’s the context of the contact?
-What should I do next?
Sales teams starts early in the morning and close as many deals by 12pm. His goal is to make sure he is efficient and meets his sales targets.
Quickly sort, search, and filter contacts lists.
Pain Points
Juggling between multiple tools,
Logging tasks takes many steps and time,
Lack of clarity on next steps.
Before diving into the design of the CRM tool, I defined three goals based on my research insights. These goals acted as a compass throughout the process, ensuring design choices were aligned with user needs.
These goals are:
Guided, Unified and Efficient.
Contacts List View
Contacts Detail View
I began by outlining how the user flow would look like, and referred back to the key tasks, user needs, and pain points I had previously identified, through this I created a preliminary Information Architecture and User Flow diagram to visualise how users would navigate through the system.
While doing this, I also defined what each ‘pipeline stage’ represents and noted the key actions users typically perform within those stages.
User Flow: Bulk Action
Considering the layout, task switching, and information hierarchy, I refined my initial sketches through several iterations to create a more intuitive and efficient flow.
The layout for all ‘Create’ were kept consistent to ensure familiarity and reduce cognitive load when performing various actions.
This helps especially in applications where there is lots of task switching.
.
Contacts List View
A simple table that prioritises information based on user needs, allowing quick identification of who requires follow ups, their current conversion stage, and who they’re assigned to.
Key details are presented upfront for easy scanning, while additional information like ‘Inbound’ or ‘Outbound’ lead can be accessed through a horizontal scroll, keeping the layout clean and focused.
The global ‘smart search’ on the top comes handy for searching contacts, offers, emails etc. One unified position always keeps the user aware of its location.
Bulk Actions
On the left side of the table, users can select one or multiple contacts using checkboxes. Once selected, contextual actions appears above the table, allowing actions such as Edit, Delete, Assign To, or Change Status.
Why not a button in each row itself?
Adding individual buttons to each row would clutter the interface and disrupt visual scanning. The idea of hover interactions would restrict users to only one or two limited actions.
The checkbox selection keeps the table clean, reduces cognitive load, and supports both single and bulk actions. This approach also scales better, as additional options can be grouped under ‘More Actions’ dropdown without compromising clarity or visual balance.
Filters
Filters can be applied based on assignee, last touchpoint, urgency, status, product type, etc. The filters are designed such that the users get the desired results in minimum number of clicks.
Last Touchpoint
The ‘Last Touchpoint’ column shows date of recent interaction and when hovered, it shows the recent activity that was performed (tooltip).
Why?
Users look for “who hasn’t been contacted recently?”
Dates create a clear visual rhythm when scanning list of contacts.
Recency drives the priority of action and not the activity type. It also keeps the column compact and clean in dense data tables.
Colour tags are used in the ‘Last Touchpoint’ column, these visual hints help users quickly scan and recognise priorities without the need to apply additional filters.
This makes the table efficient and guided for the user.
Iconography
A balanced use of bold and outlined icons enhances visual hierarchy across the interface. Bold icons in the sidebar provide stronger visual attention, guiding navigation between primary sections. Outlined icons are used within detailed views, where information density is higher, ensuring clarity.
Contact Detail View
The goal for a salesperson is to review what’s happened with this contact (emails, calls, offers, meetings). And secondly, take action (message, add note, schedule appointment, send offer).
The contact activity can be reviewed through the timeline cards and actions can be taken both from the cards as well as “Create” button on the top bar.
I decided to create timeline cards, because there might not be frequent ‘messages’ between the contact and salesperson, but ‘activities’ instead.
Feature packed dashboards often overwhelm users by throwing everything at them at once. Instead, I stacked them in timeline cards showing high level information upfront (type, date, summary) and expanding for details on demand.
This makes sure that:
-The interface stays light and readable.
-Users still have access to depth when needed.
-Users can scan through many activities without fatigue.
How many cards to show?
Too many cards would take a lot of screen space and reduce scanability for the salesperson, so I decided to go with 3 cards with a 4th one as a half card, hinting the user to scroll.
What to keep in each card?
-If I only show titles → too abstract.
-If I show full content → too cluttered, less scanability.
So I decided to show enough context inline so users rarely need to expand, but still allow expansion when necessary.
The contact details screen is divided into three sections, following the Rule of Three, a design principle based on how the human mind easily perceives information when it’s grouped in sets of three. This created visual balance and structure.
The same principle is subtly applied throughout the dashboard, in sets of 3 for quicker scanning and stronger visual rhythm.
The grid, typography, and spacing in the design prioritises hierarchy, so that users instantly see what’s:-
Primary (Customer name, conversion status and whats upcoming), Secondary (Connected Offers, Appointments, additional contact details and notes), This keeps users guided on what to do next and allows them to take immediate actions.
Visual hierarchy gives rhythm to information. It turns data into whats easy to read, scan, and act upon.
Pop Up Modals
One of the biggest frustrations in CRMs is losing context. Users open a customer record, start logging a task, and suddenly they’re taken to a different screen.
To avoid this, I designed all “Create” actions as movable pop-up modals that overlay the current view. The user can check the timeline or customer details while filling the form, keeping focus and continuity.
Connected Offers
While mapping the user flow, I realized salespeople often needed to revisit past offers. The contact detail view includes direct access to connected offers. Salespeople can quickly see recent offers and their status, or click “See All” to view every offer linked to that contact, without additional filtering. This streamlines offer tracking and keeps customer context in one place.
Automation
At the bottom of the interface, a command bar enables salespeople to create or update activities quickly and effortlessly. Instead of navigating through multiple menus, users can simply start typing what they want to do, like, “create offer” or “schedule site visit.” As they type, a tooltip appears, suggesting possible actions for confirmation.
If the command involves a “Create” action, such as an email, offer, or site visit, the corresponding modal opens instantly, pre filled with relevant details for quick review before submission.
This interaction flow significantly reduces friction, allowing users to perform frequent actions, like updating offers, logging meetings, or changing status in just a few keystrokes. The command bar turns repetitive workflows into a fast, intuitive, and guided experience.
Conclusion
The solution drives impact on three levels:
Reduced tool switching: Users can manage communication, offers, and activities seamlessly within one unified workspace.
Improved task efficiency: Bulk editing and quick actions minimize repetitive effort and streamline daily workflows.
Higher productivity per user: Sales teams can manage more clients and close deals faster, without additional resources.
To validate this, Task Success Rate can be measured, tracking how quickly and effectively users complete key actions within the CRM.
* * *
Written by Akshay Desai
Designer @inno2grid GmbH
Contact
Contact
Design Strategies to Improve EV Navigation in Germany
BASF Sales Dashboard