Mark Godwin Design
Open Menu
I was Head of Design System at EcoOnline, an M&A-driven business, rapidly expanding with multiple IPs, each with varying tech stacks and levels of maturity. With cross-selling as a core objective, I created a design system and lead a team that would ensure consistency across the product line, while also driving scalability and accelerating product development.
EcoOnline
Head of Design System
4 Years
Design System serving 20+ B2B products in EHS, Chemical, ESG & eLearning
Head of Design System, 1 x Senior Designer, 1 x Senior Engineer, 1 x Junior Engineer
Figma, Storybook, Jira, Confluence, Excel, Teams, MS Forms
I joined EcoOnline following its acquisition of Airsweb. With an aggressive M&A strategy, the company had accumulated over 20 products, each with varying tech stacks, interfaces, and navigation—resulting in significant inconsistency.
I was entrusted with establishing a design system to unify the suite, enhancing consistency, scalability, and development efficiency. To achieve this, I built and led a team of highly skilled senior designers and developers.
The core team comprised three members: myself as lead, a senior product designer, and a senior front-end engineer. I supplemented this with contracted junior developers and seconded designers, developers, and PMs as needed.
Saved on Front-End time for components across multiple frameworks.
Saved on icon design, management & implementation.
Implemented processes and procedures for DS operations.
Coded, framework agnostic web components across product suite.
Automated design tokens into dev pipeline using Supernova reducing pixel pushing time.
Maintained a reference sub-domain for all EcoOnline 3rd party users.
Additional sources of truth for components, icons and tokens.
DS drove product and brand for a more unified CX.
Implemented processes and procedures for DS operations.
We opted to build a custom design system (DS) rather than adopting an existing one like Google Material, due to our products' complex needs and unique components. I began by establishing a strong foundation, using a skyscraper analogy to illustrate DS maturity and adoption—starting from the ground up, each level representing increased consistency and refinement. As products integrated DS elements, we saw measurable improvements in user experience and NPS.
The foundation was made up of these key areas:
With these key areas of the foundation outlined I could begin putting together the basics parts of our new design system called Prism. These are the inital first steps you should expect to see in all design systems.
Building a design system from scratch is resource-intensive, especially when defining design tokens for color, typography, and spacing. To accelerate the process with limited resources, I leveraged elements from established systems, selecting IBM Carbon’s Plex Font and icon library for their visual synergy and scalable alignment. While Carbon didn’t include all the icons we needed, particularly for health and safety applications, we used its guidelines to create and expand our custom icon set.
Colours were very specific to EcoOnline following a rebrand of the business that I was involved in. Utilising a very talented product designer, we put together a system of colours specifically for EcoOnline EHS. This would provide functional colours in product along with flexibility for brand and decorative elements.
As is common in web based products we opted for a 4px spacing scale. This would sync up perfectly with the sizing of IBM Plex as a font and their Carbon icons. We introduced a series of spacing tokens for larger and smaller viewports. These sizing values would also be applied to grids and breakpoints to help minimize glitches in responsive layouts and adpative components.
Our legacy products lacked WCAG compliance due to years of updates without accessibility considerations. The design system became the driving force for change, ensuring all decisions on font, color, sizing, and spacing adhered to WCAG 2.1 standards. This provided compliant building blocks, but accessibility goes beyond components. To support this, we also developed design guidelines for creating fully accessible user experiences.
This is non-negotiable. You must have accessibility as a consideration in your products. The design system is the perfect place to drive this. Many countries have accessibility requirements by law. You could potentially lose out on a sale if accessibility considerations and a plan for WCAG compliance is not in place.
⚠️ Important: Even if you have accessible components that doesn't mean you have an accessible product. Make sure you have design guidelines in your design system for creating an accessible experiences.
I saw an opportunity to enhance data capture through our design system, an area often lacking in our acquired products. While not traditionally a DS function, I introduced analytics guidelines to bridge this gap.
For design, we structured components to leverage Figma analytics, tracking how often designers broke components due to misalignment with their needs. For development, we collaborated with the front-end guild to ensure all components and UI elements were “analytics-ready” by incorporating data-ID tags. This enabled funnel tracking, third-party analytics integration, and a live database of component usage—key for scaling the design system later.
With the foundational plan in place, I audited EcoOnline’s apps, initially focusing on our four flagship products (Platform, EcoEHS, Chemical Manager & Learning Manager) while deferring the remaining 16 point-solutions and future acquisitions for later scaling.
Collaborating with UX designers, PMs, and developers familiar with each app, we captured all screens, identifying commonalities in information architecture, navigation, and components. I could then use this information to create a Figma component library, ensuring consistency in product design. Each component included usage guidelines, variants, flows, and rules, enabling designers to apply a unified EcoOnline look and feel while streamlining communication with developers.
For Prism to succeed, it had to be widely adopted and easy to follow. As a one-person design system team at the time, I conducted frequent calls and presentations to onboard product, design, and development teams, holding regular Q&A sessions to ensure engagement.
In the short term, a centralized governance model worked—I met regularly with designers during share-back rituals to catch DS compliance issues early and joined weekly dev calls for alignment. However, with 20 products and packed roadmaps, this approach risked becoming a bottleneck.
To scale, I began defining contribution processes, leveraging passionate developers eager to refine DS components and incorporating insights from our design team’s research to enhance UX across products.
Did we catch everything in our design and dev share backs? Absolutely not!
This is a challenge of scale in design systems, especially in larger corporations with a huge product suite. To resolve this I would need to grow the DS team and get Prism into the development pipeline. The more design system that you can actually 'systemise' in your product pipeline the less likely you are to have things slip through the net. This will enable you to scale your DS and products while also increasing velocity.
Using Supernova, I created the Prism website on design.ecoonline.com, serving as a central source of truth for EcoOnline and third-party agencies. This hub housed design guidelines, tokens, assets, and a component library with detailed anatomy breakdowns, enabling developers to apply consistent styling across frameworks.
I then coordinated with product and development teams to refresh our four flagship products with the EcoOnline brand. A key feature was the introduction of a global navbar for cross-product navigation, supporting the DS’s primary business goal - driving cross-sell opportunities. This approach ensured a more consistent, refined user experience with cohesive branding across the suite.
The feedback was positive but as you would expect, users often fear change! Considering some of our users had been with these products for nearly 10 years and major facelift to the product would likely be met with scepticism.
To mitigate impact to our users I made sure that the facelift did not negatively impact the familiar experience our users had. This meant that IA, flows and patterns remained unchanged. They were now just enhanced with the benefits of the design decisions made such as accessibility improvements. The new nav bar was allowed to keep the product specific functionality users were used to with only minor changes.
I worked with product teams and marketing to ensure that clients and users were informed of the update to the product appearance several months in advance. In addition our UX designers held usability tests with a wide range of users before we went live.
From the beginning, I envisioned Prism DS as more than just a resource for product. It would support other departments and third parties, creating a unified customer experience across product, brand, sales, and marketing. Beyond standard brand assets, Prism provided guidance on presentations, videos, print materials, and sales dashboards, all housed on the design system website.
To manage this scale, I expanded ownership beyond the DS team, enabling representatives from key departments—such as brand, marketing, and eLearning—to contribute. Following our governance model, they could update Prism as needed, ensuring a single source of truth for the "One EcoOnline Experience."
Tokens, components and accessibility became reliable elements for our products.
Prism introduced a consistent look and feel in our flagship products and point solutions.
We began to see improvements on in net promotor scores with DS updates to products.
We achieved strong consistency across EcoOnline’s flagship products, though some minor styling issues persisted, along with unique, product-specific components that required longer-term solutions. As adoption scaled, I assembled a dedicated design system team to further systemize Prism and address these challenges.
The initial success of the design system led to growing demand, but scaling with a team of one was unsustainable for 20 products. I advocated to senior management for treating the DS as a standalone product and service with a dedicated team. They loved this idea, and I began assembling the team.
After being promoted to Head of Design System, my first priority was building a dedicated team. While EcoOnline had exceptional talent, most were committed to packed product roadmaps, and the small design team was spread across multiple projects. To scale Prism, I needed a senior product designer with deep DS expertise and a skilled front-end engineer, supplemented by a contracted junior engineer. Prism couldn't be design-only—it had to provide development-ready assets, not just Figma interpretations. Working with our excellent HR team I found just the members to join my team.
With EcoOnline’s international footprint, my team spanned four time zones - Canada (my base), the UK, Norway, and Romania. Operating in the most westerly zone meant I was always behind in hours, so I prioritized clear communication, defined roles, and structured expectations. To support this, I implemented key design system ops strategies...
I implemented Design System Ops (DSO) using Atlassian Confluence to establish processes, support my team, and serve as a reference for temporary contributors. This centralized hub allowed us to plan, document progress, share roadmaps, and store component APIs, ensuring transparency and alignment across teams.
I set up a Jira pipeline to track design system tickets through design and development, aligning with SCRUM rituals for workload estimation using story points. The pipeline streamlined workflows by allowing design-only and dev-only tasks to progress independently, ensuring efficiency without unnecessary stages.
I made sure that we followed a 3 week sprint cycle that would fall inline with the rest of the business. This ensured that we would have clear sprint goals and deliverables that would line up with the progress of other teams and products.
EcoOnline adopted the Mission Delivery Framework, focusing on outcomes rather than business functions. Aligning with this, I established OKRs for the design system, driving our new main objective: delivering a world-class UX across products.
This approach ensured alignment with our North Star, enhanced productivity, and provided a clear structure for tracking progress. I reported monthly to upper management, highlighting achievements and any resource needs.
Like all EcoOnline product and dev teams, we tracked our OKRs in Jira, structuring epics and stories to align with our missions and objectives. With SCRUM rituals in place, the team had clear scope and delivery timelines, fostering a logical and organized workflow.
This structured approach was well received internally, improving communication, setting clear expectations for coded component deliveries, and allowing us to coordinate with dev teams when additional engineering support was needed.
With 20 acquired products using varied tech stacks (Angular, Vue, React, and non-framework frontends), we needed a unified solution. Collaborating with the front-end and architecture guilds, we decided to build a framework-agnostic web component library for Prism, ensuring compatibility across all products after some necessary version updates.
My team conducted a fresh audit, analyzing component usage, commonality, and impact across the EcoOnline suite. We also reviewed our Figma component library, using these insights to develop a structured plan for building the new Prism web component library.
To eliminate interpretation gaps between design and development, we restructured our Figma library to mirror the events, slots, and calls used in our Storybook instance. This ensured 1:1 parity between design and code, providing designers with structured constraints that aligned seamlessly with engineering requirements.
Web components are frontend-agnostic, allowing seamless integration into any Angular, Vue, or React product. By using a shared Storybook repository, we standardized UI elements across all 20 products, enabling systemized adoption while reducing time and costs.
A component roadmap outlined delivery timelines, with impact vs. effort analyses used to prioritize urgent requests. To maintain design-development parity, my team created APIs, ensuring any developer could contribute efficiently.
Through front-end guild meetings, we optimized developer workflows—introducing the “-pwc” prefix for easy identification and refining error handling and bug reporting via GitHub and Jira. To accelerate adoption, we initially integrated Shoelace web components, replacing them over time with custom Prism components.
Icon management is often an overlooked cost, from creation to implementation across products. With EcoOnline's diverse tech stacks, we needed a single source of truth for icons and a future-proof implementation to minimize developer workload.
We addressed this by creating a Storybook instance to house all icons and logomarks as SVGs, alongside a web component that could be easily integrated into any product. This component dynamically referenced the Storybook repository, allowing updates to icons without developer intervention. New icons could be added while maintaining consistent naming conventions across the suite.
The Prism coded web component library grew to cover 90% of products UI.
Saved on Front-End time for components across multiple frameworks.
Saved on icon design, management & implementation.
By scaling the Prism design system, we significantly reduced production costs, estimating $800K–$1M in frontend development savings and an additional $10K annually in icon design and management.
These estimates were based on mid-level designer and developer rates, factoring in time previously spent creating and updating components. Instead, our centralized approach allowed components and icons to be built once and continuously maintained, with bug fixes and updates handled by a three-person team - eliminating redundant work across 20 product teams.
Additionally, icons were now uniformly implemented across all products. Any future design updates could be applied globally with a single release, ensuring consistency and efficiency.
With EcoOnline's aggressive acquisition strategy, we added Ecometrica, a new flagship ESG product, to our suite. To achieve the "One EcoOnline" vision—unifying and interconnecting our products—the business prioritized Prism DS adoption across all offerings for consistency, scale, and speed.
My team and I led this adoption by defining clear adoption levels and strategies for product teams. The ultimate goal was full adoption, where each product would not only implement Prism but also contribute to its growth. This feedback loop would expand Prism's capabilities, strengthening EcoOnline’s position across EHS, Chemical, and ESG markets.
Our products varied in maturity, with some built on legacy code and others on modern tech stacks, all with busy roadmaps. Adopting Prism DS required careful planning to minimize workload and avoid disrupting users. I worked with each team to develop tailored adoption strategies, including:
Big Bang: A full-scale release applying DS elements across the entire product.
Frankenstein: A hybrid approach, gradually replacing old elements with DS components until full adoption.
Incremental: Updating specific areas (e.g., modules or pages) over time.
Role Specific: Implementing DS elements for complete user flows, such as reports and dashboards for managers.
I created a mission blueprint within our mission delivery framework to guide product teams in adopting Prism DS. This flexible approach allowed teams to integrate Prism without disrupting their packed roadmaps.
The blueprint broke adoption into achievable stages, outlining clear steps and value at each phase. Missions started at "Level 0: Prism Ready", a technical discovery phase assessing front-end updates and design token integration. Subsequent missions mapped the adoption journey, leading to full integration as a "DS Driver."
After completing technical discovery and front-end updates for web component and token usage, I collaborated with product and dev leads to select an adoption strategy. My senior product designer or I then created Figma mockups for each adoption stage, detailing tokens, components, and responsive layouts for developers.
To ensure progress, I held tri-weekly check-ins, aligning with teams' three-week sprints. If additional support was needed, I allocated a DS team member to help products stay on track and meet their adoption goals.
I worked with each product team to capture baseline metrics before implementing Prism DS, allowing us to measure its impact over time. Design system metrics focused on three key areas: Business Outcomes, Prism UX, and Product UX.
Both qualitative and quantitative data were collected through surveys, third-party tracking tools, and user interviews. I provided guidelines for data collection, and results were stored in Design System Ops for full visibility across EcoOnline.
Tracking these metrics helped celebrate successes, drive adoption, and identify areas for improvement—ultimately reducing production costs while increasing scale and speed.
Most of our products achieved the
Every team using Prism reported back increases in speed of production and were positive about its reliability and
Prism DS was successfully adopted by over half of EcoOnline's product suite, driving consistency, improved UX, and increased NPS scores. Teams praised its reliability and enjoyed collaborating with the DS team.
The EcoOnline Suite
