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 a lack of design consistency I started working on a UX focussed product strategy, collating all of our disparate user feedback channels such as customer service emails, on-site surveys and usability testing feedback. I attributed top level ownership (e.g. editorial, usability, technical etc) and primary frustrations (e.g. lack of dark mode, hard to navigate site etc) to each feedback line item.
From there I was able to plot each theme against its value (qty of times the frustration was mentioned) and complexity (using certain assumptions in the short term), which you can see in the graph below (themes have been obscured as they are sensitive to ESI Media. I noticed that themes referring to general UI inconsistencies and accessibility concerns were common, and relatively simple to fix, so were tagged as "easy wins." This provided a business case as to why we needed a robust design system as soon as possible.
Both a visual and CSS review of the site uncovered many inconsistencies, ranging from colours, logos, spacing and more. It became a priority to codify, and in some areas define, the design principles that we wanted to adhere to moving forward.
I pulled together a problem statement that the team could rally behind:
"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 laid out a three tiered approach to solving our problem:
1) Build sketch libraries that form the backbone of our design process & provide large efficiency gains to our current workflow.
2) Codify our brand and UX/UI guidelines within a style guide platform. Allowing new designers and third parties to understand our principles quickly.
3) Work closely with our developers to develop and use a “common language” that translates modular components into reusable code utilities.
Before building the sketch libraries that would help us build a much more systematic way I researched a number of library structures. The one that made the most sense for our use case was atomic design principles. This structure used the idea of modular components that could be combined to create more complex elements.
Atoms form the lowest level of complexity and can therefore be used individually or in conjunction with other components. An example of an atom would be an icon, such as a search magnifying glass.
Molecules are the next step in complexity and are usually multiple atoms pulled together to form a more complex component. An example of a molecule would be a social share bar, which includes each individual social icon and the bar shape itself.
Organisms are the most complex components and are usually multiple molecules pulled together to define how they work together and should be spaced. An example of an organism is an article on a home page, which includes text styles, shapes and icons.
As we had identified inconsistency of buttons as a key issue on our site we started codifying within our new style guide platform (Zeroheight). This meant defining rules on button types (primary, secondary and tertiary) and states (active, inactive, hover).
We continued to work on other style guide fundamentals, such as text styles, colour and iconography. I ensured our views on screen breakpoints and layout grid were congruent with that of the development team and codified them also.
I ran multiple sessions with the development team to ensure our new atomic design principles worked alongside the utility classes they were building.
Thankfully the concept of nested components was similar within the codebase and so we were able to come to agreement on naming conventions easily.
All Sketch library components were also exported to Zeplin, our developer handover tool. This meant all designs uploaded would link back to their constituent components, allowing developers to know when to reuse and when to build anew.
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.
