Design: UI patterns and components, accessibility
Kickstarted a design system for Hootsuite mobile
What is Hootsuite?
Hootsuite is the largest social media management platform in the world, and a big Canadian success story. Trusted by more than 18 million customers, Hootsuite enables social media managers to publish and send more than 4 million social media posts every week.
Hootsuite’s mobile app across iOS and Android was a patchwork of inconsistent UI. Collaborating closely with engineering, I initiated a design system to create a scalable, predictable, and WCAG AA compliant UI.
What I did
I worked hard to get support for a design system. The engineering teams were on board but the main challenge was convincing product management leadership that the time invested would not slow down feature development.
Together, we agreed to pair any design system efforts to a customer-facing roadmap release. This way, we could iteratively design, build, and retrofit new UI components, optimizing development workflows, tackling technical debt, as well as enhance customer’s experiences in the app.
My process, in a nutshell:
Worked alongside two agile software development teams, product, as well as two other designers who I mentored.
Ran a kick-off to gain alignment and arrive at an approach
Led bi-weekly check-ins and regular prioritization sessions, to ensure alignment and momentum as well as to get input on refining the process.
Results
A nascent design system that serves as a single source of truth for designers, developers, and product managers building for Hootsuite mobile. Two foundational patterns, Colour and Typography, were built and retrofitted, significantly impacting the usability of the app.
Starting with foundations to maximize impact
In the first version of the design system, we focused on “Colour” and “Typography” because they would streamline delivery of the brand refresh project, which is how I gained support for the design system.
For instance, the “Colour” pattern is now connected to a semantic layer in the code, making it easier to update themes in the future.
Building across iOS and Android
It was important for the team to leverage native components whenever possible. Sometimes, we made exceptions, and built custom versions based on use cases.
For example, this “pill” component, is used in different ways across the app. It’s available natively from Material Design’s “chips” but there’s no equivalent in iOS. Does it make sense to build a custom version on iOS? In this case, it did, given the use cases.
Designing inclusively
WCAG 2.0 criteria were considered for every component and pattern in the design system. In this example, I defined an app-wide focus order for users navigating by screen reader.
Collaborative documentation
Designers and developers documented any artifacts, be it Figma components, accessibility best practises, or code structures in a dedicated Confluence space.