Back to overview

Customer journeys and a design system for a learning platform

HEALVERSITY received reusable components, page templates and an implemented WordPress foundation for additional landing pages. In parallel, we identified obstacles between initial interest, registration and access to learning content.

My role
Project & design leadership · userdoo
Design & concept
Tommy Haacke and team
Technical implementation
Expert Allies · coordinated by me
HEALVERSITYLanding page · design concept
Detailed HealVersity landing-page introduction with training offer, imagery and appointment booking
One part of the shared design foundation: the training landing-page introduction. Original design from the HEALVERSITY system.

A shared foundation for customer journeys and implementation

Situation

HEALVERSITY needed a concept for its public website and logged-in learning area. People arrived through different entry points; registration, ordering and content access needed to be considered together.

Role and responsibility

I led concept and design with my team. Our work covered customer journeys, components and templates, plus coordination of technical implementation with Expert Allies.

Approach

We examined the path from initial interest to the next step in documented walkthroughs, recording friction and proposed solutions. For demo access, we connected the ad, registration, first lessons and follow-up offers in one concept. A stylescape, components and page templates formed the design foundation. I coordinated WordPress implementation with Expert Allies.

Result

HEALVERSITY received a design system with components and page templates, plus an implemented WordPress foundation for landing pages. Walkthroughs identified specific barriers to registration and learning content.

01 Reviewing customer journeys

Revealing friction between
interest and completion.

A landing page explains only part of the journey. Our walkthroughs examined connected steps from the ad through the offer to the form, order or access to learning content.

We documented the book funnel, the “7 Therapy Approaches” entry point and demo access, recording user actions, potential friction and specific improvements.

Walkthrough of an existing checkout form with error messages and recommendations for validation, autofill and progress indication
Analysis of the existing book checkout. The reaction shown is an illustrative assumption from the walkthrough, not a user quote. We did not design the checkout being reviewed.

Make forms understandable

Review required fields and errors in context. Proposed improvements included immediate validation and autofill.

Explain the next step

Show the current stage and what happens after an action.

Clarify transitions

Make the relationship between the free entry point, learning offer and further training clearer.

02 Developing solutions

From registration
to the first lesson.

The analysis led to solution sketches. For demo access, we connected the ad, landing page, registration, first lessons and the option to book a conversation.

We also considered supporting emails in the flow, allowing the team to agree what information was needed at each touchpoint and how the next step would follow.

Excerpt of the demo-access concept linking wireframes for landing page, registration, lessons and consultation booking
Excerpt from “Demo Access Funnel Solution Idea”. The connections show the proposed flow; the sketch documents a solution concept.
  1. 01 · Entry point

    Understand the offer

    The ad and landing page introduce the free learning offer.

  2. 02 · Access

    Register and find content

    The form leads to selected lessons and supporting information.

  3. 03 · Follow-up

    Offer the next step

    Consultation booking and emails build on interest in the training.

03 Shared design foundation

Components and templates
for recurring needs.

We developed a shared visual direction and translated it into a design system. A stylescape connected colours, typography, imagery and initial module ideas.

The required components and page templates followed: buttons, inputs, cards, navigation, offer sections and FAQs. Each page could build on the same foundation.

HealVersity stylescape with teal and green colours, typography, imagery and initial module ideas
Visual direction in the stylescape. Small screens show a cropped view.
Upper portion of the training landing page with hero, introduction, founders and further information modules
Excerpt of a Figma landing-page template, combining reusable modules into a specific offer page.

From visual direction
to a usable template.

The landing page applies the system: introduction, training information, audiences, content, participant feedback and next steps form one page.

Variants for different content.

The cards show how the same foundation supports short information, illustrated articles and video content.

Documented card variants in the userdoo design system for HealVersity: text, image, action and video
Component examples from the system. Text and names include placeholders.

04 Collaboration & implementation

Following design through
to technical implementation.

Our work continued beyond design. The engagement also included an optimised WordPress environment and a flexible landing-page framework.

Expert Allies was our technical implementation partner. I coordinated their work and connected the userdoo team's design with technical delivery.

My role covered concept development, design leadership and coordination between the client, userdoo and the implementation partner.

Project responsibilities

My contribution

Concept, design leadership and implementation coordination

Tommy Haacke and team

Detailed UX, design system, components and templates

Expert Allies

Technical implementation partner

Outcome

Building additional landing pages on a shared foundation.

Additional landing pages could build on shared templates and components. Working with Expert Allies, we carried this foundation through to WordPress implementation. The walkthroughs identified concrete opportunities for clearer forms and transitions to learning content; higher conversion was a goal, but has not been established as an outcome.

Analysis & concept

Documented customer journeys

Walkthroughs identifying specific barriers and sketching solutions for next steps.

Reusable design

Components & templates

A shared visual foundation with detailed components and page templates.

Technical delivery

WordPress foundation

Environment and landing-page framework developed with Expert Allies.