Design Systems ∙ Data Visualization ∙ SaaS ∙ Healthcare Software
Mon Ami
Turning Dashboard Data from Chaos into Clarity and Building a Design System Solution that Ensures Long-Term Consistency.
Embedded Files
Project Overview
This project focuses on redesigning the existing dashboard to significantly improve usability, clarity, and efficiency for users. The goal is to simplify navigation, enhance visual hierarchy, and ensure that key information and actions are easy to find and understand. Alongside the interface redesign, the project includes building a scalable design system that standardizes components, typography, colors, and interaction patterns. This system will enable faster updates, maintain visual and functional consistency across the platform, and make it easier for designers and developers to implement future changes. By combining a user-centered dashboard redesign with a flexible design system, the project aims to create a more intuitive experience while establishing a strong foundation for ongoing product evolution.
Role
UX/UI Design, Usability Design, Data Visualization, Design Systems, B2B, Healthcare
Toolkit
Figma
Background
Mon Ami is designed to support organizations that provide services for older adults and people with disabilities by modernizing how agencies manage client data, services, and reporting. The platform functions as an integrated, cloud-based operating system that combines tools such as client databases, case management, program and event tracking, referrals, provider coordination, and analytics into a single system. Its purpose is to replace fragmented legacy databases and manual processes with a streamlined, user-friendly platform that allows frontline staff and administrators to manage services more efficiently, automate administrative tasks, and generate actionable insights from their data. By centralizing workflows and improving access to reporting and coordination tools, the software helps agencies deliver services more effectively while reducing the administrative burden on staff and improving outcomes for the communities they serve.
Streamlining Aging and Disability Services
Aging and disability service organizations play a critical role in supporting older adults and individuals with disabilities by connecting them with essential resources such as healthcare, transportation, nutrition programs, housing assistance, and in-home support. As the aging population continues to grow and demand for services increases, these organizations must manage complex networks of clients, providers, programs, and reporting requirements. Many agencies still rely on outdated systems, spreadsheets, or fragmented databases, which can make coordination difficult and increase administrative workload. Software solutions like Mon Ami address these challenges by centralizing client information, streamlining case management, and enabling better data tracking and reporting. By improving operational efficiency and visibility across programs, these platforms help agencies deliver services more effectively while allowing staff to focus more on supporting the people and communities they serve.
Process
Below is the structure of the case study.
Empathize
Empathize
Kick-off Meeting
The project began with a kickoff meeting where the stakeholder presented key screens from a Mon Ami database system solution by sharing the current wireframes. He stated that he was looking to make changes that were needed to improve the look and usability. The primary goal of the project was to redesign these screens to create a more intuitive and user-friendly experience. In addition, the stakeholder requested that the updated designs be recreated in Figma to establish a structured design file and interested in building a reusable component library to match. This would not only improve the immediate usability of the system but also create a scalable foundation that would make future design updates faster and more consistent.
Product Audit
The first step focused on gaining a deeper understanding of how users interact with the current dashboard, the dashboards functionality and identifying challenges with the experience. This involved reviewing the existing database screens presented during the kickoff meeting, observing current workflows. The goal of this phase was to understand how the dashboard supports daily tasks and where usability barriers exist.
Define
Define
Identifying Core Usability Problems
After gathering insights, the findings were synthesized to define the key problems affecting the user experience. Several issues emerged, including complex navigation, inconsistent interface patterns, and difficulty locating important information. Additionally, the lack of a centralized design system made the interface harder to maintain and update. This phase resulted in clear design goals: simplify navigation, improve visual hierarchy, and create a consistent component structure.
Pain Points
The first step focused on gaining a deeper understanding of how users interact with the current dashboard and identifying the challenges they experience. This included reviewing the existing database screens presented during the kickoff meeting, observing current workflows, and gathering insights from stakeholders about user needs and operational constraints. The goal of this phase was to understand how the dashboard supports daily tasks and where usability barriers exist.
Inconsistent Interface Patterns
The interface contained inconsistent UI elements across different screens, including varying button styles, table layouts, spacing, and form components. These inconsistencies made the system feel fragmented and required users to relearn interactions as they moved between pages.
Poor Visual Hierarchy
Important information and actions were not clearly prioritized in the layout. Data-heavy sections often appeared visually cluttered, making it difficult for users to quickly scan the dashboard and identify key insights or next steps.
Difficulty Locating Key Information
Users struggled to quickly find relevant data due to dense layouts and inconsistent labeling. Critical information was sometimes buried within large tables or multiple sections, increasing the time required to complete common tasks.
Limited Scalability of the Current Design
The existing interface was not built with a scalable design structure. As new features were added, layouts became more complex and inconsistent, making it harder to maintain a cohesive user experience.
Lack of a Centralized Design System
The system did not have a centralized design system or reusable component library. As a result, UI elements were recreated multiple times across the product, leading to inconsistencies and inefficiencies in both design and development.
Inefficient Design-to-Development Workflow
Because the designs were not structured within a modern design tool, collaboration between designers and developers was limited. The lack of a centralized Figma file and component library made it difficult to maintain alignment, document patterns, and implement updates efficiently.
Problem Statement
The existing dashboard experience presented several usability challenges that made it difficult for users to efficiently complete their daily tasks. Navigation across the system was complex and unintuitive, requiring users to move through multiple screens to locate essential information or perform common actions. In addition, inconsistent interface patterns across different pages created confusion and reduced usability, as users encountered varying layouts, components, and interaction styles. The dashboard’s dense presentation of information also lacked a clear visual hierarchy, making it difficult for users to quickly identify key data and prioritize their actions. Compounding these issues, the absence of a centralized design system resulted in duplicated UI elements and inconsistent styling, making the product harder to maintain and scale. Addressing these challenges required a redesign that simplified navigation, improved information clarity, and established a structured component library to support consistency and long-term product growth.
Ideate
Ideate
Exploring Solutions
Brainstorming and evaluating ideas to improve navigation, layout, and information hierarchy. In this phase, potential design solutions were explored to address the usability challenges identified during discovery. Brainstorming focused on improving the dashboard’s navigation, simplifying layouts, and creating a clearer information hierarchy. Different navigation structures and content groupings were considered to make frequently used sections easier to access and reduce the number of steps required to complete tasks. Layout concepts were also explored to better organize data-heavy screens, reduce visual clutter, and help users quickly identify important information. At the same time, common interface elements such as tables, buttons, and form inputs were reviewed to identify opportunities for standardization, helping establish the foundation for a reusable component library.
Creating wireframes, high-fidelity designs, and building a scalable component library in Figma. In this phase, the proposed solutions were translated into tangible design outputs. Initial wireframes were created to define the overall layout, navigation structure, and organization of information across the dashboard screens. These low-fidelity designs helped validate the placement of key elements and ensure that workflows were clear and efficient before moving into visual design. The wireframes were then developed into high-fidelity designs that established the final visual style, including typography, color usage, spacing, and interaction patterns. At the same time, the designs were transitioned into Figma, where a scalable component library was built to standardize common UI elements such as buttons, tables, form inputs, and navigation components. This component-based approach ensured visual consistency across the dashboard while creating a flexible foundation that allows designers and developers to efficiently maintain and expand the product in the future.
Prototype
Prototype
Wireframing
During this phase, the team translated the initial ideas into wireframes to explore layouts, navigation, and content organization in a low-fidelity, flexible format. The wireframes focused on simplifying the dashboard by reducing clutter, improving spacing, and establishing a clear visual hierarchy that made key information easier to find and act on. At the same time, the existing boards were transitioned into Figma, where missing interface components were standardized and organized into a reusable component library. This process ensured consistency across screens, eliminated duplicated or inconsistent elements, and created a scalable foundation that allowed future updates to be implemented efficiently while maintaining a cohesive and intuitive user experience.
Consistent and Modernized UI Components
Update interface elements such as buttons, cards, tables, and spacing to align with the established style guide and component library, improving visual consistency and creating a more intuitive and user-friendly experience.
Simplified Navigation and Filtering
Introduce clearer filtering, sorting, and navigation options that allow users to quickly adjust the data they are viewing, helping them focus on specific timeframes, categories, or datasets without unnecessary steps.
Improved Data Hierarchy
Reorganize the dashboard layout to highlight the most important metrics and insights first, using clearer visual hierarchy, spacing, and grouping so users can quickly understand key information without scanning the entire page.
Enhanced Data Visualization
Replace or supplement dense tables with charts, graphs, and visual indicators (such as bar charts, line charts, or summary cards) to make trends, comparisons, and performance metrics easier to interpret at a glance.
Test
Test
Refining Through Stakeholder Feedback
Reviewing the redesigned dashboard with stakeholders and iterating to improve usability and clarity.
highlighting areas where the interface felt difficult to navigate and where usability improvements were needed.
and gathering insights from stakeholders about user needs and operational constraints.
The redesigned dashboard was reviewed with stakeholders to evaluate usability, clarity, and workflow efficiency. Feedback focused on navigation, content organization, and the visibility of key information. Iterations were made to improve spacing, labels, and component consistency, ensuring the dashboard became easier to use while reinforcing a scalable, standardized component library for future updates.
Tab categories needed to appear more like sections rather than interactive components so users would not assume they were clickable. The icons were also removed to simplify the layout and better communicate that these areas function as static sections rather than actions.
The primary action was updated from an “Add” button to a “Save” button to better reflect the action being performed. The individual save icons previously included within each section were also removed to simplify the interface and reduce redundant actions.
It was identified that the ID column needed to be editable, so the field was updated to a textbox to allow users to modify the value directly within the table.
A confirmation message also needed to appear when a user clicks the “X” to delete an item. To support this, a confirmation dialog was designed to prompt users with a message such as “Are you sure you want to delete Congregate tn_congregate_defination?” along with Cancel and Delete actions. This helps prevent accidental deletions and gives users a clear opportunity to confirm their choice.
High-Fidelity Prototype
In the High-Fidelity Designs phase, the redesigned dashboard was translated into pixel-perfect visuals that reflect both usability improvements and a cohesive visual language. Each screen was crafted to emphasize clarity, intuitive navigation, and the prioritization of key information, ensuring users can complete tasks efficiently. The visual hierarchy, typography, and color palette were carefully applied to guide attention and reduce cognitive load. Alongside the interface, a comprehensive design system was integrated into the high-fidelity prototypes, standardizing components, interactions, and styles across the platform. This approach not only demonstrates the practical implementation of the redesign but also provides a scalable foundation for consistent development and future iterations, bridging the gap between design intent and functional delivery.
First Iteration of the Style Guide and Component Library
Creating a Style Guide and Component Library helped establish consistency, scalability, and efficiency throughout the design process. The style guide defined the visual foundation of the product by outlining key elements such as typography, color palette, spacing, and iconography to ensure a cohesive and recognizable interface. Alongside this, the component library organized reusable UI elements—such as buttons, form inputs, navigation elements, and tables—so they could be applied consistently across the platform. Since this was the first iteration of the Style Guide and Component Library, it was intentionally kept simple and flexible, providing a clear starting point while leaving room for future expansion as the product evolves. Since the product already relied on structured layouts—particularly fixed table formats across many pages—there was no immediate need to build a highly detailed or complex design system. Instead, components were documented at a practical level to support the current interface while allowing new elements to be introduced when additional features or new uses of the product required them. This approach ensured the system could support the existing product structure while gradually evolving alongside future development.
Page updated
Google Sites
Report abuse