Before the released of BCBSTN’s mobile app in August 2021, I developed a comprehensive design system from ground-up establishing foundation and guidelines standardizing UI, enhanced usability, and accelerated design-to-development handoff through shared libraries and detailed documentation.
Outlining the structure of the library system
Established main foundational elements & building blocks
Set up component library and screen patterns
Document specifications, guidelines and edge cases
I began the process by outlining overall design architecture using atomic design principles starting with identifying foundational building blocks categorizing components into root elements, atoms (e.g., buttons, fields, lists), molecules (content elements, selection lists), organisms (navigation, card lists, modals), all the way to screen-shell templates.
The system map allows us to look at the overview hierarchy structure and relationship of the elements before investing time in high-fidelity and detail specifications of the components. It also enabled clarifying priorities, aligning on terminology, naming conventions and implementation.
Starting with typography as a foundation, simplifying the headers into three levels of hierarchy primarily used for parent page titles, child headers and highlighting costs. Body text are defined by two levels to support content with varying emphasis. Body 1 is used for general content and descriptions. Body 2 is used for medium emphasis such as sub-labels and footnotes.
To maintain a native feel on both iOS and Android platforms, we chose system default typefaces SF Pro Text for iOS and Roboto for Android. Using platform-native fonts also helped reduce app weight and improved loading performance.
Brand colors of BlueCross BlueShield of Tennessee was used as system colors for primary and secondary UI elements such as buttons, links, and key highlights. Status colors were also defined to indicate success, errors and warnings. A neutral gray colors was setup for surfaces, borders, and typography to support a clear visual hierarchy and maintain balance throughout the interface.
Spacing system based on an 8pt grid was used in typography and components across all screens to maintain visual rhythm, structure and layout consistency.
Elevations applied to elements that needed to stand out, such as action cards and modals helping users quickly differentiate between layered content and actionable components.
For iconography, I've used the open-source Eva Icons and made customized set of icons specific for the internal services of the business. I've arranged and grouped them into category by usage functions, labels, status and navigation.
With the foundational styles defined, I moved on to building components at the atom level creating elements for text containers, buttons, fields and lists.
These atoms were then composed into molecules, such as stacked buttons, labeled fields, search and content elements with icons. Further, I then construct the organisms like navigation bar and top headers that could be dropped into screen templates.
I start creating card components including variations for content display, CTA integration, and contextual icons. Whether showing lists of providers, claims, or plan coverages, each card served as a building block for structured information.
After the library of components was finalized, we've identify predictable interaction patterns across the product and develop shell templates. Setting up a clear pattern for viewing lists (e.g., claims, coverages, providers) category selections and going into detailed screens.
Each screen followed a familiar layout for users reducing cognitive load and increasing their confidence as they moved through the app.
I've created a comprehensive design system documentation hub and published it in Invision and served as a reference point driving alignment between design and engineering throughout the development process.
This documentation outlines the usage guidelines, specifications and edge-cases behavior of the components minimizing back-and-forth during the implementation and improved handoff to match the design prototypes to production.
The scalability of the design system proved valuable when the organization launched a new business initiative developing a separate mobile app for an entirely new product. Because of the scalability of the design system, it was easily repurposed and extended for the new app, drastically reducing design and development hours.
Instead of starting from scratch, the team was able to reuse foundational elements, UI patterns, and components allowing us to maintain brand consistency while tailoring the experience for a different user journey. This demonstrated the design system’s long-term impact across the organization.