How might we create a consistent user experience?

Fragmented design and duplicated work across Gecko products The research and discovery phase

Problem definition

The main issue was that Gecko Engage and Gecko Chat were really inconsistent with each other. Both products had similar features but were built with different tech and had totally different interfaces. This created silos in the engineering teams, so some areas ended up under-resourced and the design was a bit all over the shop.

Without a proper design system, teams kept wasting time rebuilding the same components again and again. It meant the user experience was fragmented and product development was just way less efficient than it could've been.

Alignment of stakeholders

I ran conversations with the key people: product managers, designers, and developers from both teams. A few things really stood out from those chats:

• Design were frustrated with inconsistent UI components and the lack of reusable patterns across products
• Engineering were struggling because they kept re-implementing the same components differently for each product, which was slowing everything down
• Product managers were worried about the inconsistent UX. It was causing brand fragmentation and making delivery timelines drag

This feedback made it pretty clear what we needed: a unified design system that would bring consistency, speed up development, and make it easier for different teams to actually work together.

Strategic planning and turning UI chaos into a cohesive system The planning phase

Establishing design principles

The design system was built around four core principles:

• Consistency - Create components that work seamlessly across products and devices
• Scalability - Make sure components are modular and adaptable for future growth
• Accessibility - Build inclusive components that stick to WCAG 2.1 standards
• Reusability - Design components that can be used across different applications without much modification

These principles guided every decision we made whilst developing the design system.

Audit of existing design assets

I did a full audit of the existing components across both products. This involved:

• Cataloging existing UI elements (buttons, modals, form elements, that sort of thing) to spot patterns, redundancies, and inconsistencies
• Mapping out where UI components were being reused or rebuilt across Gecko Engage and Gecko Chat

The audit threw up some interesting results. For example, we discovered that Gecko Chat was using seven (!!!) different dropdown variations. Instead of reusing existing components, bespoke dropdowns were being created to do the same things - this definitely had to change!

Collab with the engineers

I worked closely with Scott and the engineering teams to make sure the design system would be scalable and aligned with our chosen front-end framework, React-Bootstrap. We implemented design tokens for consistent use of colours, typography, and spacing across products (I'd already created this in my Figma design system so we could crack on with that pretty quickly). This meant developers could implement the components consistently in the codebase, which reduced discrepancies between design and development.

A key challenge was making sure components were responsive and scalable across different screen sizes and platforms. By building the design system on React-Bootstrap, we could leverage its responsive grid system and scalable components, but for more custom elements like emoji pickers, chat bubbles, and command windows. We had to build them from scratch or use other React libraries, making sure they fit seamlessly within the overall system.

Creating a reusable, accessible system to bridge product silos The design phase

Component design

To our advantage I'd already spent time building a Figma design system, so all components had been pre-designed which meant we could build straight away.

When designing the Figma library my focus was on flexibility and adaptability:

• Variants of common components like buttons, badges, alerts. These were designed so they could handle different sizes, colours, states (hover, active, disabled), and types (primary, secondary, outlined)
• Input fields are the main driver of our product and were designed with accessibility in mind, making sure there was proper colour contrast for error states and a clear focus state for keyboard navigation
• Chat-specific components, like avatars, chat bubbles, and emoji pickers, had to be custom-built. We created these with scalability in mind so they could easily be updated without causing disruption

Documentation

I led the creation of comprehensive documentation for the design system, where each component was documented with:

• Usage guidelines - Describing where and how the component should be used
• Code snippets - Provided for easy integration by developers
• Accessibility considerations - Including keyboard navigation, proper labelling, and WCAG compliance

This documentation became the single source of truth for both designers and developers, reducing miscommunication and making sure collaboration across teams ran smoothly.

Accessibility

Our product is used extensively in the education sector, where accessibility is at the forefront of all institutions' minds, so we made sure accessibility was built into the design system from the start. Every component was tested for:

• Colour contrast to meet WCAG 2.1 guidelines
• Keyboard navigation to make sure components could be fully navigated without a mouse
• Screen reader compatibility for users relying on assistive technologies

Rolling out the system strategically to ensure cross-product consistency The rollout phase

Once the design system was in place, in collaboration with the engineering department we discussed the best way forward for rolling it out into the wild. We had two options to weigh up:

• Do we deploy it to the Engage platform which already runs on React-Bootstrap but is the more complex product, or;
• Do we implement React-Bootstrap in Chat and deploy the new design system from there

We were all in agreement that neither option was straightforward, but with the Chat product being significantly less complex, we felt it would be easier to implement the design system there first. After successful deployment, we then rolled it out across the Engage product. This cross-product implementation made sure there was a consistent user experience across the entire Gecko platform and removed all the front-end silos that existed before.

The design system became the foundation of product alignment Measuring success and key takeaways

Measuring success

Post-launch, we tracked several key metrics:

• New feature delivery times improved by >25% because of the reusable nature of the components
• Significant reduction in remedial tasks flagged in our annual VPAT test
• QA and design spent less time fact-checking implementation, freeing up resource to tackle other projects and tasks

Takeaways

• It highlighted my ability to balance the differing requirements of two distinct products whilst making sure the design system remained scalable and flexible
• Leading the creation of Gecko Elements enhanced my leadership skills, deepened my technical expertise, and improved my ability to collaborate cross-functionally with both design and development teams
• Gecko Elements provided long-term benefits, including faster feature delivery, improved user experience consistency, and more efficient cross-functional collaboration