Due to an NDA contract, I’m unable to disclose specific contents of my work publicly. If you would like to see my work, reach out at firstname.lastname@example.org
View slide deck
✍🏼 My role
- Define target audience with user stories, user personas, and jobs to be done.
- Design color threshold settings dashboard UI for bar and line charts, scatter plots, single-value indicators, and table visualization types.
- Collaborate with UI engineering to understand constraints and limitations of current component libraries.
- Document project summary, product requirements, design questions, decisions, and resolutions.
⚠️ User need
Users while creating a widget on their dashboard do not have the ability to visually indicate in their data when the values of key metric(s) in their query have gone out of bounds and require attention.
📋 Business requirements
When creating a dashboard widget, a user can select a metric from their query, add one or more individual threshold mappings including a unique color, icon, and input any corresponding value(s).
🧰 Job to be done
When I’m setting up a summary dashboard for my team, I want to create color-coded visualizations that indicate when our assets’ KPI’s are outside the optimal range, so anyone viewing the dashboard can immediately know which assets need maintenance.
Design system Using the design system to build and scale components with design iterations was crucial to designing quickly.
Document Having a constant source of truth, in the design system or in the meeting notes, streamlined the project and focused us on the most important problems to be solved
Accessibility Yellow is a difficult color to make accessible! In this feature, we provided theme colors to WCAG AA compliant standard.
Define, define, define Understanding the differences between visualization types and their color threshold settings informed every step in the design of variant interfaces.
What I learned
- Accessibility - Accessible color thresholds were important because users with visual impairments may have difficulty distinguishing between different colors. By using appropriate color contrast and following accessibility guidelines, such as WCAG AA, we can make sure that all users are able to understand and interact with the information conveyed by color thresholds. This is especially important in data visualizations where color is used to convey important information about the data. Ensuring accessibility in color thresholds makes the information more inclusive and usable for a wider range of users.
- Consistent and scalable UI - by utilizing the design system, I was able to ensure consistency across our product and easily scale designs. Additionally, design systems helped me work more efficiently and effectively, as they provided a single source of truth for design decisions and reduced the need for redundant work. Overall, the design system helped me save time and resources while creating cohesive, high-quality user interfaces.