Overview

Color is a population health platform that seeks to bring health services to large numbers of people. For this project I worked with the Platform team to improve existing table UI patterns and components for all Color's products.

My Role

Lead Product Designer

my partners

Content Strategist
Design Technologist
Engineers
Product Designers

The Problem

As the use of Color's products and users’ needs expand, so does the demand for new guidelines and UI components (especially for building data tables). We needed to address differing user needs while providing them with consistent UI components and user experiences.

Key Goals

I took the initial problem from 1:1 interviews with stakeholders and broke it down into 2 main project goals.

Understanding Tables (& their users)

I collaborated with each team who helped build the differing tables to better understand their users and identify inconsistencies. I broke down the purpose of the varying tables into 2 categories:

User goals

In the midst of stakeholder interviews, I learned that it would be best to pivot the direction of this project to go beyond design a singular table and flesh out the project to include best practices and UI guidelines. I identified new users to consider in my project.

I found that the biggest arching user needs aligned with the priniciple goals of this project

Consistency is needed because...

Accessibility is needed because...

research

Now that I built an understanding of the environment, needs, and motivations of users I went ahead and did some research to inspire solutions. I focused on understanding how other competitors account for table navigation with assistive technology tools and component consistency.

Key insights
UI Ideation

Keeping everything I learned in mind, I went ahead and identified all the table component and pattern inconsistencies within our platform and presented them to my team. I included my recommendations for next steps.

Afterwards, I collaborated with a content designer to build out table guidelines in a clear and concise way that promoted accessible navigation.

first mockup of table components guideline

In the end, I took all of my work and presented it to the entire design team in a design crit to ensure it supported and aligned with our overall design system.

Challenges

Throughout my process I faced a few challenges

accessibility

Throughout my process, I kept tabs on areas where I had to make decisions around incorporating accessibility

Final Deliverable

(Recommended to view on desktop screen)

Outcomes

For end users: supported user experience to be more consistent, meaning overall better usability.

For designers: they directly benefited as these guidelines provided a clean consistent UI, they were added to our growing design system.

For developers: reduced unique amount of components to be built, brought up improvements that might have otherwise been addressed cost eng work 1-2 years in the future.

Moving forward/ Takeaways
Reducing compromise on user needs

The initial direction (a single table mockup) that was proposed for this project was narrowing down my scope to focus on either consistency or accessibility. I decided both were essential to account for users and pivoted the direction of this project towards a timeline that would not make my team compromise those needs.

Identifying differing users

Since the project goal was to supplement and expand on the existing guidelines, I had to ensure that my deliverable not only addressed end users' needs but also adapted it to meet the needs of designers and developers and help them better advocate for our users.

Designing with assistive tools in mind

This project required an extensive used assistive tech (AT) to assess accessibility of new components I was building. I collaborated with other team experts to better understand these tools before making any navigational recommendations. A lot of what I learned in expanding the design system will allow me to better advocate for accessibility on any future projects.