UX Project: Building a Clearsense Design System with Atomic Design in Figma
View All Design Experience

Project Goal: Develop a comprehensive design system using Atomic Design principles in Figma to streamline product development at Clearsense and ensure consistent, high-quality user experiences across all products.

Target Users:

• Product Designers: Responsible for creating user interfaces for Clearsense products.

• Front-end Developers: Translate Figma designs into functional code.

• Product Managers: Oversee the product development lifecycle.

Current Challenges:

• Inconsistency in UI elements and design patterns across Clearsense products.

• Inefficient workflow due to repetitive design tasks and limited access to reusable components.

• Difficulty maintaining design consistency as new products and features are added.

Proposed Solution:

Implement Atomic Design methodology within Figma to establish a Clearsense Design System:

1. Define Design Language (Atoms):

• Create a library in Figma housing foundational design elements:

o Colors: Define primary, secondary, and accent colors with clear usage guidelines.

o Typography: Specify fonts (headings, body text) and their corresponding sizes and weights.

o Spacing: Establish consistent spacing between UI elements for optimal hierarchy.

o Icons: Design a comprehensive set of icons with clear styles and variations.

o Buttons: Create basic button styles (primary, secondary, outlined) with hover and disabled states.

o Form elements: Design reusable form elements (text fields, dropdowns, checkboxes) with consistent styles.

Figma Implementation:

• Utilize Figma's design library and component functionality.

• Define color palettes and typography styles within Figma.

• Establish spacing grids and apply them to layouts.

• Design icons as individual components with various size and state variations.

• Create button styles as components with defined properties for hover and disabled states.

• Design form elements as components with consistent interaction states.

2. Build Molecules (Groups of Atoms):

• Combine reusable atoms to create more complex UI components:

o Navigation bars: Design various navigation bar layouts utilizing atoms for buttons, icons, and text.

o Form groups: Combine form elements (labels, inputs) with consistent spacing and layout.

o Cards: Design information cards with a defined structure utilizing atoms for images, text, and buttons.

Figma Implementation:

• Create new components by combining existing atom components.

• Leverage Figma's auto layout features to maintain consistent spacing within molecules.

• Design different variations of molecules (e.g., navigation bar with search functionality).

3. Develop Organisms (Groups of Molecules):

• Assemble molecules to create larger user interface sections:

o Hero sections: Combine a background image, title text, and call to action button (molecules).

o Product feature sections: Design sections showcasing product features with cards and descriptive text.

o Login forms: Combine form groups (email, password) and buttons for login functionality.

Figma Implementation:

• Design Figma pages representing various product templates.

• Utilize organism components within page layouts to achieve a consistent and modular structure.

• Create variations of organisms for different use cases within the product.

4. Design Templates (Layouts):

• Create basic page layouts for various product sections:

o Landing pages: Design a landing page template with hero sections, feature sections, and call-to-action areas.

o Product dashboards: Define a dashboard template with widgets for data visualization and user interactions.

o Settings pages: Develop a settings page template with navigation elements and form elements for user preferences.

Figma Implementation:

• Design master pages in Figma for various layouts (landing page, dashboard, settings).

• Utilize organism components within master pages for a modular and reusable structure.

5. Create Documentation (Pages):

• Develop a comprehensive style guide within Figma that documents the design system:

o Design principles: Outline Clearsense's design philosophy and core principles.

o Component usage guidelines: Provide detailed instructions on how to use each design system component effectively.

o Accessibility considerations: Ensure the design system adheres to accessibility best practices.

Benefits:

• Increased Design Consistency: Consistent UI elements and design patterns across all Clearsense products.

• Improved Design Efficiency: Faster design and development through reusable components and pre-defined styles.

• Enhanced Collaboration: Facilitates communication between designers and developers with a single source of truth.

• Reduced Maintenance Costs: Easier to maintain design consistency as the product ecosystem grows.

• Scalability: The design system can adapt and expand to accommodate future product needs.

Next Steps:

• Iterate and refine the design system based on user feedback:

o Conduct usability testing with target users to assess the clarity and ease of use of the design system components and documentation.

o Refine the design system based on user feedback, ensuring it meets the needs of designers and developers.

• Develop a governance plan:

o Establish a process for adding, updating, and deprecating design system components to maintain consistency and prevent clutter.

o Define roles and responsibilities for maintaining the design system.

• Integrate with development workflows:

o Develop code snippets and design tokens (e.g., color values, font sizes) that can be easily integrated into development tools.

o Consider establishing a design system plugin for popular front-end development frameworks.

• Promote adoption and training:

o Conduct training sessions for designers and developers on how to effectively use the Clearsense Design System.

o Create internal resources (e.g., knowledge base articles, video tutorials) for ongoing reference and support.

• Continuous improvement:

o Monitor how the design system is being used within the organization.

o Gather feedback from users and identify areas for improvement.

o Continuously evolve the design system to ensure it remains relevant and effective.

Additional Considerations:

• Accessibility: Ensure all design system components meet WCAG accessibility standards for inclusive design.

• Version Control: Implement a version control system within Figma to track changes and maintain design system history.

• Integration with Design Tools: Explore integration with other design tools used at Clearsense (Figma) for a more comprehensive design workflow.

UX Design Case Study: Revamping Dashboard Reports for Health Care America (HCA)

View All Design Experience

Project Overview

Goal: To redesign the dashboard reports within the 1Clearsense platform to provide a more intuitive and informative experience for HCA's data analysts and decision-makers.

Target Audience: Data analysts, data scientists, and healthcare administrators within HCA.

Challenges

• Complex data: Healthcare data can be complex and difficult to interpret.
• Overwhelming dashboards: Existing dashboards may be cluttered and difficult to navigate.
• Lack of insights: Dashboards may not provide actionable insights for decision-making.

Design Approach

1. User Research:
• Interviews: Conduct interviews with HCA's data analysts and decision-makers to understand their needs, pain points, and expectations.
• Observations: Observe users interacting with the existing dashboards to identify usability issues.
2. Information Architecture:
• Organize data: Structure the dashboards to present data in a logical and intuitive manner.
• Prioritize key metrics: Highlight the most important metrics for HCA's specific needs.
3. Visual Design:
• Clear and concise: Use simple and effective visualizations to communicate complex data.
• Consistent branding: Adhere to HCA's brand guidelines to maintain a cohesive experience.
4. Interaction Design:
• Filtering and sorting: Allow users to filter and sort data based on various criteria.
• Drill-down functionality: Enable users to explore data in more detail.
• Customization options: Provide options for users to customize dashboards to their specific needs.

Key Features

• Interactive visualizations: Use charts, graphs, and heatmaps to visualize healthcare data effectively.
• Customizable dashboards: Enable users to create personalized dashboards to track key metrics.
• Data storytelling: Use storytelling techniques to communicate insights and trends.
• Actionable insights: Provide recommendations based on data analysis.
• Integration with other tools: Integrate with other HCA systems to provide a seamless experience.

Design Outcomes

• Improved data understanding: Help users to better understand their healthcare data.
• Enhanced decision-making: Provide actionable insights to support data-driven decision-making.
• Increased efficiency: Streamline the process of analyzing and reporting on healthcare data.
• Improved user satisfaction: Create a more intuitive and enjoyable experience for users.

Example Visuals

By redesigning the dashboard reports within the 1Clearsense platform, HCA can empower its data analysts and decision-makers to make more informed and effective decisions.

UX Design Case Study: 1Clearsense Data Management Notifications

View All Design Experience

Project Overview

Goal: To design a user-friendly and informative notification system to alert users of important data management events within the 1Clearsense platform.

Target Audience: Data analysts, data scientists, and data quality professionals.

Challenges

• Overwhelming notifications: Avoid overwhelming users with excessive notifications.
• Prioritizing alerts: Determine the most important events to notify users about.
• Actionable notifications: Ensure that notifications provide clear information and guidance.

Design Approach

1. User Research:
• Interviews: Conduct interviews with target users to understand their preferences and needs regarding notifications.
• Surveys: Gather feedback on existing notification systems and identify areas for improvement.
2. Notification Types:
• Critical alerts: For urgent issues such as data breaches or system failures.
• Informational alerts: For routine updates or events that may require user attention.
• Promotional alerts: For relevant product announcements or offers.
3. Notification Channels:
• Email: For important notifications that require detailed information.
• In-app notifications: For timely updates and alerts within the 1Clearsense platform.
• Mobile app notifications: For critical alerts that require immediate attention.
4. Personalization:
• User preferences: Allow users to customize notification settings based on their preferences.
• Contextual notifications: Send notifications based on the user's current activity or role.
5. Actionable Notifications:
• Clear calls to action: Provide clear instructions or links for users to take action.
• Integrate with other tools: Integrate notifications with other 1Clearsense products to provide a seamless experience.

Key Features

• Customizable notification settings: Allow users to control the frequency and types of notifications they receive.
• Priority levels: Categorize notifications based on urgency to help users prioritize their attention.
• Snooze and dismiss options: Enable users to snooze or dismiss notifications temporarily or permanently.
• Notification history: Provide a history of past notifications for reference.

Design Outcomes

• Improved user experience: Ensure that notifications are relevant, timely, and not overwhelming.
• Enhanced data management: Help users stay informed about important data management events and take appropriate action.
• Increased user engagement: Foster a more engaged user base through personalized and relevant notifications.

Example Visuals

By designing a well-structured and user-friendly notification system, 1Clearsense can provide users with timely and relevant information to improve their data management practices.

UX Design Case Study: 1Clearsense Reference Data Crosswalks

View All Design Experience

Project Overview

Goal: To design a user-friendly and informative tool that enables users to easily compare and map reference data across different systems within the 1Clearsense platform.

Target Audience: Data analysts, data scientists, and data quality professionals.

Challenges

• Complex data: Reference data can involve various attributes and matching criteria.
• Large datasets: The tool must be able to handle significant volumes of data.
• Technical terminology: The concept of reference data crosswalks can be unfamiliar to some users.

Design Approach

1. User Research:
• Interviews: Conduct interviews with target users to understand their needs, pain points, and expectations.
• Surveys: Gather feedback on existing reference data tools and identify areas for improvement.
2. Information Architecture:
• Organize data: Structure the tool to present reference data in a logical and intuitive manner.
• Prioritize key metrics: Highlight the most important metrics for the target audience.
3. Visual Design:
• Clear and concise: Use simple and effective visualizations to communicate complex data.
• Consistent branding: Adhere to the 1Clearsense brand guidelines to maintain a cohesive experience.
4. Interaction Design:
• Filtering and sorting: Allow users to filter and sort data based on various criteria.
• Drill-down functionality: Enable users to explore specific crosswalks in more detail.
• Export options: Provide options to export data in different formats (e.g., CSV, Excel).

Key Features

• Interactive data comparison: A tool for comparing reference data across different systems.
• Mapping capabilities: Allow users to map data elements between different systems.
• Data quality metrics: Provide information about the quality of reference data.
• Automation: Automate the process of identifying and mapping reference data.
• Integration with other tools: Integrate with other 1Clearsense products to provide a seamless user experience.

Design Outcomes

• Improved data consistency: Ensure that reference data is consistent across different systems.
• Enhanced data quality: Identify and address inconsistencies in reference data.
• Increased efficiency: Automate the process of comparing and mapping reference data.
• Better decision-making: Provide users with the information they need to make informed decisions about data management.

Example Visuals

By providing a user-friendly and informative tool for reference data crosswalks, 1Clearsense can help users improve the quality and consistency of their data.

UX Design Case Study: 1Clearsense Data Exploration & Transparency Viewer

View All Design Experience

Project Overview

Client: 1Clearsense

Product: Data Exploration & Transparency Viewer

Goal: Create a user-friendly and intuitive tool for visualizing and understanding complex healthcare data.

Problem Statement

Healthcare professionals often struggle to make informed decisions due to the overwhelming volume and complexity of data. The 1Clearsense Data Exploration & Transparency Viewer aimed to address this challenge by providing a streamlined and interactive interface for exploring and analyzing healthcare data.

User Research and Personas

To understand the needs and pain points of target users, we conducted extensive user research, including:

• Interviews: Interviews with healthcare professionals, data analysts, and administrators.
• Surveys: Online surveys to gather quantitative data.
• Observation: Observing users interacting with existing data visualization tools.

Based on our research, we identified two primary user personas:

• The Data Analyst: A skilled professional who needs to analyze large datasets to identify trends and insights.
• The Healthcare Professional: A clinician who requires easy access to patient data for informed decision-making.

Design Process

1. Information Architecture: Created a clear and logical structure for organizing data, ensuring easy navigation and accessibility.
2. Wireframing: Developed low-fidelity wireframes to visualize the layout and flow of the interface.
3. Prototyping: Built interactive prototypes to test user interactions and gather feedback.
4. Visual Design: Designed a visually appealing and intuitive interface that aligns with the 1Clearsense brand.
5. Usability Testing: Conducted usability tests with target users to identify usability issues and gather feedback.

Key Features and Benefits

• Interactive Data Visualization: Provided a variety of visualization techniques, such as charts, graphs, and maps, to explore data in different ways.
• Customizable Dashboards: Allowed users to create personalized dashboards to track key metrics and trends.
• Data Filtering and Segmentation: Enabled users to filter and segment data based on various criteria, such as patient demographics, diagnoses, and treatments.
• Data Export and Sharing: Facilitated data export and sharing for further analysis or collaboration.

Outcomes and Impact

• Increased Data Accessibility: The viewer provided users with a more accessible and intuitive way to explore healthcare data.
• Improved Decision-Making: By visualizing data in a meaningful way, the viewer helped healthcare professionals make more informed decisions.
• Enhanced Collaboration: The ability to share data and insights fostered collaboration among different teams.
• Positive User Feedback: Users reported high satisfaction with the viewer's ease of use and effectiveness.

Lessons Learned

• Iterative Design: The importance of a user-centered design process and continuous iteration based on user feedback.
• Accessibility: The need to prioritize accessibility to ensure the tool is usable by a wide range of users.
• Data Security and Privacy: The criticality of implementing robust data security measures to protect sensitive patient information.

By focusing on user needs, providing a visually appealing and intuitive interface, and continuously iterating based on feedback, the 1Clearsense Data Exploration & Transparency Viewer successfully addressed the challenges faced by healthcare professionals in understanding and utilizing complex data.

UX Design Case Study: 1Clearsense Data Quality & Potential Duplicates Report

View All Design Experience

Project Overview

Goal: To design a user-friendly and informative report that effectively communicates both data quality metrics and potential duplicate data within the 1Clearsense platform.

Target Audience: Data analysts, data scientists, and data quality professionals.

Challenges

• Complex data: Potential duplicates can involve various data attributes and matching criteria, while data quality metrics can be abstract and challenging to interpret.
• Large datasets: Reports may need to handle significant volumes of data.
• Technical terminology: The concepts of data duplicates and data quality metrics can be unfamiliar to some users.

Design Approach

1. User Research:
• Interviews: Conduct interviews with target users to understand their needs, pain points, and expectations.
• Surveys: Gather feedback on existing data quality reports and identify areas for improvement.
2. Information Architecture:
• Organize data: Structure the report to present data quality metrics and potential duplicates in a logical and intuitive manner.
• Prioritize key metrics: Highlight the most important metrics for the target audience.
3. Visual Design:
• Clear and concise: Use simple and effective visualizations to communicate complex data.
• Consistent branding: Adhere to the 1Clearsense brand guidelines to maintain a cohesive experience.
4. Interaction Design:
• Filtering and sorting: Allow users to filter and sort data based on various criteria.
• Drill-down functionality: Enable users to explore specific data quality issues or potential duplicates in more detail.
• Export options: Provide options to export data in different formats (e.g., CSV, Excel).

Key Features

• Interactive data table: A sortable and filterable table displaying potential duplicates with relevant attributes.
• Data visualization: Charts and graphs to visualize patterns and trends in duplicate data and data quality metrics.
• Similarity score: A metric indicating the level of similarity between potential duplicates.
• Data quality scorecard: A comprehensive overview of overall data quality across different dimensions.
• Contextual information: Additional details about each potential duplicate, such as source systems or data quality rules.
• Actionable insights: Recommendations for resolving duplicates or improving data quality processes.

Design Outcomes

• Improved user experience: The report provides a clear and intuitive way to identify and analyze both data quality issues and potential duplicates.
• Increased efficiency: Users can quickly identify and address data quality problems and potential duplicates.
• Enhanced data accuracy: The report helps to ensure that data is clean, consistent, and free from duplicates.

Example Visuals

By combining data quality metrics and potential duplicates into a single report, the 1Clearsense Data Quality & Potential Duplicates Report can provide a comprehensive overview of data health and empower users to make informed decisions about data management and improvement.