Key challenge: the existing interface was cluttered and non-hierarchical, making navigation and task completion inefficient and error-prone.

‍

The Cluttered Maze

When I first opened Maspe’s existing CRM, I was met with a wall of buttons—no hierarchy, no clear paths:

• Too many choices on one screen, all given equal visual weight.
• Zero wayfinding: users didn’t know where to go after clicking.
• High cognitive load, slowing down everything from adding a new customer to updating an order status.
  {IMG: Previous_UI}

‍

The Moment of Clarity

By mapping out core tasks and metrics, a single insight emerged: users need a clear journey, not just another button dashboard.

• I charted the top flows (creating customers, managing quotes, generating reports).
• Discovered that most actions took five clicks—but could be distilled to just two or three with better organization.

‍

Building a Streamlined Design System

To bring order, I established:

1. Essential color palette: primary colors for critical actions, secondary tones for contextual info.
2. Simplified iconography: line-style icons, all uniform in weight, so users could “read” without pausing to translate.
3. Reusable Figma components (buttons, cards, modals), each with standardized hover and focus states.

‍

Prototyping & Stakeholder Feedback

I rolled out two Figma prototypes:

1. Version 1 (agency build) – collapsible sidebar with icon + label, resizable panels.
2. Version 2 (post-client review + contextual interviews) – refined labels, trimmed sidebar items, and added a breadcrumb trail at the top so users always know exactly where they are in the navigation.
   {IMG: Figma_v1}
   {IMG: Figma_post_review}

‍

The Final Interface: Clarity in Action

Armed with feedback, the main screen transformed into a true hub:

• Fixed sidebar with three crystal-clear sections: Customers ▸ Orders ▸ Reports.
• Dynamic breadcrumbs that update as you navigate, making your current location instantly visible.
• Contextual action buttons only surface the controls you need for that exact task, cutting through the noise.

Example:

• In “Customers” → list view cards with quick-action icons (Edit, History, Send Quote) accessible in a single click.
• In “Orders” → a visual timeline of order status, with inline updates and alerts.

‍

Tools & Technologies

Figma, Miro, HTML/CSS

‍