Tracy O'Callaghan · Senior product designer
Tracy O'Callaghan/ {{ section }}

I'm Tracy, a senior product designer. I make complex, high-trust journeys feel simple.

Based in London. Open to senior product design roles.

From research and strategy through to polished UI, design systems and delivery. Most recently at BPP, for 50,000+ learners.

50,000+learners using the BPP app I led design for
88%adoption within two weeks of launch
400+tutors onboarded onto the attendance portal
10+years in design

Brands and agencies I’ve worked with

Case studies

The decisions behind the screens.
Three BPP learner app screens on phones: learning material, the chatbot and the welcome hub
01 · BPP learner app · iOS and Android · senior product designer

I redesigned an app students only opened when they had to.

BPP Education GroupiOS + Android appResearchNorth-star vision
  1. 1Timetable first, because it's the moment students actually open the app for. 84% engage with it.
  2. 2Fee tracking deferred. Legacy integrations weren't ready, so I didn't pretend they were.
50,000+learners using the BPP app I led design for
88%adoption within two weeks
+40%daily active users
+65%weekly active users
02 · BPP tutor portal · web

Redesigning attendance management for 400+ tutors

Attendance had no real process, and it was taking tutors’ time away from teaching. I led design of the Tutor Portal’s first release, from concept to MVP.

Senior product designerAttendanceConcept to MVP
400+tutors onboarded
200+operational hours saved
The BPP staff portal dashboard on a laptop: today's classes and the week's registers
03 · BPP Raise a Query · iOS and Android

I made raising a query easier. Tickets went up.

Why that was the most useful thing we learned, and how it turned support chatbot-first.

Senior product designerSupport journeyChatbot-first
A hand holding a phone showing step 2 of Raise a Query: choosing a query type
04 · TrackActive Me · HealthTech · iOS, Android and desktop

Rehab only works if people do the exercises. I designed for that.

TrackActive Me helps people manage muscle, joint and back pain, and is used by insurers, employers and the NHS.

UI/UX designer (contract)MSK self-managementDesign system
The TrackActive Me app on a phone, with a finger tapping New program
05 · William Russell · Insurance · iOS and Android

I designed William Russell's first app, for expats making a health claim a long way from home.

Claiming on health insurance abroad means foreign providers, foreign currencies and paperwork, often while you're unwell.

UI/UX designer (contract)Claims journeyDesign system
A hand holding a phone showing the William Russell app home screen

Also

  • Wall Street English, with ReasonLead product designer. A WCAG-compliant design system. The design phase won Reason the build.
  • Engage in HealthHealthcare sites for pharma clients.
Tracy O'Callaghan
About

A graphic designer's eye, a product designer's priorities.

I started in graphic design, then moved into product. I care how things look, but I care first about whether they work.

I've designed in-house at a large education group, in startups, including HealthTech, and with agencies on pharma and global learning platforms. The products vary, from support journeys and insurance claims to pain management and internal tools, but the principle stays the same: make the next step obvious, and make it look like someone took the time.

When I'm not designing, I'm running.

ExperienceBPP, senior product designer
TrackActive Me, lead product designer
Reason, lead product designer
Engage in Health
William Russell
What I doResearch and discovery
Product strategy
UX and UI
Design systems and accessibility
Delivery with engineering
ToolsFigma
Figma Make
Claude Design
SectorsHealthTech and digital health
Education
Insurance
Pharma

What people say

From the people I've worked with
“She's a generous collaborator, a sharp design thinker, and someone who lifts the standard of everyone around her. Any team would be lucky to have her.”
Murray BrownHead of Product Design, BPP
“Beyond her design craft, Tracy is simply brilliant to work with and great fun. Highly respected, generous with her knowledge and expertise. I recommend Tracy without reservation.”
Rick LippiettExperience Design Leader, BPP
“Tracy immediately hit the ground running, tackling highly complex project briefs head-on with an almost mind-reading ability. A calm, collected, in-demand design professional who's a joy to have on any project.”
Lewis AshendenIntegrated Design Lead, Engage in Health
← All work {{ c.kicker }}

{{ c.title }}

{{ c.standfirst }}

{{ m.k }}
{{ m.v }}
BPP learner app screens on phones
{{ lbAlt }}
{{ lbCap }}{{ lbCount }}
 The BPP staff portal dashboard on a laptop: today's classes and the week's classes A hand holding a phone showing step 2 of Raise a Query: choosing a query type, with a 2 of 4 progress ring
{{ ch.kicker }}

{{ ch.title }}

{{ bd.cap }}
{{ bd.cap }}

{{ ch.body }}
“{{ ch.text }}”
— {{ ch.by }}
{{ ch.num }} {{ ch.kicker }}

{{ ch.title }}

{{ para }}
{{ s.kind }} {{ s.n }} {{ s.label }}
  1. {{ f.idx }} → {{ f.k }} {{ f.v }}
  • {{ it.idx }} {{ it.t }} {{ it.d }}
“{{ ch.pull.text }}”
— {{ ch.pull.by }}
 {{ ch.concept }}
{{ ch.aside.cap }}
{{ ch.aside.cap }}
{{ ch.aside.cap }}
{{ ch.aside.cap }}
{{ walkCur.alt }}
{{ walkSlotNote }}
{{ walkNum }} / {{ walkTotal }} {{ walkCur.phase }}

{{ walkCur.t }}

{{ walkCur.d }}

{{ walkCur.w }}
Key decision {{ walkNote.t }} Problem {{ walkNote.p }} What I designed {{ walkNote.d }}
Why{{ walkNote.w }}
{{ ch.slotCap }}
{{ bd.cap }}
{{ bd.cap }}
{{ ph.alt }}
{{ ch.cap }}
{{ ch.cap }}
Next project {{ nextTitle }} →
← All workCase study · BPP learner app

I redesigned an app students only opened when they had to.

BPP's learner app was a shell that sent 50,000+ students off to web platforms. I led design from research to launch, and changed what the app was for.

Role
Senior product designer, sole designer on the team. Co-led research
Organisation
BPP Education Group
Platform
iOS and Android
Team
Product, engineering, service design, delivery, analytics
The redesigned BPP learner app on phones: onboarding, home with What's new, and the support chat
The starting point

The app wasn't really a mobile product. It was a set of links.

Nearly every task sent students somewhere else. They jumped between systems, searched instead of being guided, and left the app for basic tasks.

60%didn't know the app existed
46%had difficulty finding information
53/100satisfaction (CSAT)
The old app: check-in, My Learning and downloaded content screens, styled in flat greys
The old app. Most tasks sent students to web platforms.
Discovery

Our research proved us wrong.

  1. 01 → We assumedStudents wanted mobile to replace desktop.
  2. 02 → We discoveredThey wanted help organising their day.
The question students were really asking
“What do I need to know or do right now?”

A survey of 800+ students, 47 interviews, 6 co-creation workshops and 23 prototyping sessions.

    •
{{ lbAlt }}
{{ lbCap }}{{ lbCount }}
What I designed

Designed around four things students actually need.

  • 01PlanWhat’s happening? → Timetable
  • 02Stay informedWhat’s changed? → Notifications
  • 03ManageWhat do I need to do? → Check-in and My Account
  • 04Get helpWhere do I go? → Support and chatbot
The redesigned app screens: home, check-in, timetable, notifications and My Account
What we delivered: timetable, check-in, notifications, support and My Account.

Check-in

Check-in ends on a clear confirmation, which students called reassuring in testing.

Notifications

Urgent alerts like room changes are sent straight away. The rest is left to the student.

The decisions

Good strategy is knowing what not to build yet.

I prioritised by three things, in this order.

  1. Daily value
  2. Technical feasibility
  3. Feature parity

What shipped when

ReleaseWhat it included
MVP 1QR check-in, My Account, existing learning
Fast followTimetable, notifications
FuturePersonalisation

What waited, and why

WantedWhy not yet
Fee trackingLegacy integrations
PersonalisationNo identity service to reliably identify students
Learning contentResearch showed desktop was better

The biggest challenge wasn't the UI, it was ownership.

No one owned the content, and outdated information loses trust.

The decision: marketing owns the content, with self-service publishing for university-wide announcements.

Results

Students made the app part of their everyday routine.

A 4-week beta with about 600 students, then full rollout.

88%adoption within two weeks
+40%daily active users
+65%weekly active users
84%timetable engagement
53 → 74Satisfaction (CSAT), out of 100
“Great app, easy to navigate. Love that I have access to my timetable on the go.”
— BPP student
What I took from it

How this project changed the way I think.

  • 01Start with the real problemResearch didn't tell us what features to build. It changed our understanding of what mobile was for.
  • 02Good strategy is knowing what not to buildStrong products come from deliberate trade-offs, not trying to deliver everything.
  • 03Great UX goes beyond the interfaceSometimes the biggest problem isn't the UI. It's ownership, process or technical capability.
The north star

The MVP solved today’s problem. The north star solves tomorrow’s.

A personalised hub that moves from information, to guidance, to action. I designed it for desktop and mobile, and prototyped both with Claude. It’s a direction-setting concept, not a shipped product.

What was getting in the way

The Hub felt fragmented, static and poorly prioritised. Students jumped between systems to check their timetable, pay fees or find support, and everyone saw the same content.

Underneath it all, we couldn’t reliably tell who a learner was once they’d logged in. No consistent signals for course, campus or study mode meant no real personalisation.

The old BPP Hub homepage: a welcome banner, a Wi-Fi notice, news cards and a block of support links
Before: the old Hub homepage
Wireframe of the new dashboard: a calm welcome, today’s upcoming classes and a payments summary, with design annotations
After: the dashboard wireframe
From a homepage with links to a dashboard that does the work.
The idea

A homepage with links → a dashboard that actively supports students

  • 01Surface what matters nowToday’s classes, what’s due, what’s next.
  • 02Reduce cognitive loadFewer decisions, fewer clicks.
  • 03Personalise as signals improveBuilt to adapt once identity data catches up.
  • 04Connect the journeysLearning, payments and support in one place.
  • 05Scale with componentsOne system across programmes and campuses.

Desktop: plan and get things done

On desktop, students are sitting down to deal with things. A sidebar keeps every area one click away, and the dashboard turns admin into actions: make a payment in three clear steps, report an absence with evidence, find answers on funding and mitigating circumstances, and pick up learning where you left off. Recommendations surface relevant short courses and CPD at the right moment.

Mobile

Mobile: in the moment

On mobile, students are on the move. The same priorities, rebuilt for quick moments: check in to class by scanning a QR code, see what’s next on a week-to-month timetable, act on notifications with a swipe, and get answers from Beep, the AI assistant. A weekly check-in gives the wellbeing team an early signal when someone’s struggling.

Try it: tap, scroll and swipe. It’s a working prototype.
Desktop and mobile

One system, two contexts

DesktopMobileNavigationSidebar, every area one click awayFive-tab bar for the essentialsMomentPlanning and adminOn campus, in between classesPaymentsFull payment flow and historyProgress at a glance, pay in two tapsAttendanceReport absences with evidenceQR check-inSupportFind answers hub and AI assistantBeep chat and notifications
Same components, same priorities, different jobs.

What would prove it

  • More daily visits to the Hub homepage
  • Higher payment completion from surfaced reminders
  • Fewer support queries as self-service improves
  • More students returning to in-progress learning

Next: validate with students across schools and campuses, work with engineering on identity signals, and phase delivery component by component.
← All workCase study · BPP Raise a Query

I made raising a query easier. Tickets went up.

The existing support journey made it difficult for students to know where to start. I redesigned the experience around the problem they were trying to solve, introducing clearer self-service and a chatbot-first model before escalation.

A hand holding a phone showing step 2 of Raise a Query: choosing a query type, with a 2 of 4 progress ring
Role
Led the design
Organisation
BPP
Platform
iOS and Android app
Worked with
Product, engineering, service design, student support
The problem

Students didn’t know where to start.

The old query form asked students to pick a school, a course, a query type and then a sub-category, all before they could say what was actually wrong. Most weren’t sure which category their question fitted, so they guessed or gave up partway through.

The help centre was meant to catch questions before they got that far. In practice it was a search box and a wall of links, sorted by how the university is set up rather than how students think about their problem. It was a lot to dig through, so most students didn’t.

Both routes expected students to work out where their question belonged before anyone could help them.

The old Student query form on mobile, with school, programme, query type and additional information dropdowns, beside the old help centre: a How can we help? search box above 24 links grouped by how the university is organised
The old query form, and a help centre with 24 links before you’d even scrolled
What I designed

Four steps, each one narrowing the question.

We reduced an open-ended support request into a small number of guided decisions, helping students describe what they needed without having to understand the structure behind the service.

  • 01School and programme
  • 02Query type
  • 03Sub-category
  • 04Details

Help built into the path

  • 01Help-centre nudgesRelevant answers as the query takes shape.
  • 02Duplicate detectionIf you’ve already asked, you see where it’s up to.
  • 03Confirmation promptsA quick check before anything is sent.
  • 04Deliberate light frictionJust enough to make self-service the easier first move.
  • 05In-app status notificationsNo more checking email to see what happened.
The guided query flow on phones: step 1, choosing school and programme with all four steps shown, and step 2, choosing a query type from category tiles
Prototype

Try the query flow.

The full journey, from choosing a category to rating the reply, with help suggested along the way.

Open in Figma ↗Open in Figma ↗
Then it launched

And tickets went up.

Not because the flow was worse. Students who’d given up on asking now felt confident enough to ask.

Illustration of 20 students with a question. Old form: 5 raised a query, 15 gave up without asking and never showed up in the numbers. New form: 12 felt confident enough to ask.
Decisions and trade-offs

So we changed the order.

Rather than asking students to choose a department or category first, we started with the problem they were trying to solve.

The chatbot wasn’t the destination. It was the first step towards the right answer: simpler questions were handled there, self-service came next, and a human support request remained the fallback when neither could help.

  1. 01 → FirstChatbot first
  2. 02 → ThenSelf-service next
  3. 03 → Only when neededRaise a Query
Three phones in order: My queries with Ask our chatbot as the main button; the BPP Assistant chat with suggested questions; and a pop-up saying most questions are answered instantly by our chatbot, with Start new chat and Continue to query form

“Ask our chatbot” became the main button. Raising a query dropped to a link underneath.

The assistant searches the help articles first, and only hands over to a team if that doesn’t work.

Tapping “Raise a query” gets one quick nudge. The form is still there if they need it.

Prompting the chatbot before the query form, then removing the form once the chatbot was resolving most queries.
Results

We tested the new order.

Ticket volume initially rose after the query journey got easier
Support load fell after the move to a chatbot-first model
A/B testing confirmed the chatbot resolved most queries before they needed a person

Every query also told us something. The patterns fed into product priorities, help content and chatbot training.

What I took from it

In support journeys, removing friction completely can work against you.

The new journey did what it was designed to do: asking for help got easier. But support measured success in tickets, and by that measure we’d made things worse. Both were true. Some of the friction I’d removed had been doing a job, filtering out questions the help centre could already answer.

The fix wasn’t to make asking harder again. It was to change the order: help first, a person only when needed.

Now, before I remove any friction, I ask two questions. What is this step doing for the service? And who’s measuring success differently from me?

A student with a backpack walking through the glass doors of a BPP study centre
{{ dsCur.alt }}
{{ dsLabel }}
← All workEarlier work · 2019–20 · TrackActive Me

Rehab only works if people do the exercises. I designed for that.

TrackActive Me helps people manage muscle, joint and back pain, and is used by insurers, employers and the NHS. I worked directly with the founders and development team, owning the product experience from early concepts through to launch.

The TrackActive Me app on a phone, showing current programmes, with a finger tapping New program in front of the brand mark
Role
UI/UX Designer (contract)
Company
TrackActive Me, a health-tech startup
Platform
iOS, Android and desktop
Worked with
The founders (a technology entrepreneur, and a physiotherapist who led on health) and the development team
The context

Physio in your pocket, with clinical standards behind it.

TrackActive Me is a registered medical device. Its chat-based assessments, diagnoses and exercise programmes are approved by health professionals and a university clinical governance team. When someone needs more than exercise, it refers them to their GP or a physiotherapist.

That meant the design had to be clear and trustworthy, and it had to work within clinically approved content.

The TrackActive Me marketing site: the hero, and the core services, Assess and Triage, and Rehabilitation
The marketing site, setting out the core services.
My role

What was mine.

  • 01Brand and iconsThe brand style, which I helped develop, and a bespoke icon set I designed
  • 02The end-to-end experienceFrom the chat-led assessment through to a personalised exercise programme
  • 03The design systemThe one the developers built from, across mobile and desktop
  • 04The desktop experienceFor business subscriptions, once further funding came in
  • 05The engagement roadmapReminders and rewards to keep people going past week three
The problem

A recovery plan is only useful if people stick to it.

Programmes asked people to exercise daily, or several times a week. But motivation drops fast, and when people stop, they don’t recover.

Research

The challenge wasn’t the first session. It was the third week.

I looked at competitors and spoke to users. The pattern was clear: people lose interest quickly.

Early discovery and user flows

Early concepts focused on reducing cognitive load and validating information hierarchy before visual design.

Wireframe user flow for signing up and logging in: splash screen, landing pages, sign-up form, access code, notifications, chatbot, Apple Health, login, forgotten password and home
Sign-up and login flow. Click to open full size.
Wireframe programme flow after first sign-up: programme with exercises, exercise video, rating how it felt and pain level, logging progress, finishing the programme, setting reminders and home
Programme flow, after first sign-up. Click to open full size.
{{ lbAlt }}
{{ lbCap }}{{ lbCount }}
What shipped

What shipped.

The redesigned app went live on iOS and Android: a chat-led assessment, personalised programmes, and a brand designed to bring people back.

The redesigned app across a spread of phones: programmes, the home screen, an exercise with video, helpful advice, the chat check-in and pain feedback
The redesigned app.

01A brand people would want to come back to.

I helped develop the brand style for the app: an optimistic colour palette, playful illustration and a warm, conversational tone. I also designed a bespoke icon set for the programmes and recovery areas.

The TrackActive Me brand markBranding
Logo, iconography and illustration.

02Design system

I built the design system the developers worked from: colour, type, layout, components and a bespoke icon set, used across iOS, Android and desktop.

Colour and type
Layout
Buttons and selection
Cards
Documented from the original Sketch library and the shipped app, with small refinements. Click to view full size.
The assessment

From ‘where does it hurt?’ to a programme.

A chat-led assessment, built within clinically approved content, that leads to a personalised exercise programme.

Red-flag symptoms, like unusual leg weakness, route people to a health professional rather than to exercises.

Questions used a body chart and photos, so people could point to where it hurt rather than having to describe it.

Choose where it hurts, answer a few questions, then check your movement with a guided video.

Testing
“Fantastic suite of exercises and programmes for the beginner with access to little or no equipment. Helpful videos and explanations to get the techniques correct. Nice graphics too.”
— Google Play review

From programme to check-in: rate how an exercise felt, check in on progress, and if pain is getting worse, find a physio nearby.

Designing for adherence

Getting people back for week three.

Adherence wasn’t just a reminders problem. I designed it into the assessment and the programme, and these features shipped in the live app.

  • 01Reminders built on how habits formPositive reinforcement, encouraging language, and illustrated reminder cards
  • 02A rewards schemeTo keep people consistent through their recovery
  • 03Ratings after every exerciseA quick tap on how it felt, so the programme could adjust
  • 04Check-ins that know their limitsIf someone’s pain was going up, the app suggested a physio and helped them book one nearby, rather than pushing more exercises
What happened next

Launched, then grew.

TrackActive Me launched on the App Store and Google Play in March 2020, and it’s still live today. Further funding meant we could build a desktop version for business subscriptions, which I designed.

The desktop assessment: choosing what you need help with, marking where it hurts on a body map, rating pain on a scale, and exercise videos
The desktop version for business subscriptions.
← All workEarlier work · 2021 · William Russell

A health claim from abroad, one question at a time.

Claiming on health insurance abroad means foreign providers, foreign currencies and paperwork, often while you're unwell. I turned a complicated claims and pre-authorisation process into one guided journey.

A hand holding a phone showing the William Russell app home screen: Make a claim, Pre-authorisation, Policy information and Hospital network
Role
UI/UX Designer (contract)
Client
William Russell, international health insurance
Platform
iOS and Android
Scope
Research, UX, UI, iconography, design system
The problem

A stressful task, in an unfamiliar system.

Processing an insurance claim is stressful, especially when you're abroad and unwell. The existing process had too many steps and unclear guidance, and it asked expats to deal with foreign providers, currencies and paperwork.

  • Too many stepsLong, form-heavy submissions with no sense of progress
  • Unclear guidancePeople weren't sure which documents were needed
  • Unfamiliar systemsForeign providers and currencies, often under stress
A woman sitting at a laptop at home, resting her chin on her hand
What I found

People didn't need fewer questions. They needed one at a time.

I spoke to expat customers about the moments a claim became stressful, and mapped every step of the existing claims and pre-authorisation process.

  • User interviewsConversations with expats about the moments a claim becomes stressful, and what reassurance looks like.
  • Workflow auditMapped every step of the existing process to expose redundant questions.
  • Drop-offPeople abandoned claims because the form was long and complicated, and it didn't save their progress. Stop halfway, and you had to start again.

What that meant for the design: the claim couldn't get much shorter, but it could feel shorter, and it could wait for you. One decision per screen, clear progress, saved as you go, and help at the moments people got stuck.

The decisions

Five principles shaped the journey.

  • One question per screenFocused steps keep the load low.
  • Say what's needed upfrontA checklist before starting avoids surprises midway.
  • Save as you goProgress is kept, so a claim can be finished later.
  • Guide the evidenceVisual examples show exactly how to photograph a document.
  • Confirm everythingA clear summary closes the loop and builds trust.
The checklist, before the first question.
The invoice scanner: a sample invoice framed by green corner guides, with the prompt Point the scanner at your document, and Scan and Upload options
Photo guidance, right where it’s needed.
Iconography and visual language

A bespoke icon set, designed to reassure.

A confident green carries the brand, while warm pinks bring empathy to a category that often feels clinical. I designed a bespoke icon set, with spot illustrations marking key moments like upload and submission.

The icon set, 21 icons. Each one has its own small motion.

Illustrations

Upload: a document with an upload arrow between clouds
Submission: a paper plane through the clouds
Login: an unlocked padlock
Approval: a document with a tick

Spot illustrations mark key moments, upload, submission, login and approval, so every milestone feels acknowledged.

Colour

#019875Primary green
75%
50%
10%
Dark green#005C42
Pink#E8538A
Light pink#FF97B8
Red#F60741

Green drives action and progress, pink highlights files and secondary detail, and red is reserved for errors.

Design system

Built to scale beyond launch.

Standardised components, typography and spacing rules, documented with states, so the development team could hand off efficiently and add features consistently.

TypographyTwo weights · 6-step scale
Display · 32/38We're here for you.
Title · 24/30Upload successful!
Question · 18/26Please select your admission type
Button · 15/20Save & continue
Body · 14/22Our team are available to help with any queries, Monday – Friday, 6am – 6pm UK office hours.
Buttons
Save & continueSave & continue+ Add more attachments
Primary · disabled · text
Selection
DentalMaternityRadiology
Emergency outpatientDay case
Filter chip · option pill
Inputs and progress
Patient nameTim Brown
Diagnosis / Symptoms
File upload
PDF
02.28.2021_invoice.pdf646kb
✓ Correct
✕ Incorrect
Service tiles
Make a claim
Pre-authorisation
Elevation level 1 · 6px radius
Spacing
4
8
16
24
32
48
64
8pt base grid · 16px screen margins
A collage of app screens: home, the claim steps, document upload, upload confirmation, pre-authorisation details, the wallet and the claim checklist
Screens from across the app.
What happened next

William Russell's first mobile app.

  • Claims and pre-authorisation in one guided flow
  • Policy, cover and wallet in the pocket
  • A design system the team could build on
What I took from it

When people are stressed, every screen should answer one question.

Stress narrows what people can take in. The claim didn't need to be simpler than it was: it needed to ask for less at once, and never punish someone for stopping halfway. I still design high-stakes journeys that way: one decision per screen, progress you can see, and nothing lost if life gets in the way.
← All work{{ c.kicker }}

{{ c.title }}

{{ c.standfirst }}

The BPP staff portal dashboard on a laptop: today's classes and the week's classes
{{ m.k }}
{{ m.v }}
{{ tc.c1.kicker }}

{{ tc.c1.title }}

{{ para }}

{{ tc.c2.kicker }}

{{ tc.c2.title }}

{{ para }}

  • {{ it.idx }}{{ it.t }}{{ it.d }}
{{ tc.c3.kicker }}

{{ tc.c3.title }}

{{ para }}
{{ tc.c3.aside.cap }}
{{ tc.c3.aside.cap }}
  1. {{ fl.idx }} → {{ fl.k }}{{ fl.v }}
{{ tc.c3.aside.cap }}
{{ tc.c3.aside.cap }}
{{ tc.c4.kicker }}

{{ tc.c4.title }}

Seven steps, from a tutor’s first visit to a submitted register.

STEP {{ walkNum }} / {{ walkTotal }}

{{ walkCur.t }}

{{ walkCur.d }}

Swipe the screen to change step
{{ walkCur.alt }}
{{ walkCur.alt }}
STEP {{ walkNum }} / {{ walkTotal }}{{ walkCur.t }}{{ walkCur.d }}
{{ tc.c5.kicker }}

{{ tc.c5.title }}

{{ para }}

  • {{ it.idx }}{{ it.t }}{{ it.d }}
{{ tc.c6.kicker }}

{{ tc.c6.title }}

{{ para }}
{{ tc.c6.aside.cap }}
{{ tc.c6.aside.cap }}
{{ tc.c6.aside.cap }}
{{ tc.c6.aside.cap }}
{{ tc.c7.kicker }}

{{ tc.c7.title }}

{{ para }}

{{ sx.n }}{{ sx.label }}
Prototype

See it in action

Two short walkthroughs, one for each side of the portal. Both are built from my Figma screens, and the attendance figures update live as changes are made.

Tutor portalFrom the dashboard to a submitted register. The tutor marks attendance, overrides a QR check-in with a reason, checks a student’s profile and submits. The summary bar keeps count the whole way through.
Admin portalAn admin searches for a class by tutor and date, selects two students and corrects their attendance in bulk. Fields go red until a reason is picked, and the summary updates as soon as the change is made.

Prefer to click through it yourself? Open in Figma →

{{ tc.c8.kicker }}

{{ tc.c8.title }}

{{ para }}

“{{ tc.c8.pull.text }}”
— {{ tc.c8.pull.by }}