Freelance UX/UI DesignerResponsive Marketing WebsiteRecycling / Circular Packaging

Aluminium Loop

Aluminium Loop · Mar 2026 – May 2026

Design Process & Workflow

From Heuristic Audit to Redesign

Four findings from the audit of the live site, each argued from a named principle, then the redesigned pages that answer them.

Step 01

Audit: Hero and About Section

The audit started with the live site rather than a proposal. In the hero, the background image did not earn the space, and the headline block sat off the grid the rest of the page used, which reads as a page still being built. The fix was argued from proximity and consistency and standards. The About section below had good contrast but long, unbroken text; the recommendation was to split it into shorter parts under their own headings and to give the content some visual support, so a reader can recognise what each part covers instead of reading all of it to find out.

Step 02

Audit: The Scroll Barrier

The recycled-can counter filled the whole desktop viewport, so nothing below it was visible and nothing suggested the page continued. A visitor decides within the first few seconds whether to stay, and spending them on one number with no visible next section risks losing them before they learn what the company does. The recommendation was to shrink the can until the next section breaks the fold, using closure and continuity rather than a scroll hint.

Step 03

Audit: The Branch Locator Dead End

The map showed coverage across the country but gave no way to read an actual location: the link to the coordinates opened a separate page, away from everything else. Coming back means the browser's back button, which is exactly where someone looking for a drop-off point gives up. The space beside the map was unused, so the recommendation was to bring the branch table, grouped by region, inline next to it.

Step 04

Audit: Cards, Headings and Logos

The news cards used square corners with a blue drop shadow, a treatment that reads as early skeuomorphic rather than current; softening the radius and dropping the coloured shadow was enough to settle it. Below them, the partner heading was centred while the news heading above was left-aligned, so the recommendation was one alignment rule for every section heading. The partner logos also sat far smaller than their heading, and either a larger size or a carousel would close the gap.

Step 05

Redesign: Landing and Closed-Loop Pages

The redesign keeps a light page with a blue hero and a dark navy footer, and puts the product photography to work. The landing page moves from the brand statement into the closed-loop explanation, then shows the impact figures as a row of compact stat cards instead of a full-screen counter, so one scroll passes through all of it. The same page carries the news cards, the partner logos and the client logos at a consistent size. A separate Closed-Loop Recycling page holds the partnership case with its own figures and photographs.

Step 06

Redesign: About Pages

The About section is split into Our Story, The Founder and What We Do. The founder page was drawn in two versions, one opening on the biography and one on the education, and both put the credentials as a short list beside the portrait rather than inside body copy. What We Do walks through the recycling process itself, including the collection machine, so the claim that the recycling can be checked is shown rather than stated.

Step 07

Redesign: Solutions, Articles, News and Contact

The remaining pages complete the set: the sustainable solutions page for the can and solar lines with the ESG circular impact diagram, the article index with category tabs and an article template, the news and events index with a long-form sample, and a contact page with the map beside the enquiry form. Articles and news share one card pattern and one template structure, so a reader who has used one already knows the other.

Executive Summary & Impact

Minimalism

Aesthetic and minimalist design

full-screen counter reduced to a row so the page reads on

Consistency

Consistency and standards

hero realigned to the grid the rest of the page follows

Recognition

Recognition rather than recall

location table beside the map, not on another page

A redesign of a recycling company's marketing site that began as a heuristic audit of the live site. Each finding was written against a named principle so it could be argued rather than asserted, and the redesign rebuilt the site on what the audit found. Delivered as a complete design; not in production at the time of writing.

01 / Discovery & Heuristic Gaps

Problem & Usability Gaps

The site already carried strong content, but its layout worked against it. The audit found three main problems: a counter that filled the whole desktop viewport, so nothing below was visible and nothing suggested the page continued; a hero headline sitting off the grid the rest of the page used; and a branch map whose locations could only be read by leaving for a separate page. Smaller findings covered card styling and heading alignment that did not match the rest of the page.

Scroll barrier

a full-screen counter with no visible next section

Off-grid hero

headline block misaligned with the content beneath it

Lookup elsewhere

reading a location meant leaving the page for another

02 / Architecture & UX System

Design Decisions by Heuristic

01

Heuristic evaluation

Audit the Live Site Before Proposing Anything

Six sections of the live site were reviewed against named principles, including proximity, consistency and standards, closure and continuity, real-world match and recognition over recall. Naming the principle turned each note from an opinion about polish into a specific fix the client could act on.

02

Aesthetic and minimalist design

Impact Figures Reduced to a Stat Row

The figures kept their prominence but lost the full-screen treatment, sitting as a compact row that lets the next section break the fold. A visitor can see there is more page below, so the content the audit found unreadable now gets read.

03

Consistency and standards

One Grid, One Alignment Rule

The hero headline was realigned to the grid the rest of the page follows, section headings were given one alignment rule, card corners and shadows were brought in line with the rest of the system, and partner logos were raised to the scale of the heading above them.

04

Recognition rather than recall

Location Table Beside the Map

The branch map gained its location table inline, using horizontal space that was already empty. A visitor reads the nearest drop-off point while the map is still in view, instead of leaving the page and carrying the location back in their head.

03 / Verification & Evidence

Before & After by Heuristic

Heuristic	Before	After	Change
Minimalism	Full-screen counter	Compact stat row above the fold break	Continued
Consistency	Hero off the page grid	Aligned to the content grid	Aligned
Recognition	Locations on a separate page	Table inline beside the map	Inlined
Consistency	Mixed heading alignment and card styles	One alignment rule, one card style	Unified

"An audit that says a page looks unpolished can be dismissed. An audit that says the headline breaks the grid the rest of the page follows, and names the principle, is a fix."

— Design rationale · Aluminium Loop

04 / Retrospective

Design Learnings

→

Naming the principle behind a finding is what makes a critique actionable; without it, the client hears taste rather than a problem.

→

A number given the whole viewport reads as the end of the page, not as emphasis: scale bought attention here at the cost of everything below it.

→

A link that leaves the page is a real cost on a site with one main surface, because the visitor has to choose to come back.