Modernising Legacy E-commerce Sites

Bringing responsive, modern designs to a 2010 hosting platform

A large part of the work I do at ePages involves updating shops created on older software with new designs. This is a very complex process, working closely with the shop owner from design conception through to implementation. Often the shops are 10-20 years old and the merchants rely on the shops for income.

I redesigned around 20 shops during 2025-2026 (so far). In this project I focus on the technical aspects of this work.

1. Project Overview

Project type

Website design, branding refresh, Sass template design

Role

Project Manager, UI / Template Designer, Web designer, Graphic Designer

Tools

Figma / FigJam

Illustrator / Photoshop

VS Code, Github, Claude

Duration

A project takes 6 - 10 weeks

2. The Process

Styling existing shop elements with Sass

Imagine a website template that hasn't been updated in 10 years.... This is the starting point for most of the legacy shops I work on. In order to implement bulk changes to most of the website design, we implement a complex Sass template. This sheet is minified and connected to the shop through a live Github connection. The original Sass template was set up for us by a partner company based in Finland, and I typically build on this template to further customize each shop with the following:

Custom additions for Sass Template

✓ Write Scss snippets to adapt additional legacy settings

✓ Create custom styling to enhance branding and UX

✓ Add styling for custom html content added to shop

✓ Add Javascript for custom interactions and animations

✓ Modify existing components within Sass structure

Technical Challenges

Working with legacy systems requires creative problem-solving and a deep understanding of both modern best practices and older architectural patterns. Here are some examples of problems we encountered and resolved during our design process:

No two shops alike

Every legacy shop arrived with its own tangle of custom settings, inline styles and hardcoded table-based layouts from 2007. We created a reset strategy with highly specific selectors to override legacy styles without modifying backend templates. Each project required a full audit - and its own tailored solution.

Responsive from the ground up

Most shops had no modern layout to speak of. We introduced CSS grid and flexbox where there was none, and built each shop a custom colour palette, type scale, and homepage design - reusing our component library across markets.

Merchant hand-over

It's one thing to create a nice looking website- it's entirely another challenge to then hand the site off to someone with very limited design experience. I build all of my code so that it's as flexible as possible for the customer to use in the future, and so that I can easily explain to them how to use and update the content.

JavaScript, extended with AI

Over the course of 2025 we discovered how much could be achieved by modifying a shop's existing JavaScript. With Claude and Claude Code as our pair-programmer, I built custom sliders, dynamic filters, and interactive UI elements that older themes simply never had.

Design Challenges

For every shop, in addition to fully restyling all of the legacy code, we do the following to make sure the shop is meeting all requirements and making a positive impression on visitors: