UX/UI Methodologies

• Component research
• UI design in Figma
• Style guide and pattern library
• Documentation in Notion
• Implementation and QA/UAT process
• Component updates/maintenance

As the lead designer for this project, my role consisted of finding the right tools to build and house our design system. We created our components starting with atomic design (the smallest building blocks including colors, typography, buttons, etc) and scaling to molecules and organisms. Throughout the design process, it was important to make sure all our components and design patterns were accessible and simple to navigate for our typical patient, as well as delightful to use.

The problem

Inconsistency across webpages including fragmented padding guidelines, color usage, and general look and feel.
Duplication of frequently used components with no real guidelines for usage or specs.
Inefficient workflow between designer and developer with many one-off decisions made rather than system-wide decisions.
Accessibility concerns including color contrast and font sizes that did not meet WCAG standards.

Goals and benefits

Single source of truth for designers and developers, including components, patterns, and styles.
Increases consistency and efficiency using design principles based on atomic design.
Follows best UI/UX practices
Meets WCAG 2.1 AA accessibility requirements

Starting with the style guide

In close collaboration with our senior designer, we put thoughtful decisions into our branding and style refresh. A particular focus was prioritizing accessibility in areas including color, typography, and touch target sizes to name a few.
‍
Our style guide consists of:

• Branding (e.g. color, typography, icon library, logos)
• Breakpoints and grids
• Border radius
• Image and photography guidelines
• Voice and tone

Creating the component library

Component audit

‍We reviewed existing symbols in Sketch that we wanted to bring over into Figma. I redesigned them and created reusable components.

Research and development

‍New components also needed to be added to our library. We researched existing patterns in the wild to inform expansion of our design system.

Documenting in Notion

Documentation

Every component and block was thoroughly documented in Notion, including purpose, behavior, states, breakpoints, and accessibility considerations.

Syncing visual specs

Every documented item in Notion has Figma links of visuals that are live and updates in real time.

Migrating to a new content management system (CMS)

At this point in time, our team and the development team had chosen to move forward with Contentful as our new CMS. We chose this new CMS as it gave us flexible options to control how our components and blocks are utilized as well as input our own fields, help text, and control displays.

Storybook integration

We implemented Storybook to serve as the source of truth for developers to utilize consistent code across all of Sharp's many products. Storybook acts as a dynamic guide for our code components, offering developers a separate space to create, view, and test UI designs away from the production environment. We also integrated this with Chromatic for automated visual regression testing which guarantees alignment between design and development, speeds up quality assurance processes, and offers a well-documented, definitive reference for engineers working on component implementation across various applications.

Impact at a glance

A design system is more than just reusable components - it's about scalability, efficiency, and consistency. By aligning design and engineering through shared standards, we've accelerated delivery, reduced redundancy, and improved overall quality. These metrics capture the tangible impact of that alignment across teams and products.

• Design-to-dev handoff time reduced by 40% thanks to tokenized styles and reusable patterns
• Design QA/UAT rounds cut in half, with fewer onconsistencies between Figma and production
• UI-related bug reports decreased by 60% across the first year of roll-out
• Accessibility issues flagged by Lighthouse dropped by 33%, resulting in nearly 95% accessibility compliance.

We continue to maintain and grow our design system. The latest implementation of Storybook was a large investment but we have already seen it start to pay off as different product teams across Sharp are slowing upgrading their code to pull from the Storybook library.

View our design system

Sharp design system