It was the digital wild west – random unstable microsites, no visual or behavioural consistency, poor content experience and the demand for whizzy, shiny and superfluous was at an all time high. All of which were impacting financial and campaign support conversions. I was hired to help make sense of it all and develop better standards as we re-platformed the entire digital estate.
30 second summary from ChatGPT
Steve led a comprehensive overhaul of a digital estate plagued by inconsistent microsites and poor user experiences. By developing a design system with over 40 reusable components, he ensured visual and behavioural consistency across platforms.
This initiative resulted in significant improvements, including saving 30-50 hours per week in development time, increasing the authority score in Semrush from the low 40s to high 60s, and making the organisation the first environmental charity in the UK to achieve fully WCAG 2.1 AA conformant donation and membership forms.
Steve’s work exemplifies strategic thinking, adaptability, and a strong commitment to accessibility and user-centered design.
A small sample of how inconsistent the digital estate had become.
Design challenge
As we re-platform the digital estate, how do we establish and maintain standards across different teams and empower editors to craft engaging content and compelling journeys?
Outcomes
- A library of 40+ reusable content components with multiple configurations and usability/SEO/accessibility best practice baked-in
- 30-50 hours saved per week with easier-to-build journeys, less in-line code hacks and error troubleshooting
- Authority score in Semrush climbed from low 40’s to high 60’s from improved content quality
- The first environmental charity in the UK to achieve fully WCAG 2.1 AA conformant donation and membership forms
- Helped with continuity and maintaining standards during the pandemic and a major cyber incident that took systems down for months
The vision
My first port of call was to share a vision with the organisation on what principles will shape the experience – and how we can achieve it.
Celebrate the content – Remove the decorative frilly bits and random use of colour in the interface. Let the stunning nature photography shine and create content that’s clear and easy to consume.
Design with clear purpose – Make every element count and deliver with intention. If we can’t justify why something is there or what value it offers to the user or the business, we remove it.
Accessible to all – Remove the barriers that discourage people from engaging with us. Consider their permanent and situational needs so our cause can be appreciated and supported by all
Top tasks and core content
I was the design representative in 14 core content workshops to gather requirements from 14 business cores so we could map content from the inside out. The top task research carried out by the UX manager and insight team provided a steer on user goals and motivations.
High fidelity visuals
The UX manager put together low fidelity wireframes from the content cores to communicate back-end requirements as early as possible.
My role was to put together high fidelity visuals of the journey within each core, using a component-led mindset.
I had regular playbacks with the product team and editorial leads to refine the requirements and capture feedback at regular intervals.
To validate some of the higher profile cores such as campaigns and membership, we used Wynter to test copy and Maze to test flows and interactions, with participants sourced by the Insight Team.
Breaking it all down, atomically
For each core, I broke everything down into components and foundational styles to rule out any unnecessary anomalies and worked with the business analyst and product owner to define the requirements.
- Design foundations and tokens
- Content components to give editors flexibility within best practice
- Card components that mirrored our supporter journeys
- Accessible form components and field sets
- Structural components, that could adapt with themes
- Define the how and why we use them based on heuristics and UX principles
Design foundations
The brand guidelines had little consideration for digital – colour combinations lacked contrast and some of the decorative devices went against our utilitarian approach. So, the foundations had to adapt to uphold best practice for web.
Using some of the initial vision and high fidelity work, I broke everything down into a coherent type scale, grid structure and spacing guide so we had the responsive foundations in place. And then layered in the visual layer with intentional colour use, interaction, image and elevation.
Content components
Each component needed a clear purpose to exist, it needed to adapt to different breakpoints, it needed to harmonise with other components and it needed to fulfil different use cases and variables so it could be reused.
Cards and supporter journeys
The content strategy defined the purpose of each card type to mirror our supporter journeys – awareness, expansion, commitment, supporter. They were used to surface relevant content and actions at the right moments in a journey.
A card deck or picture card was used as a discovery tool to keep users at the awareness level, which included popular content such tree identification and woods. A feature card was used to move users forward to expansion content that started to open up the relevance and importance of our work and the cause. A call to action was the next level, to encourage a commitment through time, money or voice.
Each card type had a unique purpose and various doctypes. I kept card designs simple and scannable so they could easily adapt to the different purposes. Although they look simple, the architecture behind them required considerable thought and a close collaboration with content, design and development.
Accessible forms
With support from an accessibility consultant, that actually uses assistive technology every day, I created a set of accessible form components to AA standards for developers to build form journeys.
- Clear interaction states that don’t solely rely on colour to show difference
- Validation relative to field reading order with instructional microcopy
- Single column layouts that were chunked into logical sections
- Persistent progress feedback so users can check their details at any point
- Accessible approach to complex interactions such as date pickers
Overcoming challenges
We ran into some aspects that required additional consideration for technical implementation. Working closely with different teams, we found solutions to these design challenges.
- Heading levels and page hierarchy in a flexible component system
- Styling binomial names in the H1 without displaying on card excerpts
- Balancing high quality images with page speed
- Designing accessible PDF’s in line with the EU directive
- Using service design blueprints to streamline inflated business processes
Rolling out standards to the wider digital estate
As part of the digital transformation roadmap, we are gradually implementing best practice and consistent branding across other sites and email. And we are leveraging the flexibility of the main website to bring content over from micro sites and close them down.
Future developments
Integrating Storybook – Better technical documentation · More accuracy for testing · Faster front-end delivery
Emotive design framework – More expressive content · Increased persuasion and trust at points of conversion
Component enhancement – Greater flexibility for editors · More harmonious page flows · Better usability
Acknowledgements
Although I had a big role to play in this piece of work as the design lead with an overall steer on direction, it has been a truly collaborative labour of love. I worked side by side with design, content, digital and comms on delivery, building positive relationships with stakeholders around the organisation along the way.
The design system not only survived, but thrived, during the pandemic and a severe cyber incident that took internal systems down for months.