What Do You Want To Be? — Case Study · Paul Jones
INSTRUCTIONAL DESIGN CASE STUDY
What Do You Want To Be?
A self-reflection learning experience inspired by audience insights taken from a live personal growth event from Tony Robbins, this project turns a paper based coaching exercise into an interactive digital journey that learners can return to over time.
Audience Analysis
Action Mapping
Visual Direction
Wireframes
Prototyping
Front-End Web Dev
PROJECT SNAPSHOT
TARGET AUDIENCE
Adults interested in self-development and reflection, particularly those seeking greater direction or balance.
ARTIFACTS
Visual Direction and Style Guide,
Product Requirements Document,
Wireframes,
Prototypes,
Visual Design Assets
Project Handoff Docs (Web Dev)
Web and Mobile Application
WHAT I DID NOT OWN
The original Wheel of Life framework, this project reimagines an established coaching concept as a digital learning experience.
MY ROLE
On this project, I managed the full lifecycle, from the initial concept through to web app development.
Collected audience insights during a live personal growth event.
Defined the instructional goal translating Tony Robbins' The Wheel of Life framework into a self-guided digital reflection experience.
Simulated a kick off meeting using an AI agent SME and a Stakeholder for Action Mapping.
Created the visual direction and style guide using Figma.
Created a PRD (Product Requirements Document) to align everybody on goals, features, and requirements, it included visual direction, technical instructions for development.
Produced wireframes and visual mock-ups in Figma to experiment with the learning experience and to test the flow.
Created additional visual media assets such as icons and infographics to use within the design stages.
Explored tools including Articulate Storyline and Adobe Captivate, before identifying interactivity limitations and choosing a custom web build to fully realise the design.
The build approach was to convert Figma wireframes and mock-ups into working prototypes using Google Stitch AI, then refine and assemble the final build in Visual Studio Code, using Vue.js and GitHub Copilot AI to make changes efficiently rather than hand-coding from scratch.
I deliberately chose Vue.js for its component-based architecture, and kept the codebase clean and documented throughout, using the PRD as a reference, so any web developer could pick up this project during the handoff process, this kept my own focus on instructional design rather than web development.
This project exists as a standalone web app rather than a SCORM package, partly because a self-guided reflection tool doesn't necessarily benefit from LMS completion tracking the way a compliance course would.
That said, I understand what SCORM or xAPI wrapping would involve, so adapting a web build like this for LMS integration is very achievable when a project calls for it.
THE PROBLEM
People feel stuck — without knowing why
After attending Tony Robbins’ Unleash the Power Within, I noticed a pattern: the event workbook was full of powerful self-reflection prompts, but one and two months later, those paper notes weren’t easy to revisit in a way that supported action. Many people struggle not with motivation, but with clarity — they lack a structured way to assess where they are, what feels out of balance, and what specifically needs attention.
The design insight: a digital, interactive version of the Wheel of Life could better support post-event momentum, regular check-ins, and ongoing reflection.
LEARNER OBJECTIVES
What the experience helps learners do
Help people identify areas that need attention, write meaningful reflections, set achievable goals, and return to their progress over time.
MY PROCESS
From audience insight to working prototype
1 Audience insight & analysis — Live observation and informal conversations at a real four-day event revealed a need to sustain deliberate action after the event.
2 Defining the instructional goal — Help people diagnose the gaps between their current life balance and the life they want through self-assessment and reflection.
3 Action mapping — A kick-off-style session in MindMeister and Miro to test assumptions and define the learner actions that mattered most.
4 Visual direction, PRD & design system — A calm, minimal Organic Balance system designed to reduce cognitive load and support reflection.
5 Wireframes, mock-ups & prototyping — Early wireframes and low-fidelity mock-ups established the interaction and flow before colour was applied.
KEY FEATURES
What makes the experience work
Interactive Wheel of Life, guided reflection prompts, bespoke PDF export, a calm visual language, repeat-use design, and accessible multi-device use work together to keep attention on reflection rather than the interface.
THE PRD
Why I Wrote a PRD (Not Just a Design Document)
A fair question about this project: why does an instructional design portfolio piece include a Product Requirements Document?
The honest answer is that I was working solo, across both instructional and technical decisions, with no team to split the work across. On a normal team, the content a PRD holds here would usually live in three separate places: a design document (learning goals, audience, content structure), a UX spec (screen flow, interaction rules), and a technical brief (design system, build constraints). Since I was making all of those decisions myself, and building the thing myself, one working document that tied them together was more useful than three disconnected ones.
This project asked me to move between instructional design, creative, and web development. So it's not that I think instructional design work needs a PRD by default. It's that solo, cross-disciplinary projects need something to do the job a PRD does, and calling it what it actually is felt more honest.
VISUALS & MEDIA
See the work
CHALLENGES
What made this hard — and how I responded
CHALLENGE — The project was based on a coaching framework I experienced first-hand, not a live client brief. RESPONSE — I grounded the idea in real audience insight from the event while being careful not to overstate the project context. CHALLENGE — No direct stakeholder or learner testing was available in the early stage. RESPONSE — I used a proxy SME and stakeholder approach to pressure-test assumptions while recognising this is a stand-in for real validation, not a substitute.
The SVG wheel of life was a limitation fo Articulate and Capitive and some web development was exploered
HOW SUCCESS IS MEASURED
How success is measured
The main indicator of learning is not recall, but the quality of reflection and evidence of follow-through over time. The learner identify gaps in the life using The Wheel of Life and sets future goals to create balance within the different areas of their life.
Success will be measured by whether users can identify current life areas gaps, write meaningful reflections, set specific goals, and most importantly follow through with future goals and report back about them.
DESIGNED WITH OUTCOMES IN MIND
What the experience helps learners do
✓ Help people who feel “fine” on the surface gain a clearer view of where life may be out of balance.
✓ Highlight key life areas — health, relationships, career, finances, and meaning.
✓ Support ongoing self-reflection and progress review over time — not a one-time activity.
✓ Present the Wheel of Life as a simple, visually intuitive self-reflection tool.
RESULTS & REFLECTION
What this project taught me
This project showed how an established coaching concept can become a clear, early-stage learning prototype. It demonstrated my ability to combine visual design, prototyping, and exploratory instructional design methods in one practice-based piece of work.
Back to top