OGIO E-Commerce Website

Redesign an e-commerce site to coincide with a brand relaunch.

What I Did

Research, UX & UI Design,
Prototyping

Project Date

2018 - Onwards

ogio-hero-2

Overhauling an

old brand

OGIO was acquired by Callaway Golf in mid-2017 just as I started working for the company. Key stakeholders felt that the brand was in need of modernizing starting with the product line & branding, and consequently a new e-commerce store that aligned with the brand’s new look and made purchasing and browsing much easier than before.

1-pdp-intro

 

Laying the foundations

I planned out the structural heirarchy of the website while conducting competitor analysis. This informed my initial wireframes that I produced in tandem with the Director of Digital Marketing.

wireframe

Initial Wireframes

Color &
typograhy

The new photography and products we’d been working in conjunction with felt brighter and colorful than the old OGIO. I therefore wanted to keep things clean and bright to let the photography do the talking. We decided to go with Oswald for our headers - a condensed font which works great on hero images and allows us to pack plenty of text in without feeling too busy.

typography-color

Typography + Color Guide

Modules for
more variety

Meeting with the OGIO marketing team, we’d established that we needed different options to feature products, content, and merchandising callouts across a number of different pages.

Product-Module-Options-1

Product Module Options

Content-Module-Options

Content Module Options

Home & landing page designs

The team was then able to pepper in different modules throughout the home page and different landing pages dependent on their content needs.

OGIO Homepage Visual Designs (click & scroll)

Product pages
take 1 & 2

Meeting with the OGIO marketing team, we’d established that we needed different options to feature products, content, and merchandising callouts across a number of different pages.

old-pdp-before

Original PDP Design (Above the fold)

new-pdp-after

New PDP Design (Above the fold)

More Case Studies

Advanced Search ToolUI UX Design

Trade In! Trade Up!UI UX Design

OGIO Email TemplatesDesign & Development