top of page
PORTFOLIO
DESIGN SYSTEM
The custom Altais Design System was branded as 'Unity' symbolizing the unification of the patient, provider, and payer experiences, and to support the chief delivery mechanism for reliably and consistently delivering pixel perfect UX and UI. Common understanding of design system value and application required extensive education to gain organization acceptance and commitment to utilize.
Contains the web app desktop components. Mobile version will utilize response design through Q4 2022 when features requiring native operating system level access are needed.
Design System:
1. Organization understanding of Design System
2. Custom Design System plan
3. Typography Example of the 'Unity' Design System
1. Drive Common Understanding of Design System and Value to Users and Company
The first step in delivering a design system was gaining organizational understanding of what a design system is, is not, and then aligning on value, and investment. Determined to use a responsive design approach to support multi-modal; windows app, mobile app., web app., and form factor; desktop, table, phone, and wearable/internet of things. This design system created to initially support web app built on Flutter platform using Swift code base.
2. Custom Design System Build Plan
With organizational understanding and alignment and neccesity to the design system is treated like a product which means scope, budget, and resources are time boxed with milestone deliverables. Below are the phases of the Design System build with links to example artificats.
3. Typography Example
Typography is an invaluable asset for software designers, offering multifaceted benefits that extend beyond mere aesthetics. It holds a central role in user interface (UI) and user experience (UX) design due to its ability to enhance readability, guide user interactions, and convey essential information. The technical complexity of typography lies in the precise selection of fonts, sizes, line heights, and spacing to ensure legibility across various devices and screen sizes. Typography plays a substantial role in brand identity, with the choice of typefaces contributing significantly to a product's recognizability. While it's challenging to quantify precisely, typography typically constitutes a substantial portion of a user interface, often ranging from 30% to 60% or more, highlighting its paramount importance in software design. Mastering typography is key to creating visually appealing, accessible, and effective user interfaces.
Coaching designers is critical toward driving consistency in design standards. In the creation of the Unity Design System, I seeded the following questions to guide the team in establishing the standards and rationale that ultimately led to typography as a design artifact:
With end in mind, consider how other designers would view our typography
1. Semantic Hierarchy - determine accessibility of content
2. Visual Hierarchy - scrutinize number and styles of type
3. Body font-size - account for data density
4. Body line-height - establish line-height ratio, reference WCAG SC 1.4.8
5. Modularscale - reference Tim Brown modular scale to limit font scales to minimal necessary
6. Define H1 - Start with largest font and work down to establish the H-series hierarchy
7. Header line height - establish line-height ratio, reference WCAG SC 1.4.8
8. Leading & Kerning - establish font control within objects
For detailed roadmap and full view of Unity design system
ABOUT US
bottom of page