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
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
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.