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.

Who is Dan?

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. Quick Actions and guidance on next priorities.

High level needs: Identify;
-Who is the contact?
-What’s the context of the customer?
-What should I do next?

Goals

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.

How might we help sales teams manage their entire quote installation process within a single, connected workspace.

How might we help new users feel confident and supported as they navigate the CRM and complete their first tasks successfully?

Based on the findings so far,
I set 3 goals before beginning the design of the CRM tool.

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.
Using post-its, I mapped out an initial 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.

For the scope of this exercise, I focused on the Contacts/Customers flow. Other user flows have been explored and documented, outlining their purpose and key interactions it includes.

User Flow: Bulk Action

Wireframes for Contacts List and Detail view.
I sketched the iterations for both the views, considering the layout, task switching and hierarchy of information.

The visual layout for all ‘Create’ modals have been 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.

For this take home exercise, I designed the final design for the ‘Offer’ modal, while wireframes for the remaining modals are presented below.

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 anything, contacts, offers, emails etc. One unified location 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 a ‘More Actions’ dropdown without compromising clarity or visual balance.

Filters
Filters can be applied based on urgency, status, product type, etc.

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.

Progressive Disclosure: show what matters first

Feature packed dashboards often overwhelm users by throwing everything at them at once.Instead, I used progressive disclosure in timeline cards and modals showing high level information first (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.

Hierarchy
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
Another feature is to go to connected offers right from the contact detail screen.
The salesperson can view the most recent offers and its status right from the contact detail screen and if they want to further look detail, they can click on ‘See All’ which allows them to view all the offers that are associated only to that contact, without manually applying more filters.

This makes it easier for the user to view connected offers.

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.

Colors
I created a colour palette that feels calm and effortless to the eyes, supporting quick visual scanning during long working hours.

Components

In order to evaluate the success of this design, I would measure it using various techniques,
Task Success Rates helps to note how much time it takes the user to complete a specific task.

DA

WORK ‘25