Championing and managing a sustainable design system to ensure a more holistic approach to design.
Despite having strict editorial guidelines on what journalists can and can’t do when writing a piece, the organisation lacked fundamental UX/UI and brand guidelines. I led the effort to build a UX function from scratch, including developing a robust design system that could be built upon for years to come.
To quantify the impact of inconsistent design, I initiated a UX-focused product strategy by consolidating all available user feedback channels - including customer service emails, on-site surveys, and usability testing reports. Each item of feedback was categorised by top-level ownership (e.g. editorial, usability, technical) and linked to a primary frustration (e.g. absence of dark mode, poor site navigation).
I then mapped these themes on a value-versus-complexity matrix - where value was determined by frequency of mention, and complexity estimated based on short-term feasibility. Although the themes themselves are confidential to ESI Media, the analysis revealed that issues around general UI inconsistencies and accessibility were both common and relatively straightforward to address. These were labelled as “quick wins”.
This insight provided a clear business case for prioritising the development of a comprehensive design system.
A detailed visual and CSS audit uncovered a wide range of inconsistencies across the site - including colour palettes, logo treatments, spacing, and more. This made it clear that we needed to codify - and in some cases define - the design principles that would guide us moving forward.
To align the team, I drafted a problem statement that articulated both the issue and the opportunity, giving us a shared foundation from which to build.
"We do not have a source of truth for all of our design guidelines, assets and components, meaning much of our design work is disjointed and does not follow a common language."
From the problem statement, we defined a three-tiered approach to solve the problem:
Before building the Sketch libraries, I evaluated various structural methodologies and selected the atomic design framework as the most suitable for our needs. Its modular, scalable approach allowed us to break down and rebuild our interface systematically.
Atoms are the most basic UI elements. These standalone components - such as a search icon - form the building blocks of the system.
Molecules are groups of atoms combined to create a functional component. For example, a social share bar includes individual icons and the container element.
Organisms are more complex components, composed of multiple molecules. An example would be a homepage article card, which includes text elements, icons, and containers arranged with consistent spacing.
Given that buttons were a particular point of inconsistency, we began by defining clear rules in our new style guide platform, Zeroheight. This included guidelines on button types (primary, secondary, tertiary) and interaction states (default, hover, active, disabled).
We then documented other foundational elements such as typography, colour palettes, and iconography. I collaborated closely with the development team to ensure consistency on layout grids and screen breakpoints, codifying these standards accordingly.
To ensure alignment, I facilitated several working sessions with developers. Fortunately, the concept of nested components was already familiar within the codebase, which allowed us to quickly agree on shared naming conventions.
To support seamless design-to-development handoff, all Sketch components were exported to Zeplin, our chosen collaboration tool. This ensured that every uploaded design linked back to its corresponding system component - clearly signalling to developers when to reuse existing assets and when to create new ones.
Building a video game from the ground up for Brackeys' game jam 2024.
Overhauling how the whole editorial team runs their news desks day to day.
