My Workflow

A user-centred UX process. Research, ideation, testing, and delivery for digital products.

Exercise 1

User Research
  1. Step 01

    Personas

    User Personas ✓

    Built fictional representation of target beginner gym attendee to guide design decisions

    Alex ‖ Age: 23

    Occupation: Accountant ‖ Main Device: Desktop
    Interests: Chess, Gym, Cycling

    Actions

    • Logs workouts
    • Searches exercise guides
    • Explores nutrient guides

    Pain Points

    • Poor typography
    • Content layout shifting
    • Exercises planning is complex

    Opportunities

    • Image optimisation for performance
    • Responsive layout across devices
    • Exercise guide videos

    Goals

    • View upcoming workout sessions
    • Check what exercises muscles target
    • Seek support with diet plans
  2. Step 02

    Empathy Map

    Empathy Map ✓

    "How do I make my workout more effective?"
    User Alex represented as a weight plate

    Thinks

    Does

    Says

    Feels

    "I need a structured plan to stay consistent"

    Frustrated when content is hard to navigate

    "If I had a clean plan I'd go gym more"

    Follows workout steps using equipment

  3. Step 03

    User Journey
    Map

    User Journey Map ✓

    Mapped the gym user's experience across five stages to surface friction, goals and design opportunities.

    1. Warm-Up

      Enters gym at front desk

      Easily locates warm-up plan

      Plan is hard to locate

    2. Onboarding

      Selects workout plan

      Simplistic UI for workout layout

      Exercise layout unstructured

    3. Session

      Selects current day's workout

      Session shows whole workout plan

      Workout cannot be located

    4. Exercise

      Completes exercise

      Video guide helpful to perform

      Unclear instructions

    5. Rest

      Rests till next set

      Clear outlined rest times

      Data missing — unstructured

    • ✓ Happy
    • ✕ Pain
  4. Step 04

    Survey

    Survey Methodology ✓

    Deployed a structured survey to gather usable data, following a four-step cyclical research methodology.

    IDENTIFY USABLE DATA FOR IMPROVEMENT 3 Gather Participants 4 Analyse Results 2 Survey Design 1 Research around problem space

Exercise 2

UI/UX Design
  1. Step 01

    Ideation

    Crazy 8s Sketching ✓

    Crazy 8s sketching to rapidly explore interface ideas.

    Crazy 8s sketches
  2. Step 02

    Low Fidelity
    Prototype

    Low-Fi Wireframes ✓

    Low-fidelity wireframes for mobile and desktop layouts.

    ✦ Designed in Figma
  3. Step 03

    High Fidelity
    Prototype

    High-Fi Prototype ✓

    Interactive high-fidelity prototype with motion and transitions.

    ✦ Designed in Figma

Exercise 3

Usability Testing
  1. Step 01

    ♟ UX
    Methodology

    UX Methodology ✓

    Data collected by observing participants and applying UX research methodologies, including think-aloud protocols and collaborative workshops.

  2. Step 02

    ♜ Data
    Analysis

    Data Analysis ✓

    Analysing collected data to generate insights into the problem space, visualised through graphs highlighting key areas of focus.

    Analysis workshop

Exercise 4

Front-End Development
  1. Step 01

    Build

    Build </> HTML · CSS · JS ✓

    Developed the final website using HTML, CSS, and JavaScript, transforming the prototype into a responsive coded experience.

Exercise 5

Performance Evaluation
  1. Step 01

    Lighthouse
    Audit

    Lighthouse Audit ✓

    Ran a Lighthouse audit on the final build to identify opportunities for improvement across performance, accessibility, best practices, and SEO.

  2. Step 02

    Heuristic
    Evaluation

    Heuristic Evaluation ✓

    Reviewed the coded platform against Nielsen's 10 usability heuristics to uncover usability issues and areas for refinement.

Deliverable

  1. Research
  2. Design
  3. Prototype
  4. Testing
  5. Code
  6. Optimisation
  7. Deliverable

From the first insight to the final build. Every step assists the next phase. Research shapes design. Design drives prototypes. Testing validates code. The result: polished, accessible, performant interfaces that solve real problems.

See the work →