Jack Heeney Portfolio

Hi 👋 I'm Jack Heeney.

Digital Product & Content Strategy

I design, build and scale digital products that improve customer experience, solve business problems and drive measurable growth.

👤

8+ years' experience

Product UX Growth AI Full-Stack Development

Download CV

About Me

I'm a Digital Content Strategy, Product & Growth professional with 8+ years' experience leading digital content, customer journeys and product experiences within technology-focused businesses. Throughout my career I've taken ownership of the strategy, development and continuous optimisation of websites, learning platforms, marketing content and digital products, ensuring every initiative supports measurable business objectives.

I specialise in building content ecosystems that improve discoverability, engagement and conversion across the entire customer journey. Combining UX research, analytics, SEO, AI Optimisation (AIO), experimentation and user behaviour insights, I've delivered content strategies that improve search visibility, increase customer engagement and drive commercial growth.

Working across Product, Marketing, Sales, Learning & Development, Technical Support and leadership teams, I've aligned digital content with wider business priorities, reduced duplication, improved consistency and helped deliver scalable customer experiences. I'm comfortable coordinating stakeholders with different priorities and translating business goals into practical digital solutions.

Alongside strategy, I'm a hands-on technical practitioner with experience using HTML, CSS, JavaScript, PHP, SQL, React and APIs. This enables me to move seamlessly between strategic planning and implementation, whether launching new digital products, optimising conversion funnels, developing internal systems or improving digital experiences through continuous iteration.

My approach is highly data-driven. I use analytics, user research and performance insights to identify opportunities, measure impact and continually refine content and product performance. I enjoy solving complex business problems, simplifying customer journeys and building digital experiences that create measurable commercial value.

Outside work, I enjoy strength training, hiking, mountain climbing and badminton. After nearly ten years playing rugby, I've developed a collaborative, resilient and continuously improving mindset that I bring to every project and team I work with.

Core Skills

Digital Product Management
UX/UI & Conversion Optimisation
Growth & Funnel Optimisation
Content Strategy
Digital Marketing
Landing Pages & Website Strategy
Email Marketing & CRM Systems
CRM & Marketing Automation
A/B Testing & Analytics
HTML, CSS & Responsive Design
WordPress & CMS Management
Working Knowledge of PHP, SQL, JavaScript, APIs & React
Collaboration & Cross-functional Delivery
Google Analytics, Ahrefs, Clarity & Performance Tracking
Adobe Creative Suite
Creative Campaign Design
ChatGPT, Claude, Gemini & Practical LLM Workflows
Hosting, DNS & Domain Management (IONOS, Hostinger)

Live Websites

Websites and landing pages I have worked on — open in the browser to explore:

robustittraining.com skills-nest.com getglitched.co.uk bindertrader.vercel.app creatureprints3d.vercel.app squirrelsbrox.vercel.app azure-webinar.com cyber-webinar.com data-webinar.org ai-webinar.co.uk

Case Studies

Each write-up follows a Google-style STAR structure — Situation, Task, Action, and Result — with measurable impact, stakeholder context, and key learnings where relevant.

Work

Digital Product + Growth

IT Training Route Platform

Digital Product & Growth Lead

Decision-support UX across Cloud, Cyber, Data and AI pathways to reduce ambiguity and improve enquiry quality.

Product + UX

Customer Journey Optimisation

Product & UX Lead

Behavioural analytics across email, landing pages, webinars and CRM to improve segmentation and funnel visibility.

Operations + Delivery

Digital Operations & Cross-Department Systems Management

Role: Digital Product & Operations Lead

STAR: streamlined operations during restructuring while preserving revenue-critical digital work.

Education Product

Student Training Platform UX

Product Lead, UX Designer & Frontend Developer

Modernised the mock exam, results and revision journey to help students progress with clearer feedback and less manual support.

Education + Frontend

SkillsNest Learning Platform Website

Web Designer & Frontend Developer

Responsive course and subscription website connecting learners with training, practice exams and a dedicated student portal.

Creative Performance

Social Media Campaign Creative & Performance Design

Role: Creative Lead & Digital Designer

Produced conversion-focused social assets across webinar, paid, and organic campaign streams.

Friends & Side Projects

Web Design + CMS

Squirrels Nursery Website & Admin Portal

Role: Product Designer & Full-Stack Developer

Redesigned an existing nursery website around clearer parent journeys and built a secure admin portal for fast, independent content updates.

E-commerce + Frontend

Creature Print 3D Stripe Storefront

Role: Product Designer & Full-Stack Developer

Designed and built an owned storefront for a friend's established Etsy shop, creating a path to Stripe checkout and lower marketplace fees.

Brand Identity

Deep Dissonance Podcast Brand Identity & Creative Direction

Role: Brand Designer & Creative Director

Created a complete visual identity system for a drum and bass podcast concept with scalable social applications.

Music + Events

AudioGrooves Event Marketing, Creative Design & After-Party Content

Role: Graphic Designer & Marketing & Creative Lead

STAR: designed the label logo and produced event advertising, posters, social graphics, and after-party films.

Music + Events

Kengai Records Label Release Art, Event Creative & Social Campaigns

Role: Graphic Designer & Creative Lead

STAR: release artwork, event flyers, and connected Instagram carousel posts for label campaigns.

Personal Projects

Product Architecture

BinderTrader Platform Architecture & Product Development

Role: Founder, Product Designer, Full-Stack Developer

Designed a trade-first card platform with robust lifecycle logic, scalable backend systems, and trust-first UX.

Portfolio + Frontend

Desktop Portfolio Website & Interactive UX Experience

Role: Product Designer, Frontend Developer & Creative Lead

STAR: built a Windows-style desktop portfolio with guided tours, STAR case studies, and live site previews.

Case Study 1

Designing an IT Training Route Decision Platform

Improving the route-selection journey across Cloud, Cyber, Data and AI pathways by helping prospective students compare options, understand outcomes and enquire with more confidence.

Product Management UX Design Student Journey Mapping Conversion Funnel Route Decision Platform Behavioural UX Campaign Alignment Frontend Development Growth Strategy

I approached this project as a decision-support and conversion funnel challenge. Prospective students were interested in IT training, but many struggled to understand which pathway matched their goals. The aim was to reduce ambiguity, improve confidence and create a clearer journey from campaign click through to enquiry.

The Opportunity

The existing journey introduced several training options but did not give users enough support when comparing Cloud, Cyber, Data and AI pathways. This created friction at a key decision point, where users needed reassurance, route clarity and outcome-focused guidance before making an enquiry.

Users needed clearer guidance on which pathway suited their goals.
Course options needed to be easier to compare.
Marketing campaigns needed a stronger landing journey.
Sales needed better-quality enquiries from users with clearer intent.
The route-selection experience needed to scale across future campaigns.

Who the Experience Needed to Support

Prospective Students

Needed a simple way to compare routes, understand career outcomes and choose a starting point without feeling overwhelmed.

Sales Team

Needed enquiries from users who had already started thinking about their goals and preferred training route.

Marketing Team

Needed a landing journey that connected email, paid ads, route messaging and enquiry forms.

Business

Needed a scalable funnel that could support multiple training pathways without creating disconnected landing pages.

Mapping the Route Decision Journey

1

Campaign Click

Does the user understand what problem this page solves?

2

Route Awareness

Can the user quickly see the main training routes available?

3

Pathway Comparison

Can the user compare Cloud, Cyber, Data and AI in a simple way?

6

Sales Follow-Up

Does the enquiry give the team enough context to have a better conversation?

5

Enquiry Intent

Is the user confident enough to take the next step?

4

Decision Support

Does the content help the user choose the best route?

Product Discovery & UX Thinking

I reviewed how users moved from campaign traffic into the training route page and identified that the biggest issue was not just visual design. It was decision confidence. Users needed clearer information architecture, stronger comparison content and more reassuring calls to action before they were ready to enquire.

Pathway clarity

Users needed to understand the difference between pathways quickly.

Decision fatigue

The page needed to reduce decision fatigue.

Helpful CTAs

CTAs needed to feel helpful, not overly sales-led.

Campaign continuity

Campaign messaging and landing page content needed to feel connected.

Sales context

The sales team benefited from users arriving with clearer route intent.

Reusable funnel

The funnel needed a reusable structure for future training campaigns.

Problems Identified

Too much ambiguity

Users were shown several IT training options but not enough guidance on how to choose between them.

Weak comparison journey

The experience needed clearer differences between pathways, certifications, outcomes and career routes.

Low-confidence enquiries

Users could enquire before fully understanding the best route, creating extra explanation work for the sales team.

Disconnected campaign flow

Email, ads, landing pages and enquiry forms needed to feel like one joined-up journey.

Product & UX Decisions

I redesigned the route-selection experience around clarity, comparison and guided decision-making. The objective was not just to improve the layout, but to help users understand what each pathway meant and what action to take next.

Clearer pathway positioning

Each route was reframed around learner goals, career outcomes and certification direction.

Comparison-led content

The page helped users compare routes side by side instead of forcing them to interpret separate course pages.

Decision-focused CTAs

Calls to action were positioned around helping users choose a route, rather than immediately pushing a generic enquiry.

Joined-up funnel thinking

The journey connected ads, email campaigns, route selection, enquiry and sales follow-up into one clearer flow.

The Solution

The redesigned experience created a clearer route decision platform that helped prospective students understand their options, compare pathways and enquire with more confidence.

Reworked the information architecture around student decision-making.
Improved pathway messaging across Cloud, Cyber, Data and AI routes.
Created comparison-led content to reduce confusion.
Connected landing page UX with campaign and enquiry journeys.
Designed a more scalable structure for future pathway campaigns.
Improved the page flow from first click to enquiry.

Product Impact

Clearer student decision-making

Users had a simpler way to understand which pathway best matched their goals.

Better enquiry quality

The sales team received enquiries from users with stronger route awareness and clearer intent.

Improved campaign alignment

The route page created a stronger bridge between paid ads, email campaigns and enquiry forms.

Scalable funnel foundation

The structure could be reused across multiple campaigns and future training pathways.

Reduced ambiguity

The experience helped answer key questions earlier in the journey before users reached the enquiry stage.

Tools & Technologies

GA4, GTM, MailerLite, Ahrefs, Hotjar, Microsoft Clarity, HTML, CSS, JavaScript, WordPress.

What I Learned

The biggest lesson was that conversion problems are often decision problems. Users did not just need a better-looking page — they needed clearer context, comparison and reassurance before taking action. Improving the journey meant aligning UX, content, campaign messaging and sales follow-up around the same user decision.

Route clarity matters before conversion.
Comparison-led content can reduce hesitation.
CTAs work better when they match the user's stage of confidence.
Campaign journeys need continuity from advert or email through to enquiry.
Product thinking can improve both user experience and internal sales conversations.

What I'd Do Next

Add route-selection analytics to track which pathways users compare most.
Track CTA clicks by route, traffic source and user intent.
Create personalised follow-up emails based on selected route.
Add a guided quiz to recommend Cloud, Cyber, Data or AI pathways.
Measure enquiry quality by route source and campaign type.
Add heatmap analysis to identify where users hesitate or drop off.

Visual Showcase

Select any screenshot to view it full size.

Before & After: Landing Page Experience

The previous page introduced the training offer, but the redesigned version focused more directly on helping users choose the right route.

Previous IT training landing page before route decision redesign — Previous landing page

Redesigned IT training landing page with clearer pathway positioning — Redesigned route decision landing page

Case Study 2

Customer Journey Optimisation Through Behavioural Analytics

Improving how prospective learners moved from email engagement to webinar registration, attendance and sales follow-up.

Product Thinking UX Research Email Segmentation Behavioural Analytics Funnel Optimisation MailerLite Zoom Webinars CRM Journey Mapping UTM Tracking

I approached this project as a customer journey optimisation challenge rather than a standalone email marketing task. The goal was to understand how prospective learners moved from first campaign touchpoint through landing pages, webinar registration, attendance and CRM follow-up, then use that insight to improve segmentation, messaging and user experience across the funnel.

The Opportunity

Campaign activity was generating engagement, but the full journey was difficult to understand. Email performance, webinar registration, attendance and CRM outcomes sat across separate tools, making it harder to see where users dropped off, which audiences were most engaged and which follow-up journeys were most relevant.

Email engagement alone did not explain customer intent.
Different audiences needed more relevant messaging.
Webinar registrations and attendance needed to be understood as part of the wider journey.
Data existed across multiple systems rather than one connected reporting layer.
Better segmentation could improve the relevance of information being sent.

Mapping the Customer Journey

1

Marketing Email

Was the message relevant to this audience?

2

Landing Page

Did the page answer the user's questions quickly?

3

Webinar Registration

Was the next step obvious and low friction?

4

Reminder Journey

Did the user receive useful information before attending?

8

Customer Decision

Was the user supported with the right next step?

7

Sales Conversation

Could the team understand previous intent?

6

CRM / FLG Follow-up

Was the lead source and journey visible?

5

Live Webinar

Did the session build trust and explain the route clearly?

Research & Behavioural Insight

I reviewed campaign performance, landing page behaviour, UTM-tagged journeys, webinar registration data and available CRM information to understand where engagement was strong and where the journey became unclear.

Opens vs intent

Opens showed awareness, but not necessarily intent.

Clicks & CTOR

Clicks and CTOR were stronger indicators of message relevance.

Landing page friction

Landing page behaviour helped expose friction, especially on mobile.

Webinar attendance

Webinar attendance created a stronger signal of buying intent.

Attribution gaps

CRM attribution was limited because email, webinar and sales data were not fully connected.

Problems Identified

Generic communication

Large audiences could receive similar messages even when their interests, intent level or previous behaviour differed.

Journey drop-off

Users could engage with an email but fail to progress through the landing page or registration journey.

Limited attribution visibility

MailerLite, Zoom and CRM data were useful individually, but they did not provide a single end-to-end view of the customer journey.

Follow-up relevance

Without clearer segmentation, follow-up communication risked being less relevant to where the user actually was in their decision-making process.

What I Changed

Segmentation

I grouped users based on engagement behaviour, campaign interaction and intent signals so future emails could be more relevant.

Messaging

I adjusted email content and CTAs to focus on user questions, trust-building and clearer next steps rather than generic promotion.

Landing page experience

I reviewed landing page behaviour and improved page structure, CTA placement, mobile usability and clarity around the webinar journey.

Tracking

I used UTM-tagged links to understand which emails, CTAs and audience segments were driving visits and registrations.

Reporting

I reviewed MailerLite, Zoom and CRM data to understand how users moved across the journey and where the business lacked a complete view.

Measuring Customer Behaviour

The visuals below are self-made, anonymised summaries designed for portfolio presentation. They represent the types of behavioural and campaign signals I monitored without exposing internal reports or confidential data.

99%+ delivery rate maintained

~20% typical CTOR across core campaign groups

<0.05% typical spam complaint rate

280k+ peak weekly delivered volume

Delivered volume trend

Delivery rate stability

CTOR by campaign group

Spam complaint rate

Benchmarking Performance

To make the metrics meaningful, I compared the anonymised campaign indicators against common email marketing benchmark ranges.

Delivery rate

99%+

Common benchmark 95%+ often considered strong

Sender reputation was protected

CTOR

~20%

Common benchmark 10–25% commonly seen across marketing campaigns

Openers were engaging with the content

Spam complaints

<0.05%

Common benchmark Under 0.1% generally considered healthy

List quality and relevance were maintained

CTR

1-3%

Common benchmark 2–5% often considered a good range

Click rate needed to be interpreted by audience warmth and intent

Benchmarks are indicative and vary by industry, list quality, audience intent and campaign type.

The Bigger Product Insight

The most important discovery was that the journey could not be fully understood from one system. Email engagement, webinar attendance, CRM activity and commercial outcomes existed across separate tools. This made it difficult to answer product and marketing questions such as which audience converted best, which webinar journeys created the strongest intent, and where follow-up should be prioritised.

Outcome

The project improved the way campaign performance was understood. Instead of treating emails as isolated sends, the work reframed email activity as part of a wider product journey involving segmentation, behavioural signals, landing page UX, webinar attendance and CRM follow-up.

Improved understanding of user behaviour across the webinar journey.
Created more structured segmentation for campaign planning.
Used engagement data to make follow-up communication more relevant.
Maintained strong deliverability and low complaint rates during high-volume campaign activity.
Identified a larger reporting gap that led to the concept for a Marketing Intelligence Dashboard.

What I'd Do Next

If continuing this project, I would prioritise a connected reporting layer that combines email engagement, webinar behaviour, CRM progression and revenue outcomes. This would make it easier to understand the complete customer journey and support better product, marketing and sales decisions.

Build a unified attribution dashboard.
Track journey stages from email click to webinar attendance and CRM outcome.
Segment audiences by intent level and course interest.
Create automated follow-up journeys based on behaviour.
Use dashboard insights to guide future landing page and campaign experiments.

Work Project

SkillsNest Learning Platform Website

A responsive education-commerce experience that brings course discovery, certification practice, subscription pricing and student access into one clear journey.

Role: Web Designer + Frontend Developer Focus: education + subscriptions Delivery: responsive light + dark UI

S Situation

SkillsNest needed a public-facing home for a broad training catalogue spanning professional soft skills, IT courses and certification practice exams, with a clear route into its separate learning portal.

T Task

Create a coherent, responsive website that could communicate the breadth of the library, explain the subscription model, establish learner trust and guide visitors toward courses, pricing or student login.

A Action

Designed a modular page system around oversized gradient typography, structured course cards, practice-exam features, learner testimonials, subscription steps, pricing comparisons and FAQs. Light and dark themes preserve the same visual language while supporting different viewing preferences.

Built connected homepage, catalogue, pricing and individual-course experiences, using reusable content patterns and prominent calls to action to keep course exploration and subscription decisions easy to follow.

R Result

Delivered a live, content-rich learning website that presents courses and practice exams in a consistent brand system, makes plan differences easy to compare and connects prospective and existing students to the right next step.

Key Experience Features

Filterable course catalogue and detailed individual-course pages.
Practice-exam showcase and subscription plan comparisons.
Social proof, FAQs and a simple three-step subscription journey.
Responsive light and dark themes with a consistent gradient-led identity.
Direct routes to course exploration, pricing, affiliates and student login.

Explore the live SkillsNest website

What I Learned

A large learning catalogue needs more than strong visuals: visitors need repeated orientation points that clarify what is available, how access works and whether an individual course or library subscription is the right next step.

Visual Showcase

Select any screenshot to view it full size.

SkillsNest homepage hero, navigation and scrolling course catalogue in dark mode — Homepage hero in dark mode

SkillsNest partner logos and learning platform statistics — Learning statistics and partners

Gradient-framed preview of the SkillsNest student learning portal — Learning portal preview

Featured certification practice exam cards — Featured practice exams

SkillsNest student testimonial wall — Student testimonials

Three-step SkillsNest subscription process — Subscription process

SkillsNest Mock, Course and Full Library subscription cards — Homepage pricing

SkillsNest FAQ accordion, portal video and free-trial call to action — FAQs and trial call to action

Ten Soft Skills You Need course page hero — Soft skills course page

Course statistics covering video, case studies, modules, resources and certificate — Course inclusions

Locked module list for the soft skills course — Course curriculum

Subscription pricing options on an individual course page — Course pricing options

SkillsNest homepage hero and course ticker in light mode — Homepage in light mode

SkillsNest filterable course catalogue in light mode — Course catalogue

SkillsNest plans and pricing page in light mode — Plans and pricing page

Friends & Side Project

Squirrels Nursery Website & Admin Portal

A complete redesign of an existing nursery website, pairing a professional, child-friendly public experience with a secure content platform the nursery team can update themselves.

Role: Product Designer + Full-Stack Developer Focus: information architecture + content operations Delivery: responsive website + secure CMS

S Situation

The nursery's existing website made important information difficult for parents to find, and its forms were causing problems. Routine updates also depended on another person, so publishing time-sensitive information could be slow.

T Task

Redesign the full public experience to feel professional, clean, child-friendly and visibly high quality, while giving the nursery team direct control over the information families rely on.

A Action

I rebuilt the information architecture around the questions and actions parents need most: learning and care, fees, menus, nursery guidance, visits and applications. I created clear desktop and mobile navigation, focused calls to action and purpose-built contact and application forms.

I also designed and developed a secure admin portal where authorised staff can publish alerts, maintain the rotating food menu, write formatted news posts and knowledge-base guides, upload accessible gallery images, schedule content and manage publishing workflows.

R Result

Delivered a responsive, high-quality digital presence that makes nursery information easier to discover and gives staff a much faster route from an operational update to published parent-facing content. The same system now connects alerts, menus, news, guides and gallery content across the admin and public website.

Tools & Technologies

Next.js, React, TypeScript, Supabase, PostgreSQL, secure authentication, role-based content management, rich-text editing, responsive UX, accessible form design, image management, SEO and Vercel.

Explore the live Squirrels Nursery website

What I Learned

A successful redesign has to improve the organisation behind the website as well as the pages visitors see. Giving staff safe, structured publishing tools means clearer information for parents and less delay whenever the nursery needs to communicate.

Visual Showcase

Select any screenshot to view it full size.

Secure content management

Squirrels Nursery secure admin dashboard with publishing shortcuts and recent content — Admin dashboard

Admin form for creating and scheduling an important nursery alert — Publishing an alert

Admin interface for maintaining the nursery three-week food menu and allergens — Food menu management

Rich text editor for writing, formatting and scheduling nursery news — Rich news editor

Published parent guides managed from the secure knowledge base — Knowledge-base management

Admin editor for a searchable parent knowledge-base guide — Creating a parent guide

Gallery upload form with alternative text, caption, credit and publishing controls — Accessible gallery upload

Connected parent-facing content

Nursery homepage displaying a newly published important alert — Live alert on the homepage

Parent-facing food menu with daily meals and listed allergens — Three-week food menu

Formatted nursery news story published from the admin editor — Published news story

Parent knowledge hub with categories, search and practical nursery guides — Searchable knowledge hub

Detailed fees and funded childcare guide with sharing and print tools — Permanent parent guidance

Public nursery gallery displaying an uploaded image with caption and credit — Nursery gallery

Before and after the redesign

The original homepage used a narrow, visually busy layout with fragmented content and competing navigation. The rebuild creates a clearer hierarchy around the information and actions parents need most.

Original Squirrels Nursery homepage before the redesign, with a narrow multi-coloured layout and dense navigation — Before — original nursery homepage

Redesigned Squirrels Nursery homepage with a clear hero, parent journeys and high-quality responsive visual system — After — redesigned homepage

High-quality public experience

About page describing the nursery, Ofsted result and areas of focus — About the nursery

Learning and care landing page with structured routes into key information — Learning and care

Nursery news landing page with latest story and food-menu route — News and menus

Contact page with easy-to-find details and a structured enquiry form — Contact journey

Online nursery application form for child, parent and preferred-hours details — Application journey

Responsive mobile design

Responsive Squirrels Nursery homepage on a mobile screen — Mobile homepage

Mobile navigation drawer with grouped nursery information — Mobile navigation

Case Study 9

Creature Print 3D Stripe Storefront

Designed and built an immersive, independent e-commerce experience for a friend's established Etsy store, giving the business a path toward an owned Stripe storefront with lower marketplace fees.

Role: Product Designer + Full-Stack Developer Project: friend + side project Focus: brand, e-commerce, Stripe

S Situation

A friend's Creature Print 3D business had built an audience and strong review history on Etsy, but marketplace fees and platform dependence limited how much control the store had over its customer experience and future growth.

T Task

As a side project, I set out to turn the store's reptile-keeping expertise and 3D-printed products into a distinctive owned website that could support direct Stripe payments without losing the trust, product discovery, or personality established on Etsy.

A Action

I designed a highly visual brand experience around real habitats, keeper knowledge, and product-in-use photography. The site combines cinematic storytelling, responsive product discovery, category and animal filters, customer proof, and detailed craft messaging.

I built the storefront as a modern responsive web app, created reusable product and navigation patterns, and developed the Stripe-ready commerce flow so the business can move toward direct ownership of checkout and customer relationships.

R Result

Delivered a polished live storefront that gives Creature Print 3D an independent home beyond Etsy, communicates the specialist value behind the products, and establishes the foundation for direct Stripe sales with fewer marketplace costs.

Tools & Technologies

Next.js, React, TypeScript, responsive CSS, Stripe Checkout, product catalogue architecture, Vercel, UX design, visual direction, and e-commerce content strategy.

Explore the live Creature Print 3D website

What I Learned

Moving a marketplace business toward its own storefront is not just a checkout migration. The independent site has to replace Etsy's built-in discovery and trust signals with stronger product storytelling, proof, navigation, and brand confidence.

Visual Showcase

Select any screenshot to view it full size.

Creature Print 3D homepage with immersive habitat photography and collection call to action — Homepage hero

Homepage section explaining that products are designed by experienced animal keepers — Keeper-led story

Animal care meets 3D design

Product testing message shown alongside a mushroom tortoise hide — Real-habitat product testing

Homepage transition into the creature favourites product collection — Collection transition

Cinematic featured section for the mushroom tortoise hide — Featured product storytelling

Large-format verified Etsy customer review — Customer review

Our Craft page hero showing the 3D printing workshop and habitat setting — Our Craft hero

Our Craft process section pairing keeper knowledge with product design — Keeper-first process

Packaging section explaining thoughtful fulfilment choices — Packaging story

Reviews page with Etsy rating, review count and order proof — Reviews overview

Customer review card and store performance figures — Review card

Responsive review layout

Filterable product catalogue with animal categories, search, sorting and price control — Product catalogue

Case Study 10

BinderTrader Platform Architecture & Product Development

Designed and built a trade-first platform concept for transparent, community-driven card exchanges.

Role: Founder + Full-Stack Developer Focus: architecture + trust-centric UX Delivery: trade lifecycle system

S Situation

Most existing card platforms prioritised sales over trading, while reliable inventory sync and transparent settlement states remained difficult to achieve at scale.

T Task

As founder and lead developer, I was responsible for product architecture, trust-centric UX, database design, backend trade logic, and production deployment.

A Action

I migrated from Supabase to a PostgreSQL and Prisma stack with Docker and Next.js, then personally implemented lifecycle, ownership, settlement, and notification systems with race-condition handling.

I designed trade-matching flows, in-app messaging, binder collections, and profile systems so users could follow trade status end to end without ambiguity.

R Result

Established a scalable, production-ready platform foundation, reduced sync and persistence issues from the earlier architecture, and improved user trust through clearer trade status and confirmations.

Tools & Technologies

Next.js, React, TypeScript, PostgreSQL, Prisma ORM, Docker, Vercel, Auth.js, HTML, CSS, JavaScript.

What I Learned

Trust in marketplaces is a product problem as much as a technical one — explicit state transitions and reliable data ownership matter more than feature breadth early on.

Visual Showcase

Select any screenshot to view it full size.

BinderTrader dashboard overview — Dashboard overview

BinderTrader trading matching page — Trading matching page

BinderTrader trade matches list — Trade matches

BinderTrader in-app messaging screen — In-app messaging

Custom binder collections in BinderTrader — Custom binder collections

Selecting cards for binders in BinderTrader — Selecting cards for binders

User profile

BinderTrader login page with Google sign-in — Login with Google

Case Study 3

Operational Systems Mapping & Digital Capability Protection

Mapping cross-department workflows to separate routine operational overhead from specialist digital work linked to marketing, CRM, UX, automation and revenue-supporting systems.

Product Operations Systems Mapping Workflow Design Digital Capability Stakeholder Alignment Resource Prioritisation CRM & Automation Marketing Operations Business Continuity

I approached this project as a product operations and systems-mapping challenge. During a period of business restructuring, the key issue was not simply reducing workload — it was understanding which activities were routine overhead, which were specialist digital capabilities, and which systems directly supported lead generation, customer experience and operational continuity.

The Opportunity

The business needed clearer visibility of where time and effort were being spent across website updates, CRM activity, email campaigns, webinar support, reporting, automation, admin and support requests. Without a structured view of these responsibilities, it was difficult to make confident decisions about what could be automated, outsourced, reduced or retained internally.

Recurring responsibilities needed to be mapped and categorised.
Routine admin needed separating from specialist digital work.
Leadership needed clearer visibility of business-critical digital capabilities.
Marketing, CRM and website work needed protecting from being treated as general admin.
The business needed a repeatable way to prioritise work based on impact.

Who the System Needed to Support

Leadership

Needed a clearer view of which activities created operational value, supported revenue or created avoidable overhead.

Marketing

Needed continued support for campaigns, landing pages, email production, analytics and optimisation.

Support Team

Needed clearer boundaries between student/admin support tasks and specialist digital/product responsibilities.

Sales

Needed marketing and CRM systems to keep supporting lead generation, follow-up visibility and conversion activity.

Business Operations

Needed a practical way to decide what should be retained, automated, outsourced or deprioritised.

Workflow Discovery

I reviewed recurring activities across departments and grouped them by business value, complexity, repeatability and dependency risk. The aim was to make invisible work visible, so decisions could be based on operational impact rather than assumptions.

Automation candidates

Some tasks were routine and repeatable enough to automate or outsource.

Specialist capability

Some responsibilities required specialist knowledge of website, CRM, UX or campaign systems.

Cross-department gaps

Several workflows crossed departments and lacked a single clear owner.

Connected reporting

Reporting needed to combine multiple systems rather than relying on isolated metrics.

Undervalued digital work

High-impact digital work risked being undervalued when grouped with general admin.

Clearer prioritisation

Better categorisation made prioritisation easier during resource constraints.

Problems Identified

Invisible operational work

Many recurring responsibilities were happening in the background, making it difficult for stakeholders to understand the full workload.

Specialist work treated like admin

Website development, CRM management, email systems, analytics and automation could be misunderstood as simple support tasks rather than specialist digital capabilities.

Unclear prioritisation

Without a shared framework, urgent low-value requests could compete with higher-impact work linked to campaigns, conversion and customer experience.

Disconnected reporting

Performance visibility depended on combining website analytics, email reporting, CRM activity, heatmaps and campaign data.

Process Workflow Map

Operational Activities Review

All Responsibilities

Categorisation Process

Admin / Routine Tasks

Outsource or Automate

Specialist / Revenue-Supporting Tasks

Retain & Prioritise Website • CRM • UX • Email • Automation

Product & Operations Decisions

I created a clearer operating model by separating task types and identifying where specialist digital capabilities should be protected, where routine activity could be simplified, and where reporting could support better decision-making.

Categorised responsibilities

Grouped work into admin, support, marketing, CRM, website, automation, reporting and product-related activity.

Separated specialist capability

Distinguished technical and growth-related work from routine operational tasks.

Prioritised revenue-supporting systems

Protected activity connected to lead generation, CRM visibility, website performance, campaign production and customer experience.

Identified automation opportunities

Highlighted repeatable processes that could be simplified, outsourced or automated.

Improved reporting visibility

Connected analytics, email, CRM and campaign data so stakeholders could see performance more clearly.

The Solution

The output was a clearer cross-department operating view that helped separate low-value operational overhead from specialist digital activity. This created a stronger foundation for resource planning, workload prioritisation and business continuity.

Mapped recurring responsibilities across departments.
Categorised activity by business impact and repeatability.
Identified tasks suitable for automation or outsourcing.
Protected specialist work linked to website, CRM, UX, email and automation.
Created clearer visibility for leadership and stakeholders.
Supported better prioritisation during operational change.

Product Impact

Workload clarity

Made recurring responsibilities easier to understand, group and prioritise.

Better resource decisions

Created a clearer distinction between routine tasks and specialist digital capability.

Business continuity

Helped protect website, CRM, marketing and automation work during operational change.

Performance visibility

Improved the way stakeholders could view campaign, website and CRM performance.

Scalable operating model

Created a repeatable approach for reviewing future responsibilities and workflow changes.

Systems & Tools

I worked across multiple digital systems to connect operational activity with performance visibility and day-to-day delivery.

WordPress CRM systems MailerLite GA4 GTM UTM tracking Microsoft Clarity HTML CSS Excel Google Sheets Webinar platforms Stripe API integrations

What I Learned

The biggest lesson was that operational clarity is a product problem as much as a management problem. When responsibilities are not clearly mapped, specialist work can be undervalued and high-impact systems can be treated as routine admin. A simple workflow model helped make hidden dependencies visible and supported better decision-making.

Invisible work needs to be mapped before it can be prioritised.
Specialist digital capability should not be grouped with routine admin.
Workflow clarity supports better stakeholder alignment.
Reporting matters most when it connects multiple systems.
Resource planning improves when work is categorised by impact, not just volume.

What I'd Do Next

Build a live prioritisation dashboard for recurring requests.
Add scoring for business impact, urgency, effort and dependency risk.
Track time spent by workflow category.
Create SLA-style rules for support, marketing and technical requests.
Add automation triggers for repeatable admin tasks.
Improve reporting across CRM, email, website and campaign performance.

Operational Visibility Dashboard

The dashboard concept brought workload priorities, business impact ratings and performance visibility into one place. The aim was to help stakeholders understand which systems supported lead generation, campaign performance and customer experience.

Select the screenshot to view it full size.

Coordination dashboard showing workload priorities, business impact ratings, and performance metrics for website traffic, email, leads, and conversion rate — Coordination dashboard — workload priorities and performance visibility

Case Study 4

Modernising the Student Training Journey Through Platform UX

Redesigning the mock exam, revision and results experience to help students progress through training with clearer feedback, better navigation and less dependency on manual support.

Product Management UX Design Learning Platform Student Journey Mapping Mock Exam UX Feedback Loops Frontend Development Stakeholder Discovery Scalable Systems

I approached this project as a student journey and platform modernisation challenge. The goal was to improve how learners moved through training, practice exams, revision, feedback and next-step guidance, while also reducing the operational burden on support teams, trainers and management.

The Opportunity

The existing student training experience depended on disconnected tools, manual processes and unclear progression points. Students needed a clearer way to practise, review mistakes and understand their readiness, while internal teams needed a more scalable way to support learners without repeatedly explaining the same next steps manually.

Students needed clearer visibility of their progress and exam readiness.
Mock exam feedback needed to be easier to understand and act on.
Support teams needed fewer repetitive progression queries.
Trainers and management needed a more consistent view of the student journey.
The platform needed to support future growth without adding more manual admin.

Who the Platform Needed to Support

Students

Needed a clear, low-friction way to practise exams, review mistakes and understand what to revise next.

Support Team

Needed quicker access to student progress, results and common blockers so they could guide learners more efficiently.

Trainers

Needed students to arrive better prepared, with clearer revision history and fewer gaps caused by poor navigation or unclear feedback.

Management

Needed a scalable system that reduced dependency on informal knowledge, manual tracking and disconnected legacy processes.

Mapping the Student Training Journey

1

Enrolment

Does the student understand where to start?

2

Course Content

Can the student access the right learning material easily?

3

Practice / Mock Exams

Is the exam experience clear, focused and easy to navigate?

4

Results Review

Can the student understand what went wrong?

8

Certification Progression

Does the next step feel clear after passing readiness checks?

7

Exam Readiness

Is the student confident they are ready for the real exam?

6

Retake / Improve Score

Can the student see progress over multiple attempts?

5

Targeted Revision

Does the platform guide the student towards what to revise next?

Product Discovery & Feedback

I gathered product requirements by observing how students, trainers and support staff interacted with the existing process. The biggest issues were not just visual design problems — they were journey problems. Students needed clearer feedback loops, support teams needed better visibility, and the business needed a platform that could scale without relying on manual explanation.

Post-exam guidance

Students needed better guidance after completing a mock exam.

Beyond pass/fail

Results needed to show more than a pass/fail percentage.

Mistake clarity

Question review needed to make mistakes easier to understand.

Support visibility

Support staff needed consistent data to answer student queries.

Trainer insight

Trainers needed a cleaner view of where learners were struggling.

Scalable structure

The platform needed a scalable content structure for future courses.

Problems Identified

Unclear student progression

Students could complete training activity without always knowing what to do next or whether they were ready to move forward.

Weak feedback loop

Mock exam results gave useful information, but the experience needed to make mistakes, topic gaps and revision priorities easier to understand.

Manual support dependency

Support teams had to answer repeated questions that the platform could solve through clearer UX, better progress visibility and structured guidance.

Limited scalability

As more courses, mocks and content were added, the platform needed a cleaner structure that could grow without becoming harder to manage.

Wireframing the Improved Experience

Before building the new experience, I mapped the key screens and user flows around what students needed to understand at each stage: where they were, what they had completed, what they got wrong, and what action they should take next.

Quiz layout

I simplified the quiz interface so students could focus on the question, navigate between questions, and review progress without unnecessary friction.

Question navigation

I added clearer question states and navigation patterns so students could move through longer mock exams with more confidence.

Results summary

I redesigned the results view to make performance easier to understand at a glance, including score, correct answers, incorrect answers and unanswered questions.

Per-question breakdown

I introduced a clearer review structure so students could see which answers were correct or incorrect and use that feedback for targeted revision.

Dark mode

I explored dark mode layouts to improve comfort and accessibility for longer study sessions.

Structured case study content

I introduced clearer case study layouts to support scenario-based learning and revision.

The Solution

The redesigned experience brought mock exams, results, review flows and revision content into a more consistent platform journey. The focus was not only on making the screens look better, but on helping students understand what happened, what it meant, and what they should do next.

Redesigned quiz interface with cleaner layout and navigation.
Improved results dashboard with clearer performance summary.
Added per-question review to support targeted revision.
Improved content structure for case studies and scenario-based learning.
Designed layouts that could support multiple courses and future content.
Reduced reliance on manual explanation by making the next steps clearer inside the platform.

Visual Showcase

Select any screenshot to view it full size.

Before & After: Quiz Experience

The previous quiz experience was functional but did not clearly support longer exam navigation or revision behaviour. The redesigned experience focused on question clarity, progress visibility and easier review.

Previous mock exam quiz layout — Previous quiz layout

Redesigned mock exam quiz layout — Redesigned quiz layout

In-quiz review and navigation features — In-quiz review and navigation

Before & After: Results & Feedback

The results experience was redesigned to turn exam completion into a feedback loop. Instead of simply showing a result, the new layout helped students understand performance, identify mistakes and decide what to revise next.

Previous mock exam results summary — Previous results summary

Redesigned mock exam results summary — Redesigned results summary

Results summary in dark mode — Results summary (dark mode)

Question breakdown in dark mode — Question breakdown (dark mode)

Structured Learning Content

Scenario-based case study content was structured to support deeper learning and help students apply knowledge in a more realistic context.

Case study listing layout — Case study listing

Case study detail layout — Case study detail view

Case study content structure — Structured case study content

Product Impact

Student experience

Clearer exam navigation, results feedback and revision guidance helped students understand what to do next.

Support efficiency

Better visibility and clearer self-service guidance reduced the need for repeated manual explanations.

Platform scalability

The improved structure created a foundation for adding more courses, mock exams and content types.

Learning feedback loop

Results became more actionable by connecting scores, incorrect answers and review behaviour.

Operational consistency

A shared platform experience helped align students, trainers, support and management around the same journey.

Build & Implementation

I worked across product planning, UX design and frontend implementation, turning platform requirements into usable screens and scalable interface patterns. The build required balancing student-facing UX with internal operational needs, ensuring that the platform could support multiple stakeholders rather than solving for one screen in isolation.

HTML CSS JavaScript Responsive design CMS / content structure UX workflows Mock exam logic Results breakdown interface Mobile-first layout Dark mode exploration

What I Learned

The biggest lesson was that platform modernisation is not just about replacing old screens. It requires understanding how every stakeholder moves through the system. Student UX improvements only become truly valuable when they also support trainers, support staff and management workflows.

Clear feedback loops are essential in learning products.
Results pages should guide action, not just report scores.
Support teams benefit when product UX answers repeat questions.
Scalable content structure matters as much as visual design.
Platform UX needs to consider both front-stage student experience and back-stage operational workflows.

What I'd Do Next

If continuing the project, I would focus on deeper learning analytics and personalised progression journeys, helping students understand not only what they scored but how their performance changed over time.

Add student progress dashboards across multiple attempts.
Track topic-level weakness and recommend revision paths.
Add trainer dashboards for cohort-level performance trends.
Add automated readiness indicators for exam voucher release.
Improve accessibility testing across quiz and results screens.
Add analytics to understand where students abandon exams or revision flows.

Case Study 5

Social Media Campaign Creative & Performance Design

Delivered high-performing digital creative for webinar, paid social, and promotional campaign outputs.

Role: Creative Lead + Growth Design Support Focus: clarity-driven visual conversion Delivery: scalable campaign assets

S Situation

The team needed consistent creative output that balanced speed, visual quality, and conversion performance across webinar, paid social, and organic channels.

T Task

I was responsible for campaign creative direction, mobile-first design optimisation, and brand consistency across social and landing assets.

A Action

I designed around attention hierarchy, CTA clarity, and message relevance for cybersecurity, cloud, AI, and data campaigns, then iterated layout and headline structures based on placement performance.

I built reusable creative templates so the team could deploy assets faster without sacrificing quality.

R Result

Achieved higher consistency across paid and organic channels, faster deployment through reusable systems, and improved readability and engagement in mobile placements.

Tools & Technologies

Adobe Creative Suite, Canva, Figma, Photoshop, Illustrator, Meta Ads, LinkedIn campaign tooling.

Visual Showcase

Select any image to view it full size.

Campaign visual system

Bento grid poster showing a range of social campaign creative across cybersecurity, cloud, and data themes — Campaign overview — bento grid of paid social, webinar, and promotional creative

Social campaign creative artboard showing paid ad layout variants — Creative artboard — paid ad layout variants

Social campaign creative artboard showing headline and CTA structure tests — Creative artboard — headline and CTA structure tests

Webinar & story creatives

Instagram story creative promoting a project management career webinar — Project management webinar — Instagram story creative

Instagram story creative promoting a data engineering career webinar — Data engineering webinar — Instagram story creative

Instagram story creative promoting a cyber security career webinar — Cyber security webinar — Instagram story creative

Square social graphic promoting a cloud career webinar with clear CTA — Cloud career webinar — square feed creative

Event invitation graphic for a Two Infinity Teddy promotional session — Two Infinity Teddy — event invitation graphic

Cybersecurity paid social

Paid social ad encouraging viewers to break into the cyber security industry — Break into cyber security — paid social ad

Cyber security career ad featuring an anonymous mask motif — New career in cyber security — anonymous mask creative

Facebook-format cyber security career ad with anonymous mask branding — New career in cyber security — Facebook placement

Get Glitched cyber security campaign Instagram ad with female talent — Get Glitched campaign — Instagram ad

Infographics & career pathways

Robust IT cyber security career pathway infographic — Cyber security pathway — infographic (version 1)

Robust IT cyber security career pathway infographic, alternate layout — Cyber security pathway — infographic (version 2)

Data specialist career roadmap infographic with rocket motif — Data specialist roadmap — infographic

AWS solution architect career pathway social graphic — AWS solution architect — career pathway creative

Magazine cover layout featuring IT training career messaging — Magazine cover — editorial-style career promotion

Cloud & data career ads

Paid social ad explaining how to become an Azure cloud engineer — Azure cloud engineer — how-to career ad

Launch your cloud career paid social ad with bold headline and CTA — Launch your cloud career — paid social ad

Data career next steps paid social ad featuring male talent — Data career next steps — paid social ad

Data career progression paid social ad featuring female talent — Data career progression — month-on-month creative

Data career salary-led paid social ad highlighting earning potential — Data career salary hook — £65k earning potential ad

Seasonal promotional campaigns

Black Friday promotional offer social creative — Black Friday — promotional offer creative

Cyber Monday promotional sale social ad from 2021 — Cyber Monday — promotional sale ad

Print & out-of-home

Vertical digital bus stop ad for Harlow with career training messaging — Harlow bus stop — vertical digital out-of-home ad

ELCAS funding promotional poster featuring Steve — ELCAS funding — promotional poster

Case Study 6

Deep Dissonance Podcast Brand Identity & Creative Direction

Created a complete visual identity and social direction for a drum and bass podcast concept.

Role: Brand Designer + Creative Director Focus: identity systems + scalable application Delivery: logo, typography, and social concepts

S Situation

A new drum and bass podcast concept needed to stand out in a saturated market while remaining adaptable across podcast artwork, social posts, and promotional formats.

T Task

I was responsible for end-to-end brand identity, creative direction, and scalable social application guidance.

A Action

I led logo exploration, mood boarding, and visual language definition, then developed a dark, high-contrast system with recognisable type treatment and structured social templates.

R Result

Delivered a complete and scalable brand identity system, established a recognisable visual language for digital channels, and created reusable templates for ongoing content production.

Tools & Technologies

Adobe Illustrator, Adobe Photoshop, Figma, typography systems, layout design and social mock-up workflows.

Visual Showcase

Select any image to view it full size.

Brand direction mood board

Mood board cover — Jack Heeney × Deep Dissonance brand direction, 2024

Logo exploration — mirrored D letterforms and energetic-field wireframe concepts

Deep Dissonance full mood board with colour palette, typography, and social mock-ups — Full mood board — colour palette, Source Sans 3 typography, and social post applications

Logo mark

Logo mark — white on dark grey app icon format

Logo mark — black on white reversed

Logo mark — white on black

Logo mark — black on white squircle

Logo mark — grayscale value range for flexible application

Brand application

Brand system — logo lockups, colour palette, and typography direction

Deep Dissonance Spotify artwork and social post mock-ups — Brand application — Spotify artwork and social post mock-ups

Brand application — Instagram post concepts with logo and campaign messaging

Case Study 7

AudioGrooves Event Marketing, Creative Design & After-Party Content

Designed the label logo and supported advertising, marketing, and creative production for club nights and label events.

Role: Graphic Designer + Marketing & Creative Lead Client: AudioGrooves music label Delivery: logo, posters, social graphics, after-party films

S Situation

AudioGrooves, an independent music label, needed consistent advertising and creative support to promote club nights, label showcases, and artist events — with limited in-house design capacity and tight turnaround between announcements and show dates.

T Task

I was responsible for designing the AudioGrooves label logo and helping run event advertising and marketing alongside end-to-end creative production: event posters, promotional graphics, and after-party recap films.

A Action

I designed the AudioGrooves logo and brand mark, establishing a recognisable visual identity that carried through posters, social assets, and event collateral.

I planned and executed paid and organic campaign workflows across social platforms, designing event posters and promotional graphics aligned to the label brand and each night's visual identity.

I produced after-party recap videos from event footage for post-show promotion and audience retention, and built reusable templates so recurring event formats could be turned around faster without losing quality.

R Result

Delivered a cohesive label identity from logo through to campaign creative, maintained consistent promotional output across multiple events, and extended reach beyond the night itself via after-party content.

Tools & Technologies

Adobe Photoshop, Adobe Illustrator, Adobe Premiere Pro, After Effects, Meta Ads, social campaign tooling, logo design, typography and layout systems.

Visual Showcase

Select any image to view it full size. Videos play inline with controls.

Label logo

AudioGrooves logo — primary label mark for events and digital channels

Event posters & flyers

Grooves on the Decks save-the-date flyer, first release — Grooves on the Decks — save-the-date, first release

Grooves on the Decks tickets on sale promotional graphic — Grooves on the Decks — tickets on sale

Grooves on the Terrace Part 4 event composite poster — Grooves on the Terrace Part 4 — composite poster

Grooves on the Terrace Part 4 poster featuring Shannon Popple — Grooves on the Terrace Part 4 — artist-led poster

Junction 26 event promotional poster — Junction 26 — event poster

Secondcity event promotional poster — Secondcity — event poster

93 Feet East full lineup release poster — 93 Feet East — full lineup release

93 Feet East Black Friday promotional deal graphic — 93 Feet East — Black Friday deal promo

Social & promo graphics

AudioGrooves at Colours Hoxton promotional graphic — Colours Hoxton — event promo

Funk Cartel press shot social graphic for Colours Hoxton — Colours Hoxton — Funk Cartel press-shot social

Boomtown festival set times graphic for AudioGrooves artists — Boomtown — set times graphic

Motion, animated flyers & after-party films

Animated event flyer — motion promo for social

Instagram story — event countdown and promo

93 Feet East 1st birthday — official after-party film

Shoreditch Summer Day Party — after-party recap

Junction 26 Truck Stop w/ Secondcity — official aftermovie

Case Study 8

Kengai Records Label Release Art, Event Creative & Social Campaigns

Designed release artwork, event collateral, and connected Instagram carousel posts for an independent electronic music label.

Role: Graphic Designer + Creative Lead Client: Kengai Records music label Delivery: release art, event flyers, social carousels

S Situation

Kengai Records, an independent electronic music label, needed consistent creative support for artist releases and club-night promotions — with artwork, social assets, and event flyers required on tight turnarounds between announcement and release or show dates.

T Task

I was responsible for designing label release artwork, event promotional materials, and social campaign graphics — including multi-slide Instagram connected posts that could carry longer release narratives across a single swipeable carousel.

A Action

I produced single and EP release artwork aligned to each artist's sonic identity and the Kengai visual language, from cover art through to promotional variants for streaming and social.

I designed event flyers, save-the-date graphics, and venue-led promotional assets for label nights and showcases.

I built connected Instagram carousel sequences — artboards designed to scroll as one continuous post — so release stories, line-ups, and event details could be communicated without cramming everything into a single frame.

R Result

Delivered a cohesive stream of release and event creative across multiple artists and nights, with reusable carousel formats that made longer promotional stories easier to publish and browse on social.

Tools & Technologies

Adobe Photoshop, Adobe Illustrator, typography and layout systems, social asset sizing, and Instagram carousel post workflows.

Visual Showcase

Swipe through the connected Instagram carousel below. Select any other image to view it full size.

Instagram connected carousel

Swipe or use the arrows to scroll through connected posts — designed as one continuous Instagram carousel.

Kengai Records Instagram connected post, slide 1 of 6

Kengai Records Instagram connected post, slide 2 of 6

Kengai Records Instagram connected post, slide 3 of 6

Kengai Records Instagram connected post, slide 4 of 6

Kengai Records Instagram connected post, slide 5 of 6

Kengai Records Instagram connected post, slide 6 of 6

Connected Instagram carousel — multi-slide release and event announcement sequence

Label branding

Kengai Records — primary bonsai logo mark

Kengai Records — red logo variant for event and release campaigns

Release artwork

Evergreen Rosso release promotional graphic — Evergreen Rosso — release promo graphic

Convoy Off My Mind release artwork — Convoy — Off My Mind release artwork

Subrix Go Or Stay release artwork — Subrix — Go Or Stay release artwork

Subrix Underground EP release artwork — Subrix — Underground EP artwork

Sephia Trajectory release artwork — Sephia — Trajectory release artwork

Event flyers & social promos

Star of Kings event flyer for Kengai Records night — Star of Kings — event flyer

House Kengai purple-themed event promotional graphic — House Kengai — event promo

Vigital Space Station event promotional graphic — Vigital Space Station — event promo

Save the date graphic for Morality event — Morality — save-the-date graphic

Kengai Records event Instagram post graphic — Event Instagram post — label night announcement

Case Study 11

Desktop Portfolio Website & Interactive UX Experience

Designed and built a nostalgic Windows-style desktop portfolio that demonstrates product thinking, frontend craft, and recruiter-friendly case study storytelling.

Role: Product Designer + Frontend Developer Audience: recruiters, hiring managers, collaborators Delivery: desktop UI, browser app, guided tours, STAR case studies

S Situation

Most portfolio sites follow the same scrollable template — clean, but easy to skim past. I needed a personal site that would stand out in hiring conversations, demonstrate hands-on product and frontend skills, and present project work in a format recruiters already use when evaluating candidates.

T Task

I set out to design and build a distinctive portfolio experience: a nostalgic desktop metaphor that feels playful without sacrificing clarity, with structured STAR case studies, live website previews, document access, and onboarding for first-time visitors.

A Action

I conceived a Windows XP-inspired desktop with login screen, Bliss wallpaper, draggable windows, taskbar, and Start menu — mapping portfolio content to familiar desktop affordances (projects in the browser, CV in My Files, contact via desktop icons).

I built a modular window system in vanilla JavaScript and PHP, including a browser app that hosts the portfolio site, STAR case study pages with visual showcases, and iframe previews of live client websites.

I designed two guided tour layers: a Clippy assistant that walks visitors across the desktop column by column, and an in-browser tour that explains navigation controls without breaking immersion.

I added interactive touches — Snake and Space Invaders mini-games, OSRS hiscores, sticky notes — to showcase frontend capability and personality, while keeping core hiring content one click away.

R Result

Delivered a memorable, self-contained portfolio product that doubles as a skills demonstration: UX design, frontend engineering, content structure, and attention to hiring-manager workflows in one cohesive experience.

Tools & Technologies

HTML, CSS, JavaScript, PHP, responsive layout, window management UI, local storage, iframe embedding, and UX prototyping workflows.

What I Learned

Nostalgia only works when it serves a job — every desktop icon and window had to map to a clear portfolio goal, or the concept would have been a gimmick instead of a usable product.

Visual Showcase

Select any screenshot to view it full size.

Desktop experience

Windows XP-style desktop portfolio with Bliss wallpaper, desktop icons, taskbar, and Clippy welcome prompt — Homepage — Bliss wallpaper, desktop icons, taskbar, and Clippy onboarding

Clippy guided tour

Clippy assistant welcome dialog with Show me around and Next tip buttons — Clippy welcome — nostalgic assistant UI with clear primary and secondary actions

Clippy tour highlighting the About Me desktop icon with Open About Me action — Column-by-column tour — highlights each desktop icon with contextual actions

Browser app & in-window tours

Portfolio browser welcome tour step 1 of 6 explaining window controls — In-browser tour — six-step guide to portfolio navigation and controls

Desktop browser window previewing data-webinar.org live website — Live site previews — client websites open inside the desktop browser window

STAR case studies

Case study page using STAR format for Student Training Portal project — STAR structure — Situation, Task, Action, Result with role and stakeholder chips

Case study visual showcase with before and after quiz layout comparison — Visual showcase — lightbox-ready screenshots with before/after comparisons

Interactive extras & documents

Snake Game and Space Invaders windows open on the desktop portfolio — Mini-games — playable Snake and Space Invaders to demonstrate frontend interactivity

My Files window displaying Jack Heeney CV PDF on the desktop — CV access — downloadable résumé via the My Files desktop window

Get in Touch

Feel free to reach out if you'd like to work together or just say hello!

Email: jackheeney1@googlemail.com

LinkedIn: View Profile

GitHub: View Profile

Skill	Rank	Level	XP

About Me

Work

IT Training Route Platform

Customer Journey Optimisation

Digital Operations & Cross-Department Systems Management

Student Training Platform UX

SkillsNest Learning Platform Website

Social Media Campaign Creative & Performance Design

Friends & Side Projects

Squirrels Nursery Website & Admin Portal

Creature Print 3D Stripe Storefront

Deep Dissonance Podcast Brand Identity & Creative Direction

AudioGrooves Event Marketing, Creative Design & After-Party Content

Kengai Records Label Release Art, Event Creative & Social Campaigns

Personal Projects

BinderTrader Platform Architecture & Product Development

Desktop Portfolio Website & Interactive UX Experience

Core Skills

Get in touch

My Files

My Images (147)

Image

My Documents (2)

Jack CV

dissonance-moodboard-direction-branding

PDF Document

About Me

💡 Core Skills

Live Websites

Case Studies

Work

IT Training Route Platform

Customer Journey Optimisation

Digital Operations & Cross-Department Systems Management

Student Training Platform UX

SkillsNest Learning Platform Website

Social Media Campaign Creative & Performance Design

Friends & Side Projects

Squirrels Nursery Website & Admin Portal

Creature Print 3D Stripe Storefront

Deep Dissonance Podcast Brand Identity & Creative Direction

AudioGrooves Event Marketing, Creative Design & After-Party Content

Kengai Records Label Release Art, Event Creative & Social Campaigns

Personal Projects

BinderTrader Platform Architecture & Product Development

Desktop Portfolio Website & Interactive UX Experience

The Opportunity

Who the Experience Needed to Support

Prospective Students

Sales Team

Marketing Team

Business

Mapping the Route Decision Journey

Campaign Click

Route Awareness

Pathway Comparison

Sales Follow-Up

Enquiry Intent

Decision Support

Product Discovery & UX Thinking

Pathway clarity

Decision fatigue

Helpful CTAs

Campaign continuity

Sales context

Reusable funnel

Problems Identified

Too much ambiguity

Weak comparison journey

Low-confidence enquiries

Disconnected campaign flow

Product & UX Decisions

Clearer pathway positioning

Comparison-led content

Decision-focused CTAs

Joined-up funnel thinking

The Solution

Product Impact

Clearer student decision-making

Better enquiry quality

Core Skills