Home My Work About Contact Download CV

Asda Design Guidelines

As Lead Web Designer at Asda, I owned the creative specifications for digital display media. I replaced PDF guidelines with an interactive hub for suppliers and looked after it as an ongoing product, including a redesign for a new CMS with the product owner, account managers and suppliers themselves.

Media implementation rate up from 95% to 98%

Brief

Redesign the supplier-facing guidelines for Asda's digital display media — replacing a PDF-based process with a structured interactive hub built around how suppliers actually work.

My Role

Lead Web Designer — responsible for defining the creative specifications, designing the banner templates from scratch, and redesigning the entire guidelines experience based on supplier research.

Client
Asda
Role
Lead Web Designer
Audience
Asda suppliers
Replaced
PDF-based guidelines
UX Research · Problem Framing

Problem Statement

Suppliers were moving to self-service banners, so they had to get their artwork right without someone manually checking every piece. The existing guidelines were PDFs, structured around internal logic rather than how suppliers actually used them. Non-compliant submissions were common, and the account team was fielding the same questions repeatedly.

Those two signals, rejected media and repeated questions, came from the account managers who dealt with suppliers every day. They became the starting point for what the guidelines needed to fix.

Context · Ownership

Background

As Lead Web Designer, I was responsible for the full creative specification process for Asda's digital display media — designing the banner templates and UI toolkit from scratch, defining technical requirements, and setting the WCAG accessibility standards suppliers had to meet. Owning the specs end-to-end meant I also had visibility of where they were breaking down.

The scale made that matter. In 2021 the campaigns team handled around 3,000 campaigns and 19,000 media assets, peaking at over 900 assets in a single week before Christmas. At that volume, every rejected banner or repeated question added up.

The guidelines were an ongoing product rather than a one-off project. I replaced the PDFs with an interactive guidelines hub, then looked after it and improved it over time. When Asda moved to a new CMS, the hub had to be redesigned to work within it, which became a natural point to test it with suppliers and improve what wasn't working.

Stakeholders · Collaboration

Who I Worked With

The CMS redesign meant balancing the needs of three groups.

The CMS product owner

Owned the new platform and its component library. I worked with them to understand what the CMS could and couldn't support, and to map the original page structure onto its standardised, modular components.

Account managers

The people suppliers came to with questions, and who handled rejected media. They knew where suppliers were getting stuck, and they needed the guidelines to cut down the back-and-forth so suppliers could work independently.

Suppliers

The end users: brand design teams and agencies creating banners against Asda's specs. They needed to find the right format, understand the requirements and get the template quickly.

Information Architecture · UI Design · Build

Process & Approach

Rather than updating the PDFs, I rebuilt the guidelines as a bespoke interactive hub — structured around how suppliers browse and make decisions, not how the information had always been internally organised. Each media format got its own dedicated page with in-situ examples, accessibility guidance, downloadable templates, and direct links to the relevant Photoshop UI toolkit.

The hub was aligned to Asda's brand guidelines throughout. When it moved to the new CMS, I kept the original architecture suppliers already knew, but rebuilt each page from the CMS's standardised components. The trade-off was less bespoke layout in exchange for pages the wider team could maintain without me.

Asda Design Guidelines early wireframe, before supplier testing
Asda Design Guidelines final design, after supplier testing

Early wireframe (left), and the final design after supplier testing (right), with breadcrumbs and the "Jump to" navigation added.

Research · Synthesis · Iteration

Usability Testing

I'd started from assumptions about what suppliers would look for first. Testing showed the bigger problem was somewhere else entirely.

Before the CMS version launched, I ran separate calls with five suppliers, a mix of regular submitters and those with a history of rejections. Each was given the same task: find the specs for a specific format, check the accessibility requirements, and download the correct template. I observed without steering, then mapped the feedback to find common patterns.

Five insights emerged, each pointing to a specific gap. After making the changes, I ran follow-up sessions to check they had worked.

Insight 1 — Suppliers lost track of which package they were in

Asda's media offering was structured across five packages — Basic, Standard, Audience, Rich, and Premium. As participants moved between pages to compare formats, they lost track of which package they were browsing. Breadcrumb navigation was introduced so suppliers always knew where they were in the hierarchy and could step back without starting from scratch.

Insight 2 — In-page navigation wasn't obvious

Within each package page, suppliers were hunting for their specific format rather than reading top to bottom — but nothing signalled that the anchor links would jump them directly to it. Adding a "Jump to:" label made the function immediately clear and reduced the time spent scrolling in follow-up testing.

Insight 3 — Accessibility requirements needed visual context

This was the most important finding, and one the whole project had missed. Everything was set up for suppliers to supply their own artwork, but they had no way to see how it would actually look on site.

Suppliers couldn't internalise the accessibility requirements because the relationship between supplied dimensions and actual display size wasn't obvious. A banner delivered at 1000px wide might render at 400px on site — making text that looked fine at source potentially fail at the point of display. On top of that, Asda's UI dynamically overlaid elements like promotional roundels on banners, meaning content outside the safe zone would be obscured entirely. To make both constraints visible, I built the Artwork Checker Tool: it detects the template from the supplied dimensions and shows suppliers exactly how their artwork will appear on site — at the correct scale, with safe zone overlays applied.

Insight 4 — The Photoshop toolkit needed guided onboarding

Suppliers had the right file but no clear entry point into it. File structure, layer naming, and export settings weren't obvious without guidance. A step-by-step video tutorial was added to the toolkit section, walking through exactly how to use the file and export at the correct spec.

Insight 5 — Suppliers had no sense of progress through a long page

Each package page covered multiple formats across a significant amount of content. Suppliers working through it linearly had no indication of how far through they were or how much remained. A progress bar added to the top of the page gave them that reference point at a glance — and in follow-up testing, more suppliers reported reading to the end.

Impact · Outcomes

Results

The media implementation rate rose from 95% to 98%, and supplier questions to the account team dropped by about half. At the volume Asda's campaigns team was working at, that shift in the rejection rate had a real operational impact.

The Artwork Checker outlasted the project it was built for. What started as a response to a single usability finding became a core part of Asda's internal media approval process — used to verify artwork before any banner went live. At peak periods that meant checking more than 1,000 banners.

95→98%

media implementation rate

~50%

fewer supplier questions to the account team

1,000+

banners checked at peak periods via the Artwork Checker

Reflection · Next Steps

What I Learned

The biggest shift was treating the guidelines as a product with users, not a document. Rejected media and supplier questions showed where things were going wrong, and testing with suppliers showed why.

If I picked it up again, I would:

  • Add analytics, to see which formats suppliers looked at most and where they dropped off.
  • Use the Artwork Checker's results to find the most common failures, and feed those back into the guidelines.
  • Set up a regular check-in with account managers, so new supplier questions shaped the next round of changes.

Contact me

For freelance projects or employment opportunities, please get in touch.

LocationUK / Remote