Nextech Design System
Design System
- Industry – Healthcare
- Component Library
- Patterns and Branding Guidelines
Overview
Nextech only had one designer responsible for all 11 applications. This issue combined with tight deadlines resulted in inconsistent layouts, sloppy codebases, and poor client experience. I was tasked with leading efforts to establish a design system that that helps maintain brand consistency, align our applications with reusable brand elements and to be scalable that allows rapid expansion.
To achieve this, I focused on developing a comprehensive UI kit and accompanying documentation for all components and UX patterns. The UI design approach was based on the Angular Material framework. It offers a suite of pre-designed, customizable, and accessible components, which allows developers to use without starting from scratch.
Tools
Figma, Zeroheight
Framework
Angular Material
Governance Process
Utilizing the Atomic Design approach for all our UI component structures.
I advocated and adopted the Brad Frost’s Atomic Design structure when I took on the project and created all the components in the library.
Library
- Components
- Typography
- Colors
- Patterns
- Guides
- Templates
- Branding
- Documentation
Typography
Focused on a heavy data application, the implementation of a low-contrast typographic scale proved to be a successful approach. By adopting a set of font sizes with minimal differentiation, the designers prioritized readability and ensured that the extensive information presented in tables, charts, and grids remained legible and comprehensible. While the scale lacked distinct variations in size, visual hierarchy was established through font-weight, color, and formatting, guiding users’ attention to crucial data points and sections.
This consistent and structured presentation enhanced the user experience, providing a sense of uniformity and cohesiveness throughout the application. The balance between the low contrast scale and other design elements, such as font weight, line height, and color, was crucial in maintaining differentiation and readability within the application’s interface.
Color Schemes - Light & Dark Modes
Our focus was on enhancing the color scheme of the existing applications, which predominantly featured a blue shade. To ensure
consistency and accessibility across the applications, we conducted a comprehensive audit and proposed a new color system. Our approach involved defining a primary color and an accent color that complemented the existing blue shade. Additionally, we introduced semantic involved defining a primary color and an accent color that complemented the existing blue shades Additionally we introduced semantic colors that adhered to accessibility standards for both light and dark modes. By incorporating these carefully selected colors, we aimed to improve the overall visual appeal and usability of the applications, while ensuring compliance with accessibility guidelines.
consistency and accessibility across the applications, we conducted a comprehensive audit and proposed a new color system. Our approach involved defining a primary color and an accent color that complemented the existing blue shade. Additionally, we introduced semantic involved defining a primary color and an accent color that complemented the existing blue shades Additionally we introduced semantic colors that adhered to accessibility standards for both light and dark modes. By incorporating these carefully selected colors, we aimed to improve the overall visual appeal and usability of the applications, while ensuring compliance with accessibility guidelines.
Components
Portfolio Work
iPad app Redesign, Medical Charting
Tropicana Mobile App
Dollar General Design Challenge
Thanks for scrolling!
Lets connect!