← Home

Redesigning the phones range page

The goal of this project was to bring the phones range page into line with the current giffgaff visual standards and to improve the visual hierarchy to make the page more easily scannable. I also had the goal of improving performance and accessibility. The design updated the page to make use of giffgaff's design sytem and used SVG instead of pixelated icons.

The project started with competitor research of a dozen other phone retailers. Multiple ideas were explored in Figma. After several iterations and feedback from stakeholders, I prototyped further design ideas in code. This enabled testing at a wide variety of screensizes and devices. Using mock JSON data I was able to validate that the design could hold up given a wide variety of real-world contexts, image sizes and data variations.

Two design options for the phones range page:

a screenshot of the phones range page showing a variety of phone models in a grid
a screenshot of a differnt iteration of the phones range page design showing a variety of phone models in a grid