Keyavi Design System and Style Guide
When I joined Keyavi, defining a style guide and design system was a top priority.
I collaborated across multiple teams to enhance the user experience, establish and implement a cohesive brand voice, and optimize the product's usability across both desktop and mobile platforms.
Problem
Defining a Style Guide and Design System was a top priority.
Much of the product didn’t meet WCAG standards and was inaccessible.
A Design System didn’t exist - it had never been built.
Consistency across the branding, marketing, product, and different platforms was non-existent.
Resources for updating the product were limited.
Goals
To unify, optimize, and implement the Keyavi Brand Style Guide and Design system, and pass accessibility standards across all branding, product, and platforms.
Research
For this project, I observed users performing standard tasks in order to understand the current experience. In doing so, I noticed:
Inconsistency - controls varied in color, size, usability, font, and messaging
Lack of accessibility - many controls and branded items failed accessibility tests
The overall UI needed an update to meet contemporary standards
Design Process
My team identified key design solutions:
Defining primary elements of the style guide, including logo variations, typography choices, and colors for use across branding and product.
Verifying all prospective design solutions against WCAG.
Building the design system using reskinned third-party controls.
This unified the brand across all platforms, creating an accessible product that builds trust with users while considering our limited resources.
Defining Primary Style Guide Elements
Updating and better defining the color palette
Main font family is Segoe UI.
Noto Sans is used exclusively for the web for licensing and translation reasons.
Logo, variations, and constraints
Defining UI Design System
All design decisions were tested to comply with all WCAG standards.
Buttons
Consistency and accessibility for buttons throughout the product.
Pagination
Clear, consistent pagination with options for as few or as many pages needed.
Tables
Cell variations to makeup any table needed within the product.
Date and Time Selection
Simple, elegant, familiar solution for selecting date and time.
UI Style Guide
Provided to the engineering team.
Results and
Implementation
Despite not advancing to the next phase, the project received positive preliminary reviews.
Hi-fi mockups of the desktop application below.
