Solving for Accessibility

Initial improvements

The first step to improving the user experience for customers across all HubSpot touch-points was to evaluate the accessibility of our brand components. I started small by auditing the contrast ratios of our brand color system and reviewed the findings with our marketing and product design teams. Unfortunately, I found the majority of our color palette was too desaturated to support strong enough contrast for easy legibility. Based on these findings, the Brand Infrastructure team circulated new guidelines on which background colors to use for body text versus big, bold headlines.

From there, I joined an internal accessibility taskforce comprised of representatives from design, development, and content strategy to draft accessibility recommendations based on WCAG guidelines. We collaborated on recommended updates to existing web assets based on estimated level of effort, as well as general best practices shared company-wide. As a proof of concept, we employed the best practices in our redesign of the Diversity & Inclusion web page—read about the process and our findings here.

web-based component library

The Final Solution

The Brand Infrastructure team conducted competitive research on component libraries as a starting point. The team audited various systems, including their documentation and accessibility best practices. The project lead worked with design and development to draft working definitions of components, patterns, and modules. As a stakeholder, I helped audit existing modules and contributed to requirements. The team estimated the first phase of the library would take two years.

To reduce that timeline, they scheduled two design sprints with a core group of UI and UX designers from the marketing design team focused solely on contributing to the component library. We followed an agile process that included:

• Daily stand-ups to share progress updates

• Over-communication on Slack to reduce duplicative efforts

• Two demos with open Q&A between design and development

• Project management and documentation using JIRA

The final result at the end of each sprint was a set up components built in Sketch utilizing smart symbols and a comprehensive prototype documenting each component, including behavior, types, sizes, and states.

My process

I worked on three components in the first sprint — UI links, popovers, and tooltips. For each component, I began by auditing our digital experiences to understand where and how often a similar component was being used. I also looked for gaps where the component could’ve been used to improve the user experience. I gathered all these examples in Sketch and noted common use cases versus edge cases.

UI Link Component

Based on my audit, I determined three types of UI links were needed:

• Basic: A standalone link typically used as a secondary or tertiary call-to-action

• Leading icon: A standalone link preceded by an icon, typically a left arrow used with a back link

• Lagging icon: A standalone link followed by an icon, typically a new tab icon used for links that automatically open in a new tab or window on click

I built out each type of link as a symbol so that any icon or content could be easily swapped in by another designer. While doing so, I realized we needed a process for standardizing the size and positioning of icons. I reached out to the icon designer to collaborate on a set of square-shaped icons that would scale as needed and align with any content. Once he added the icons to our shared library, I could then finalize padding requirements for development.

POpover & Tooltip Components

Popovers and tooltips were closely related components so I tackled them together. I found a number of inconsistent styles and interactions used across our websites, including long-form tooltips that would be better served as popovers. Clear documentation and use cases could help improve legibility and usability for our customers, and also improve our brand perception by providing a more consistent experience. I documented when to use each type of component with examples of correct and incorrect usage, plus content recommendations.

I consolidated the tooltip components to two color themes - white and dark - and suggested a third light theme for popovers to ensure enough contrast for longer-form content. I built a basic informational popover but recommended the development team build a customizable dialog box component to place within the popover to allow for more flexibility, like including buttons and lists of links.

Next steps

After reviewing my components with the team, I finalized my Sketch files and wrote acceptance criteria in the individual JIRA tickets. The project lead reviewed my criteria, shared feedback on anything unclear, and I finalized my tickets for handoff. Due to the nature of the sprint, I wasn’t the one to QA the final implementation, but I did continue to make myself available for any questions or suggestions. Following the design sprints, the Brand Infrastructure team built the component library in Storybook and launched the library for all marketing creative in late 2021.