GP Advertising

Web, UX/UI

Team: Digital
Role: Digital Designer
Manager: Johnnie Crawford

Overview

GP Advertising is an in-house agency servicing Harvey Norman, Domayne and Joyce Mayne’s digital and print advertising efforts. As a member of the digital design team, I was asked to concept an update for the agency's website while working on BAU projects.

Diamond in the rough

GP’s existing website looked outdated, giving potential hires the impression that the company was frozen-in-time and unable to provide them with up to date skills. But it also had archived work and (not very discoverable) team leader profiles that shone with character. I knew from my personal experience that the people and culture of GP is what made them unique, so my goal was to showcase their character through the redesigned website. That goal was then channeled into my research and resulting low-fidelity wireframes, with a modern and simple visual direction identified by the Head of Creative.

Some research and notes from meetings

Defining the context

Since GP is an in-house agency and doesn’t need to attract new clients (something that's different to a typical client-focused agency), the websites purpose would be for first impressions for prospective employees. Understanding that insight and my overall goal of showcasing GP's personality, I developed the wireframes further.

Figma wireframes for the Home, Work, a project and About pages, respectively

Design decisions

Showcasing GP's personality

A home page video above the fold would focus on the people behind GP, instead of their work.
The first home page CTA encourages users to get to know more about GP, directing them to the 'About Us' page.
That 'About Us' page would feature staff photos, archived work and personality-filled profiles for each team leader.

For prospective employees

Headlines across each page define who GP is.
In the nav bar, a 'Careers' external link helps users get back to their job listing easily.
After reaching the end of project, users can continue to flow through the website easily with a 'Back to our work' button, or choose from 'Related work'.

Cut short

With these wireframes, the proposed redesign was presented to internal stakeholders and well receieved, though unfortunately my tenure finished before the website could be developed and shipped.

High fidelity outcome

But with a desire to answer “what would it have ended up looking like?” I decided to finish what I started, building high fidelity wireframes with some interaction mockups. And with a fresh pair of eyes, I also took the CMYK-inspired highlights of the existing website and injected them throughout, alongside revising the home page so the headline wasn’t cut off by the fold of some devices.

Home, a project and About page on mobile

Our Work page

A project page

About Us page (with a staff photo from 2010!)

What I learnt

Using a set of predefined spacing measurements is a massive time saver when making decisions for layout. I jumped too quickly into wireframing. Only after I started it did I come to fully understand the websites purpose and GP’s unique personality. With that understanding, design decisions then had a clear purpose and goal. Next time I know to undertake a proper research phase.
Looking at the mobile wireframe on desktop doesnt compare to viewing it on a physical phone. I now always enjoy checking the layout on a phone as it offers a fresh perspective for possible adjustments.