Independent digital designer · Available for select projects

I design the click
and earn the watch

Digital design and visual storytelling built to stop the scroll, sharpen the story, and hold attention longer

Esmaquel
  1. ResearchListen before designing
  2. DefineFrame the right problem
  3. DesignShape a useful response
  4. TestLearn from real behaviour
  5. DeliverRefine and make it work
Selected performance evidence

Design is subjective
Performance is measurable
Let the KPIs speak for my work

016.9%

Average CTR

3 featured video projects

0283.8K

Average engaged views

2 projects with comparable data

033.9M

Channel views

Reported audience reach

0408

Selected case studies

Design · content · platforms

Averages use comparable published metrics from the selected projects shown below · Channel views is presented as a reported total

The New Zealand Herald front page from 23 February 2011 covering the Christchurch earthquake under the headline Our Darkest Day
New Zealand Herald · Auckland edition · 23 February 2011
Editorial responseBreaking-news design

A simple message
Immediate impact

In a moment of national tragedy, the front page needed to communicate the gravity of the situation with sensitivity and clarity. One powerful image, a restrained palette and an uncompromising headline created an immediate emotional and informational hierarchy—without overwhelming the reader.

1.5 seconds to earn attentionFewer words · One image that speaks volumes

Reader-response test1.5-second exposure
80%

Recognised the key message

100%

Identified The New Zealand Herald

4/5

Identified the intended reading path

Sensitive editorial judgment · Clear hierarchy · Immediate understanding

Reader-response figures supplied by the designer. Front page shown for portfolio documentation; publication and photographic rights remain with their respective owners.

Historical context
Beyond aesthetics

Graphic design isn’t decoration
It’s an objective made visible

The strongest work directs attention, clarifies meaning and moves people toward action—often before they consciously notice why

Digital capability system

From first frame
to live experience

I combine design, development, platform management and performance insights to take digital experiences from concept to measurable growth

  1. 01

    Design

    • Figma
    • UX systems
    • Prototyping
  2. 02

    Build

    • HTML · CSS
    • JavaScript
    • Responsive development
  3. 03

    Platforms

    • Shopify
    • Squarespace
    • WordPress
  4. 04

    Manage

    • CMS management
    • CRM management
    • Content updates
  5. 05

    Grow

    • Google Analytics
    • Meta Ads
    • Google Ads
    • Campaign optimisation
01Selected outcomes

Work that earns
attention

From the first impression to the final frame

01Educational

Breastfeeding pain? Your latch might be the problem

Project informationStrategy · process · results

An educational video explaining how positioning and attachment can contribute to breastfeeding pain, with practical latch guidance designed to make feeding more comfortable.

CTR7%
VIEWS232K
THUMBNAIL IMPRESSIONS1.8M
ENGAGED VIEWS101.2K
02Instructional Design

How to use the Haakaa Gen 2 and save leaked milk

Project informationStrategy · process · results

A clear product walkthrough showing how to position and use the Haakaa Gen 2 to collect leaked milk comfortably, simply, and without adding extra effort to a feeding routine.

CTR6.7%
VIEWS83K
THUMBNAIL IMPRESSIONS988.9K
ENGAGED VIEWS66.4K
03Storytelling Design

Life after breast cancer | Sue’s inspiring journey

Project informationStrategy · process · results

A survivor-led story moving from fear and family motivation to seven years cancer-free, ending with encouragement for people in treatment and an urgent reminder that routine screening can save lives.

CTR7.1%
AVG. VIEW8:16
CHANNEL VIEWS3.9M
Narrative edit map8 key moments
01The relatable hook
Story element

Sue emphasizes that breast cancer can happen to anyone—a mother, sister, friend, or neighbor.

Editing idea

Use this as a cold open or title-card sequence to establish universal empathy before entering her personal story.

02Treatment and lingering trauma
Story element

Sue recalls surgery followed by six weeks of radiation, and how the emotional impact returns every October.

Editing idea

Shift the pacing, introduce reflective B-roll, and use restrained on-screen text to show the reality of long-term recovery.

03Confronting mortality
Story element

She describes the raw fear and uncertainty she felt when she initially believed cancer meant death.

Editing idea

Cut closer to her expressions, reduce the music, and let quiet pauses carry the emotional weight.

04Her motivation: family
Story element

Her greatest fear was leaving her family behind, which became the motivation to fight and survive.

Editing idea

Frame this as the emotional turning point, supported by warm family imagery and a restrained music lift.

05Seven years clear
Story element

Sue celebrates reaching seven years cancer-free while acknowledging the tension of ongoing annual screenings.

Editing idea

Balance celebration with the continuing reality of survivorship and follow-up care.

06Words of encouragement
Story element

She reassures people in treatment: “You will get through it,” and encourages them to accept help.

Editing idea

Shape this into a standalone short-form clip or a bold quote-card moment for social channels.

07A fresh start and purpose
Story element

Joining Haakaa around the time of her cancer-free diagnosis gave Sue a positive new focus.

Editing idea

Lift the visual tone with brighter grading and uplifting music to communicate renewal and purpose.

08The screening call to action
Story element

With no palpable lump or symptoms, Sue’s cancer was found early only because she attended a routine free mammogram.

Editing idea

End on this critical takeaway and clearly reinforce the importance of routine screening even when someone feels healthy.

Automated order lifecycle from customer order through staff processing, SMS notification, and completion
Interactive Dashly workflow. Hover or focus each stage for details.
  1. 01 · CustomerOrder placedCustomer enters the system
  2. 02 · StaffProcessingProduction receives the job
  3. 03 · StaffReadyOrder status is updated
  4. 04 · CustomerSMS sentPickup message is delivered
  5. 05 · SystemCompletedReal-time status updates automatically
Hover a stage
04AI Process Automation

Dashly — from concept to automated platform

I developed Dashly from concept through to a live platform, applying UX theory and practical design experience to simplify repetitive business workflows. I shaped the product strategy, mapped the complete user journey, designed the interface and implemented the front end.

ROLEEND-TO-END UX
SYSTEMAI AUTOMATION
DELIVERYLIVE PLATFORM
View live project
Production infrastructure

Explore the system behind Dashly

Open in Figma
Dashly production infrastructure diagram connecting customers, the storefront, Firebase, the dashboard, APIs, cloud storage and StripeExplore interactive board
AI systems · automation · creative production

I turn AI into practical business solutions

I combine creative thinking with hands-on AI experimentation to build smarter workflows, improve customer experiences, and bring ideas to life—from automation and chatbot concepts to content and campaign production

Dashly campaign illustrating how automation creates more time for business, customers and life
From useful idea to customer-facing experience
02 · Workflow automationTakeaways · 00:27
03 · Customer experienceBakery · 00:25
04 · Logistics visibilityForex UMAC · 00:28
05 · AI content workflowSocial Automator
View the live Dashly media library
Humanised Mind CMS storefront showing navigation, service categories, and connected hosting products
CMS design · API-connected service catalogue
05CMS Design & API Integration

Humanised Mind — connecting content, services and commerce

I designed the CMS experience and integrated the platform APIs that power Humanised Mind’s service catalogue. The work connects editable content with domains, hosting, email, security and marketing products in a consistent customer journey.

PLATFORMCMS DESIGN
SYSTEMAPI INTEGRATION
DELIVERYLIVE COMMERCE
View live project
User-first typography

Complex content · Clear communication

Hierarchy · Rhythm · Access
06Print Typography Design · User-First Design Principles

Barnardos Annual Reports

Clear reporting through human-centred design.

CRAFTPRINT TYPOGRAPHY
PRINCIPLEUSER-FIRST
DELIVERYTWO EDITIONS
View live project
Front page of the Barnardos Early Learning Hastings flyer
01 · Attract
Information page of the Barnardos Early Learning Hastings flyer
02 · Inform
Information designNational services, made easier to navigate
Barnardos New Zealand service map showing offices, early learning centres, schools with SWIS, and group homes by region
07Print Campaign Design · Audience-Led Communication

Barnardos Early Learning — Hastings enrolment flyer

A two-sided print flyer designed to help local mothers and caregivers quickly understand the value of early learning. The bright, reassuring visual language balances child-led energy with practical enrolment information, creating a clear path from first impression to contact.

TARGET AUDIENCEMUMS + CAREGIVERS · CHILDREN AGED 0–3
FORMATTWO-SIDED FLYER
FOCUSLOCAL ENROLMENT
Visit Barnardos Early Learning
Regional rollout

One visual system, adapted for local communities

Location-led photography and centre-specific information create relevance while a shared colour, illustration and typography system keeps the campaign recognisably Barnardos

01Māngere
Front page of the Barnardos Early Learning Māngere flyerInformation page of the Barnardos Early Learning Māngere flyer
02Manurewa
Front page of the Barnardos Early Learning Manurewa flyerInformation page of the Barnardos Early Learning Manurewa flyer
02

The approach

Not decoration
Direction

01

Digital design systems

Distinct visual languages built to stay recognizable across every screen and campaign.

02

Story-led creative direction

Narrative structures that give every layout, frame, and decision a reason to exist.

03

YouTube packaging

Thumbnail and title systems designed around curiosity, clarity, and audience behavior.

04

Performance iteration

Creative variants shaped by analytics, retention signals, and what viewers actually choose.

08Meta Ad Creative · Facebook & Instagram

Creative designed to stop the scroll

I translate campaign objectives into clear, mobile-first ad creative—combining audience insight, concise messaging and strong visual hierarchy across Facebook and Instagram

Feed · 4:5Make space
for what matters.
Learn more →
Story · 9:16A simpler
way forward.
Swipe up ↑
Reel · 9:16Small change.
Real momentum.
Watch now ▶
Three placements · one adaptable creative system
Strategy

Define the audience, campaign objective, message hierarchy and strongest reason to act.

Creative process

Develop hooks and visual directions, adapt concepts for each placement, then prepare variations for testing.

Deliverables

Facebook and Instagram feed ads, Stories, Reels covers, carousel assets and campaign-ready copy variations.

Selected campaign details have been anonymised to respect employer and client confidentiality.