Design System Buttons
Redesigned the button component for the Optus App UI Kit to improve consistency, accessibility and scalability.
What is it?
Optus launched a new Design System team, Beam, focusing on web components, while a smaller App UI Kit team tackled the App. I led the redesign of one of the most-used components: buttons.
My design goal was to create a system that was modern, accessible, and easy for designers and developers to use.
My contribution
Audited existing button components
Redesigned for accessibility, consistency and scale
Stress testing the components in Figma
Documented patterns for designers and developers
Company
Optus
Role
Product Designer in the App UI kit team
Timeframe
Product Designer in the App UI kit team
Outdated button style
Every time I looked at the buttons, they felt rigid, formal and corporate. The 8px border radius gave them a stiff, formal appearance, and states were inconsistent—there was no clear focus state for accessibility, no proper disabled style, and secondary buttons have an odd white fill on coloured backgrounds. It's a sign for us to redesign a fresh, consistent button systems that reflect the modern, friendly look Optus was aiming for.
Laying the groundwork
Before diving into design, I needed to understand what I'm dealing with. I audited every button across the App and web, then did competitor analysis on how other design systems handled size, spacing, and interaction. Since we have daily stand-ups to align on priorities, I'd make use of that time to share my findings and discuss with the crew. Once the initial component list was scoped, buttons were assigned to me, and I began deep research to uncover trends, gaps, and opportunities.
Interviewing the team
Research didn’t stop at desktop analysis. I set up interviews with designers and developers across App and Web teams to understand their frustrations and desires. These conversations helped validate assumptions from the audit and revealed real-world issues that weren’t obvious in the screens themselves, like buttons that were hard to implement or edge cases that weren’t considered.
Defining what to design
With insights in hand, I started to define the button system: what types we needed, which states were essential, and how styles should work together. I brought early ideas to design stand-ups, discussing options with the team and iterating on their feedback. This collaborative approach made sure that the system would meet both design and development needs.
Creating the buttons
I designed the buttons to be intuitive for designers and predictable for developers. We aligned on radius, height, width, spacing, and text styles, making sure colour contrast met accessibility standards. I illustrated the anatomy to show how every variant, state, and icon worked together, giving the team a clear visual reference.
Stress test the buttons
Designing on a blank canvas wasn’t enough, so I partnered with a junior designer to stress test the components on real screens. We tried them in dark mode, against complex backgrounds, with long labels, and in edge cases like loading or destructive actions. Iterating through these tests made sure the buttons were usable and adaptable, which then I could handover the components to developers with a thorough Figma specification.
Documentation
To ensure consistent use across the team, I documented the button anatomy, states, and best practices, including clear Do’s and Don’ts. The documentation started in Figma and was planned to live on Beam’s website as the single source of truth for the App and Web teams.
My learnings 💜