OGIO

Research & direction

I started by mapping the site's structural hierarchy and running competitor analysis to understand where the market was heading. This fed directly into wireframes produced alongside the Director of Digital Marketing — the competitor analysis made clear that the category was moving toward editorial-style layouts that let product photography lead, which shaped every structural decision that followed.

The new photography and product palette were pushing the brand toward something brighter and more confident, so I kept the UI clean and restrained to let the visuals do the work. We landed on Oswald for headers — a condensed typeface that holds up in large hero treatments and keeps layouts from feeling cluttered even with rich content.

A modular design system

Workshopping with the OGIO marketing team revealed a core need: flexibility. Different pages would serve different purposes — product spotlights, editorial content, promotional callouts — and the team needed to be able to compose them independently without a dev ticket each time. I designed a library of product and content modules that could be mixed and matched across any page, giving marketing real ownership over the site post-launch.

Composing the home & landing pages

With the module library in place, the home page and campaign landing pages were built by composing components to suit each page's content goal. The system meant the marketing team could update and reorder pages around product launches and seasonal campaigns without the design or engineering team being a bottleneck.

Rethinking the product page

The original PDP buried key information, had no clear visual hierarchy, and made the purchase decision harder than it needed to be. The redesign brought the product hero front and centre above the fold, surfaced size, colour, and buy options immediately, and restructured the lower page around the content that actually drives conversion — specs, social proof, and complementary products.