Octopus Deploy - Design Systems.
Digital Strategy. UX/UI Design.
Octopus Deploy is established in the market place as the go-to product for continuous software delivery. As the product continues to grow, a more robust, flexible design system was needed to handle the scale of growth into the future.
As part of the Frontend Foundations team, my role was to help build the design system. This ranged from visual and written guidelines, newly developed token libraries, and a redesigned component library accessible to all designers.
Laying the foundations that help the product to continue to mature is a truly rewarding experience.
Our implementation strategy began with base elements such as typographic styles, colors and spacing. They were then extended to a token library implemented as a code-based theme for the UI.
These foundations were stress tested to comply with WCAG 2.1 AA accessibility standards.
Shortly after starting at Octopus, I identified that the existing component library used by the design team was inadequate, with many design files using broken and outdated components and variables.
This led me to propose and build a new component library. Through Figma I was able to link our foundations and component libraries which allowed for greater scalability and contribution from the design team.
As our team progressed with the design system work, I undertook a Component Gap Analysis. The analysis highlighted a potential high risk area where components in design and code did not align.
By facilitating team workshops we were able to identify where to focus our energy as a team to close the gaps. We were also able to highlight areas for potential debt that could be communicating to ownership teams and stakeholders.
©Andy Firth | Designer + Creative Thinker. All rights reserved.