Working as a Digital Designer

GP Advertising

Job: digital designer

Working at GP Advertising creating digital ads for our in-house brands

Visual Communication

Advertising & Branding

Animation & Motion

Overview

My Role & Responsibilities

I create digital content across EDMs, external ads, social videos, landing pages & more across in-house brands, Harvey Norman, Domayne and Joyce Mayne.

I spend my time deciphering the intentions behind each campaign, strategically communicating key messagings, adapting assets across digital mediums and safeguarding our branding across 3 unique creative aesthetics and styles. Our ads reach a traffic of over 100+ million (June 2024 - 2025 Google Analytics).

I’ve developed mastery across:

Adobe Creative Suite, Google Web Designer, desktop-mobile responsiveness, SEO, digital accessibility, coding semantics, while excelling at creating video context and animation.

I create digital content across EDMs, external ads, social videos, landing pages & more across in-house brands, Harvey Norman, Domayne and Joyce Mayne.

I’ve developed mastery across:

Adobe Creative Suite, Google Web Designer, desktop-mobile responsiveness, SEO, digital accessibility, coding semantics, while excelling at creating video context and animation.

I create digital content across EDMs, external ads, social videos, landing pages & more across in-house brands, Harvey Norman, Domayne and Joyce Mayne.

I’ve developed mastery across:

Adobe Creative Suite, Google Web Designer, desktop-mobile responsiveness, SEO, digital accessibility, coding semantics, while excelling at creating video context and animation.

What I do

Translating Design Briefs

Deciphering the intention behind each campaign and creating layouts strategically - adhering to branding guidelines and key principles of visual communication

Swift Content Creation

Optimised workflow creating digital assets; EDMs, external ads, socials, landing pages, motion & video content at lightning pace - in order to facilitate tight deadlines.

Understanding & Communicating

Technical Constraints

Understanding & Communicating

Technical Constraints

Refining and formatting content across digital mediums, ensuring high quality, optimal performance, bypassing spam filters, satisfying WCAG accessibility and responsiveness for desktop & mobile devices.

Making Sh*t look Gooood!

Utilising my background in illustration & video editing, I ensure content is laid out with exceptional visual weight, shape design, hierarchy and flow. Introducing storytelling where appropriate.

disclaimer

I am unable to showcase my in-house design work publicly without express legal permission from the company. However I can showcase the take-home design challenge I completed in September 2024,

Harvey's Design Challenge

This project got me hired!

The Design Challenge

This got me hired!

Harvey's Design Challenge

This project got me hired!

the Challenge

Breaking down the Brief

A ‘Coffee Weekend’ event with the intention to promote the sale of more coffee machines.

I have 1 week to create 2 deliverables - External Banners & a Landing Page.

I made sticky notes for everything that was mandatory to complete, and added some additional challenges that i wanted to test myself, “Going Above and Beyond!’ And ‘INSANITY’. I ended up completing everything that I set my mind to.

A ‘Coffee Weekend’ event with the intention to promote the sale of more coffee machines.

I have 1 week to create 2 deliverables - External Banners & a Landing Page.

Deliverable 1:

Research

Deliverable 1:

Research

Deliverable 1:

Research

What even are External ads?

I conducted some preliminary research & discovery to get a feel for the type of content I need to create. Being a fresh, unfamiliar digital medium, I noted the extreme dimensions I had to work with and looked for market opportunities to strategically target & provide direction.

What even are Leaderboards, MRECs and Wings

Quick exploration of what leaderboards, MRECs and Wings even are.

Mood Board - Coffee Ads & Associated Feelings

Brief Research on Target Demographic & Australian Market

Mood Board - Coffee Ads & Associated Feelings

Brief Research on Target Demographic & Australian Market

Mood Board - Coffee Ads & Associated Feelings

Brief Research on Target Demographic & Australian Market

Deliverable 1:

Key Insights

Deliverable 1:

Key Insights

Deliverable 1:

Key Insights

It seems that coffee machines are already a hot commodity amongst Australians, with 65% of Australians already owning a coffee machine!

The best marketing strategy is simply letting people know that the event is even happening

Deliverable 1:

Ideation

Deliverable 1:

Ideation

Deliverable 1:

Ideation

Concept Sketches & Iteration

First Sketch - Coffee Lids stacked together,

maybe fish eye perspective

Second Sketch - “Have a Coffee on Us”

Third Sketch - Simple design, main CTA, focal point, visual hierarchy

Mockup that resembles Willy Wonka golden ticket

I did a very quick design, experimented with coffee colours and gradients. Looked like the Willy Wonka Golden Ticket - prestigious, limited edition vibes

Looked terrible, so it changed it

Another Sketch I did in Procreate, my go-to quick mockup tool.

Added graphical beans in the background
Experimented with handwritten font
Dark background + contrast

First Sketch - Coffee Lids stacked together,

maybe fish eye perspective

Second Sketch - “Have a Coffee on Us”

Third Sketch - Simple design, main CTA, focal point, visual hierarchy

I did a very quick design, experimented with coffee colours and gradients. Looked like the Willy Wonka Golden Ticket - prestigious, limited edition vibes

Looked terrible, so it changed it

Another Sketch I did in Procreate, my go-to quick mockup tool.

Added graphical beans in the background
Experimented with handwritten font
Dark background + contrast

First Sketch - Coffee Lids stacked together,

maybe fish eye perspective

Second Sketch - “Have a Coffee on Us”

Third Sketch - Simple design, main CTA, focal point, visual hierarchy

I did a very quick design, experimented with coffee colours and gradients. Looked like the Willy Wonka Golden Ticket - prestigious, limited edition vibes

Looked terrible, so it changed it

Another Sketch I did in Procreate, my go-to quick mockup tool.

Added graphical beans in the background
Experimented with handwritten font
Dark background + contrast

Deliverable 1:

Mockups

Deliverable 1:

Mockups

Deliverable 1:

Mockups

Initial Design: A/B TESTING

After some tinkering, I came up with a design layout I was happy with, strong visual hierarchy, pleasant colours, mixes real beans with some creative graphics - Strong Design

A/B Testing was conducted to get some feedback on my designs, whats good, whats bad, what could be better.

Key Takeaways

Better typography, font treatment & spacing - currently feels off

The dark design is very strong, but I personally think the white compliments it nicely

Deliverable 1:
Externals DESIGN

Final Design: HTML External Banners

Deliverable 1:

Externals Design

Deliverable 1:

Externals Design

Desktop & Mobile Mockups

Deliverable 1:

Accessibility Checks

Deliverable 1:

Accessibility Checks

Deliverable 1:

Accessibility Checks

Web Content Accessibility Guidelines

Contrast Checker

I followed the Web Content Accessibility Guidelines (WCAG), which are a series of recommendations for making the web more accessible.

The level AAA requires a contrast ration of at least 7:1 for normal text and 4.5:1 for large text or bold text which my designs pass with flying colours.

I followed the Web Content Accessibility Guidelines (WCAG), which are a series of recommendations for making the web more accessible.

The level AAA requires a contrast ration of at least 7:1 for normal text and 4.5:1 for large text or bold text which my designs pass with flying colours.

I followed the Web Content Accessibility Guidelines (WCAG), which are a series of recommendations for making the web more accessible.

The level AAA requires a contrast ration of at least 7:1 for normal text and 4.5:1 for large text or bold text which my designs pass with flying colours.

Deliverable 1:
Going Beyond

INSANITY: HTML MERC Animation

This should been enough to satisfy the deliverable but the brief was still bothering me… There was an emphasis on 'animated' and it felt really wrong to not include some sort of animation.

So I knuckled down and did some research on HTML5 ads, learnt a completely new tool, Google Web Designer and animated the MREC.

First time Working in Google Web Designer

GIF of Animated MREC Block

Deliverable 2:

Landing Page

Deliverable 2:

Landing Page

Deliverable 2:

Landing Page

NOT OVER YET- Landing Page time

I did a fun landing page tier list just to get a general understanding of what makes a good and a bad landing page. Talking note of good practices, visual design, UX/UI and well crafted call-to-actions.

I liked the ones where the text was relevant, evoked an emotional connection and had relevant, clear imagery.

Deliverable 2:

Competitor Analysis

Deliverable 2:

Competitor Analysis

Deliverable 2:

Competitor Analysis

Auditing the Competitors

I looked into and collected a bunch of landing page examples, noting down their key strengths & weaknesses, deciphering the patterns and pointing out elements that I personally think are done very well.

Deliverable 2:

Low Fidelity wireframes

Deliverable 2:

Low Fidelity wireframes

Deliverable 2:

Low Fidelity wireframes

Proposed Layout Sketches

After looking at the other designs, I created a few unique layouts. I liked the first design the best, extending it further to include the:

Harvey Norman Nav Bar - Hero - Branding Strip - Offers - Trained Baristas Banner - Bottom Offer

After looking at the other designs, I created a few unique layouts. I liked the first design the best, extending it further to include the:

Harvey Norman Nav Bar - Hero - Branding Strip - Offers - Trained Baristas Banner - Bottom Offer

After looking at the other designs, I created a few unique layouts. I liked the first design the best, extending it further to include the:

Harvey Norman Nav Bar - Hero - Branding Strip - Offers - Trained Baristas Banner - Bottom Offer

Deliverable 2:
Landing Page

Final Design Mockup & Annotated

Deliverable 2:

GOING BEYOND

Deliverable 2:

GOING BEYOND

Deliverable 2:

GOING BEYOND

INSANITY: I coded the landing page from Scratch

While I have already satisfied the main deliverable, I decided to use this opportunity to brush up on my coding skills as it was an important aspect of the job description. I spent a day going through the Odin Project and slowly re-discovering the way to think. My eureka moment came when I started thinking of every element as a box, a box within a box, within another box. Using the CSS ‘Flexbox’ layout, suddenly everything became extremely intuitive.

The total HTML & CSS Landing Page: Designed & Coded design took 4 days and I have a live site hosted on GitHub.

Reflection

Final Thoughts & Project Reflection

I am extremely proud of my work, the amount I managed to pump out in a week, and seeing my effort get rewarded with an immediately job offer is extremely fulfilling. The additional skills I’ve learnt absolutely propelled me to becoming an active member of the team almost immediately.

This project exemplifies my drive and my skills have been honed working as a Digital Designer as a part of the GP Advertising team.