How might we create a consistent user experience?

So, what's the problem? The research and discovery phase

Problem definition

The core problem arose from inconsistencies between Gecko Engage and Gecko Chat. Both products shared similar features but were built with different technologies and had diverging user interfaces. This divergence created silos within the engineering teams, often leading to under-resourced areas and design inconsistencies.

Without a unified design system, teams spent unnecessary time reworking the same components, which led to a fragmented user experience and inefficiencies in product development.

Alignment of stakeholders

I led conversations with key stakeholders, including product managers, designers, and developers from both teams. Some key insights from these discussions:

• Design had frustration with inconsistent UI components and the lack of reusable design patterns across products.
• Engineering faced struggles with re-implementing the same components in different ways for each product, which slowed down development.
• Product managers relayed concern over the inconsistent UX between the products, leading to brand fragmentation and slower delivery timelines.

This feedback solidified our goal to create a unified design system that would ensure consistency, increase development speed, and allow for greater cross-functional collaboration.

Ok, so what next? The planning phase

Establishing design principles

The design system was built on four core principles:

• Consistency - Create components that work seamlessly across products and devices.
• Scalability - Ensure components are modular and adaptable for future growth.
• Accessibility - Build inclusive components that adhere to WCAG 2.1 standards.
• Reusability - Design components that can be used across different applications with minimal modifications.

These principles guided every decision throughout the development of the design system.

Audit of existing design assets

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

• Cataloging existing UI elements (e.g., buttons, modals, form elements) to identify 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, it was discovered that Gecko Chat utilised seven (!!!) different dropdown variations. Instead of re-using existing components, bespoke dropdowns were being created to achieve the same things - this would definitely have to change!

Collab with the engineers

I worked closely with Scott and the engineering teams to ensure that the design system would be scalable and aligned with our chosen front-end framework, React-Bootstrap. We implemented design tokens for consistent use of colors, typography, and spacing across products (this had already been created in my Figma design system so we could move on that very quickly). This ensured that developers could implement the components consistently in the codebase, reducing discrepancies between design and development.

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

Putting it together The design phase

Component design

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

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

• Variants of common components such as buttons, badges, alerts. These were designed so that they could handle different sizes, colors, states (e.g., hover, active, disabled), and types (e.g., primary, secondary, outlined).
• Input fields are the main driver of our product and were designed with accessibility in mind, ensuring proper color 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 labeling, and WCAG compliance.

This documentation became the single source of truth for both designers and developers, reducing miscommunication and ensuring smooth collaboration across teams.

Accessibility

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

• Color contrast to meet WCAG 2.1 guidelines.
• Keyboard navigation to ensure that components could be fully navigated without a mouse.
• Screen reader compatibility for users relying on assistive technologies.

Out in the wild 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 weight 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 both options aren't 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 ensured a consistent user experience across the entire Gecko platform and removed all front end silos that pre-existed.

Final thoughts Measuring success and key takeaways

Measuring success

Post-launch, we tracked several key metrics:

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

Takeaways

The main takeaways from the project were:

• Highlighted my ability to balance the differing requirements of two distinct products while ensuring that 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.