ADMIRALTY Design System

An overview of the roles and activities of a Digital Product Designer, acting as Product Owner to the ADMIRALTY UKHO design system.

The situation:

The ADMIRALTY Design System was initially designed by an external agency in a framework our in-house development team was largely unfamiliar with. It was created mainly as a marketing tool, with limited UX input from the outset. When it was built, developers had to work around certain designs to make them functional in Angular. Over time, our team has been refining its appearance, usability, and accessibility, ultimately merging to StencilJS so that users can create wrappers of the components for all the different frameworks. The design system website is built using React and used inter-changeably between UKHO and ADMIRALTY products, ADMIRALTY is the commercial entity of the UKHO

I inherited the Design System in February 2024. At the time, an external accessibility audit had uncovered a substantial backlog of accessibility issues, which we referred to as the ‘Bug Log’. There was significant pressure from stakeholders to resolve this list quickly, as it was holding up the launch of a new product.

The Design System faced limited buy-in from the Tech Team, which was an issue, given that we only had 12 hours of development time per week to address over 20 accessibility issues. Additionally, the Tech team was using the Design System as a training tool for backend developers interested in UI development, so the team’s skill level varied as they were still learning. The backlog was lengthy list, with no clear ordering or prioritisation, and morale was low. There was also inconsistency across the organisation in how the system was being used due to limited buy-in, which meant we had little insight into whether teams were using the Design System correctly and little capacity to explore this.

The interaction design team felt disconnected from the Design System, viewing it as separate from their work and rarely collaborating. I needed to help them see the value of their contributions and encourage a sense of shared ownership.

The task:

My initial step as the new product owner was to understand what was and wasn’t working for the team. To do this, I arranged for a trusted Delivery Manager to facilitate a retrospective with the team. This helped us align and plan our next steps. From the retrospective we were able to create a list of actions and next steps.

Image of Design System retrospective

Design system Retro

The actions:

Prioritisation and buy-in:

We spent time prioritising the project board, and I asked developers to estimate timeframes for each ticket. Around this time, I also completed the 'Design Systems and Libraries' training with the Nielsen Norman Group. This training gave me a deeper understanding of the value of design systems and their ROI, allowing me to advocate for increased support from senior management effectively.

Standups and ceremonies:

With limited development time, we adapted our standup format to hold a longer session on Monday mornings, during which team members could outline their availability and set realistic weekly goals.

Stakeholder communication:

I engaged with Design System users to understand their needs better. In the past, changes had sometimes been rolled out with limited communication, and users were unclear on the versioning and ticketing expectations. Email updates, and improved documentation have since helped restore user confidence and provided clearer guidance. Our future plan is for quarterly show and tells to the wider business - watch this space.

Interaction design team:

To engage the wider Interaction Design team, I held sessions explaining the Design System’s value and encouraged shared ownership. We created a ‘UX Definition of Done’ checklist and started using ‘Design Spikes’ to give the team hands-on experience with the system. This led to a more collaborative approach, and I introduced weekly design critiques and periodic hackathons, design councils to support their skills development and build team cohesion.

Image of the a healthier looking design system project board

Design system backlog image

The results:

Project board and buy-in:

Through our prioritised project board and new, dedicated training, I successfully obtained increased technical support. An external agency provided a full-time UI developer, which allowed us to clear the ‘bug log’ ahead of schedule, enabling the product launch and satisfying stakeholders. Over 30 tickets were resolved within three months, and the Agency UI Dev’s expertise motivated the team to work more efficiently. As UKHO embraces its 'Digital First' vision, we’re now receiving ongoing support, with plans in place to upskill internal developers and have a fulltime experienced dev on the team and have networked within the business to acquire support from a Test Engineer.

Stakeholder communication:

Through regular updates, show-and-tell sessions, and more detailed documentation, we’ve improved communication and provided clearer guidance for Design System users. We've also introduced content guidelines for component pages and are exploring a new pattern library to support this further.

Interaction design team development:

The design spikes revealed development areas for team members, allowing us to create tailored development plans. The team’s involvement with the Design System has improved their appreciation and understanding of its value, creating a stronger sense of ownership.

 

The future and my learning:

With the rebrand on the horizon and our Design System working closely to meet WCAG standards. I look forward to enhancing design consistency and exploring new ways to ensure its correct implementation across teams and new themes to better represent the different uses of the design system across the UKHO and ADMIRALTY. Additionally, Hotjar testing is allowing us to observe component usage, providing data for further refinement. With improved buy in from tech and our new Test Engineer supporting us we now plan integrating release notes to enable smoother version updates.

Since taking on the Design System, I've become more confident in understanding and speaking the developers' language, and I’ve learned to navigate challenges with limited resources through creative problem-solving and strategic thinking. I look forward to our continued progress and to building on the successes we've achieved so far.

To take a deeper dive into the Design System as it stands please take a look here. If you would like to view my process for creating components for the design system, please take a look at the UKHO Data upload page here specifically the 'read more' components and 'design spikes'.