UI patterns & accessibility for iOS & Android
Kickstarting a design system for Hootsuite mobile.
The challenge
Hootsuite’s iOS and Android mobile apps were a patchwork of inconsistent UI and hard-coded front-end pieces. With two high-priority company-wide initiatives on the horizon: a brand refresh and WCAG AA compliance, the team needed to address technical debt to support system-wide changes. Moreover, the product management team was keen not to slow down releasing customer-facing features.
My role
Collaborating closely with engineering, I initiated a design system to create a scalable, predictable, and WCAG AA compliant UI. The core team included:
An engineering lead and a senior software developer
One intermediate UX designer, who I mentored and guided in their day-to-day
One product manager
Myself, as a senior designer, leading the designs
We worked together to engage the two mobile engineering teams for feedback and planning. I also sought out feedback from the lead designer for the web client design system.
Approach
I worked hard to get support for a design system. The engineers on the core team were on board because they recognized the need to address the technical debt. The product manager was keen to ensure that the time invested in the design system 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, optimize development workflows, tackle technical debt, as well as enhance customer’s experiences in the app.
My process, in a nutshell:
Ran a kick-off with the core team 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 documented design system in figma and code for Hootsuite mobile.
Two foundational patterns, Colour and Typography, were retrofitted, directly supporting the brand refresh, a company-wide initiative.
WCAG AA compliant global navigation, colour contrast, text-resizing, and text alternatives were retrofitted to high-traffic areas of the apps, significantly impacting usability.
Read on to see a little of my process below. 👇
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.
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.
Reflections
Testing with people who use assistive technology
I wish I’d tested some of the WCAG-compliant designs with people who use assistive tech, such as screen readers or a keyboard. I remember dropping parts of my designs due to time constraints and questions I received from engineers. I didn’t have the confidence to know whether an "in-view” focus order is crucial for people navigating programmatically. At the time — in 2020 — WCAG was very new to me. I didn’t know testing services were available. Since then, I’ve used testing services and plan to continue doing it.