Shibi Biju George · MA Web Design + Content Planning · May 2026

When I look back at the first version of the Alf’s Cycles website I handed in last semester, I feel slightly embarrassed, but also glad that I can now clearly see what was wrong with it. At the time, I thought the site looked modern and polished. The dark theme felt sleek, the images worked visually, and technically the pages functioned. But I was mainly looking at it from my perspective as the designer, not from the perspective of someone actually trying to use it.

Someone standing outside in Hatfield trying to quickly check if the bike shop was open should not have to scroll all the way to the footer just to find the phone number. That feels obvious to me now, but it honestly was not something I had properly considered during the first version.

This redesign came from taking that feedback seriously and rebuilding the site around what the user actually needs rather than what simply looks impressive on screen.

Part One: What the Original Got Wrong

The HTML structure lacked meaning

One of the biggest problems with the original site was how I used HTML elements. I treated many elements simply as layout containers rather than thinking about their semantic purpose. The element I misused most was section. I used it almost everywhere without considering whether the content actually represented a distinct section of the page.

A section element should represent a meaningful block of content with its own heading. Screen readers rely on this structure to understand the page properly. On the homepage, I had an article nested inside multiple unnecessary sections that added no meaning at all.

There were several smaller semantic issues as well. The footer navigation links were not grouped inside a proper list, which reduced accessibility. I used figcaption outside of a figure element, and I misused the mark element simply as a visual label. None of these mistakes were catastrophic on their own, but together they created a site where the code did not properly reflect the content.

SEO and page structure problems

All four pages originally used the exact same title tag. That is a significant SEO issue because search engines rely heavily on titles to understand what each page contains. Using identical titles meant the pages competed against each other rather than supporting each other.

There were also no meta descriptions, no geolocation metadata, and inconsistent heading structures. Some pages did not even contain a proper h1 heading.

The contact form was inaccessible

The contact form relied entirely on placeholder text instead of proper labels. This is a common accessibility mistake because placeholder text disappears once the user starts typing.

The redesign fixes this by properly associating every form field with a label element using matching for and id attributes.

The original site also lacked a skip-to-content link, forcing keyboard users to tab through every navigation item before reaching the main content.

Responsive design was treated as an afterthought

The original CSS used desktop-first max-width media queries throughout. I was designing for large screens first and then trying to patch problems as the screen became smaller.

The redesign uses a mobile-first approach with min-width media queries instead. Starting from the smallest screen size and progressively enhancing the layout created a much more reliable responsive structure.

The dark theme felt too heavy

The original all-dark design made the site feel closed in and disconnected from cycling as an outdoor activity. Looking back, it felt more like a technology startup than a local bike shop.

The redesign still uses dark sections, but more intentionally. Dark backgrounds are now balanced with warm off-white areas to create contrast and rhythm instead of overwhelming the entire site.

Part Two: What Changed

The HTML now reflects the content properly

The redesign began with a simple question for every part of the page: what is this content actually supposed to be?

• section is only used when content has a meaningful heading.
• article is used for self-contained service cards.
• address wraps the shop contact details.
• dl is used for the homepage statistics because they are definition pairs.

I also removed unnecessary wrapper divs wherever possible. The CSS now relies more on structural selectors and page-based targeting rather than excessive class names.

PHP includes simplified maintenance

Shared elements like the header, footer, and head content are now loaded using PHP includes. This means updating navigation or shared content only requires editing one file instead of every individual page.

The hero section was redesigned around usability

The homepage hero now fills the full viewport height with a large cycling image and a dark gradient overlay that keeps the heading readable without hiding the image itself.

The heading uses Instrument Serif, with the second line displayed in italic lime green to match the brand colour used throughout the site.

Immediately below the hero is a strip containing the shop address, clickable phone number, and opening hours.

Alternating sections create visual rhythm

The two sections immediately below the hero were also redesigned carefully to create a stronger visual flow throughout the homepage.

The Your Local Bike Experts section uses a dark background with a white Instrument Serif heading and a lime left-border accent. A full-bleed workshop image fills the right side of the layout at exactly the same height as the text content.

Below that, the Bikes, Repairs and Accessories section switches to a light background, with the image placed on the left and the text on the right. This alternating dark and light rhythm helps the page feel more balanced and visually engaging without relying on unnecessary decoration.

Both sections use CSS Flexbox with align-self: stretch, ensuring the image and text columns always remain equal in height regardless of screen size.

Typography choices improved readability

The site uses Instrument Serif for all headings and Inter for all body text, navigation, and labels. Instrument Serif gave the site a more editorial and confident personality, especially when paired with its italic variants used in the lime accent text within the hero section.

Inter was chosen because it remains extremely clean and readable across different screen sizes and devices. Together, the two typefaces create a balance between personality and usability.

Accessibility became part of the structure

Accessibility was considered from the beginning rather than added afterwards. Every page now starts with a skip-to-content link, all form inputs have associated labels, and decorative icons are hidden from screen readers using appropriate ARIA attributes.

JavaScript does one practical job

The JavaScript only handles the opening hours feature. It reads the current time from the browser, highlights the current day in the footer, and updates a live status badge showing whether the shop is currently open or closed.

Performance improvements

Images are now optimised properly using preload hints, lazy loading, async decoding, and explicit width and height attributes.

The CSS became much cleaner

The stylesheet is now organised logically into resets, custom properties, base styles, shared components, page-specific styles, and finally media queries.

Looking at Both Versions

The original site had ambition, but the foundations were weak. I focused too heavily on appearance without fully thinking about usability, accessibility, and semantic structure.

The redesign is much more grounded in what a real visitor actually needs from the site. It is not only visually stronger, but also more accessible, easier to maintain, and far more reliable across devices.

Declaration of AI Tools Used

In the interest of academic transparency, this project involved limited use of AI tools during both the writing and development process.The overall design direction, HTML/CSS/PHP implementation, accessibility improvements, responsive layout decisions, testing, and final evaluation of the Alf’s Cycles redesign were completed independently by me.

ChatGPT (OpenAI)

Used mainly for proofreading, refining sentence structure, and improving clarity within written reflective content.

Claude AI (Anthropic)

Used during the drafting process to help organise ideas and improve the flow of longer reflective sections.

The final website, including all design decisions, accessibility implementation, coding work, and reflective analysis, represents my own original work.

Shibi Biju George
MA Web Design + Content Planning
May 2026