UI.UX
4 Designers
Role:
Creator and Maintance
Tools
Figma
A strong design system ensures consistency, accessibility, and empowers teams to create impactful experiences.
Tofu, created in 2019, is Sharecare’s design system. It's made up of ideas, patterns, practices and tools, coherently organized to serve the purpose of Sharecare's products.
Tofu was designed to adapt to multiple platforms in order to help craft consistent user experiences with unified behaviors and styles, regardless of platform, operating system or device.
The Goal
Ensure consistency and efficiency across Sharecare's products by standardizing components and patterns. Promote scalability, simplify collaboration between teams, minimize asset search time, and ensure products are accessible to all users.
Accessibility
Tofu was created with accessibility in mind as we were committed to making our product easy to use for everyone, including those with vision, hearing, cognitive, or motor impairments. We implemented many standards as defined by the Web Content Accessibility Guidelines and Accessible Rich Internet Applications specifications. Whether you are using assistive technologies like a screen reader, a magnifier, voice recognition software, we aimed to provide a positive experience that will be successful and enjoyable.
Sharecare targets WCAG 2.1 Level A and Level AA success criteria
Design Tokens
Tofu utilizes design tokens to control aspects like color, typography, space, and icons. Design tokens are simply named variables holding visual design specifics. Instead of using hard-coded values (like hex values for color or pixel measurements for spacing), these tokens offer a consistent, scalable approach to user interface design and development.
Iconography and Typography
For Tofu, we primarily used icons from Google's Material Design, complemented by custom icons that follow their guidelines. Our icons are used to convey ideas and actions in the most instantly recognizable way, saving space and avoiding lengthy explanations.
Typography
Tofu's type system is at the core of the interface. It conveys content hierarchy, maintains brand presence, and ensures a consistent, optimized reading experience across our platform.
To provide the best experience, we used native system fonts: Helvetica Neue for the web, Roboto for Android, and San Francisco Pro for iOS. These system fonts enhance load times, legibility, and accessibility.
About Acccessibility
Sharecare works with third party partner Level Access – a Forrester Wave leader in the accessibility space – to audit our digital platforms and provide guidance and training.
We completed our most recent audit in 2023 against WCAG 2.1 Level AA standards. We are at 82% compliance on our authenticated website and have a VPAT certification.
- a Voluntary Product Accessibility Template (VPAT) is documentation of audit results
Accessibility remediation is an ongoing effort, and we remain committed to making continuous improvements as resources allow.
Learnings
This design system is constantly evolving, and integrating accessibility features has introduced new challenges. The process of adapting the system to meet accessibility standards has not only enhanced my understanding of these guidelines but also made me more comfortable with creating flexible, user-friendly components. Working on accessibility has deepened my expertise in ensuring designs are inclusive and usable for everyone.
Additionally, this journey has allowed me to collaborate closely with a larger design team, fostering better communication and teamwork to deliver a cohesive and accessible experience across all Sharecare products.