Evolving parent app theming
I designed the parent app theming experience end to end, giving schools control over their branding while ensuring a consistent and accessible experience for parents.
The gist of it:
The problem
Schools had limited control over their branding in the parent app, leading to an inconsistent experience that reduced recognition and trust for parents.
The solution
I designed a theming system built around three things schools actually needed, a banner, a logo, and a colour, giving them a clear identity without opening the door to visual chaos.
Why it mattered
This improved trust and recognition for parents, gave schools a scalable and accessible way to reflect their identity, and reduced support requests by clarifying that communication and branding came from schools rather than ParentPay.
My role in this project:
I designed the School Gateway parent app theming experience end to end, working closely with schools, internal stakeholders, and developers to balance flexibility with consistency. The goal was to allow schools to apply their branding without compromising usability or accessibility for parents.
As part of a later platform-wide update, I brought the theming setup in line with the new ParentPay Design System and WCAG 2.2 standards, focusing on clarity and maintainability across school-facing workflows. The final designs were implemented and released, with post-launch validation confirming the update maintained the trust and clarity the original feature had built.
//the_full_story
Built once, needed twice
The parent app theming work evolved across two distinct phases, driven by different needs at different points in the product’s lifecycle.
Phase 1: recognition & trust
Schools needed a clear way to express their identity within the parent app so parents could easily recognise when communications were coming from their child’s school rather than from Schoolcomms. My challenge was to design a theming approach that allowed schools to apply their branding confidently, while preserving clarity, usability, and a familiar experience for parents.
Phase 2: alignment & maintainability
As part of wider platform consolidation, the existing theming setup needed to be modernised to align with the new design system and unify the experience across the product suite. This phase was primarily driven by business and technical requirements, with a focus on improving consistency, maintainability, and accessibility across school-facing and parent-facing surfaces, without disrupting established workflows.
Across both phases, the challenge was to evolve the theming experience carefully, balancing flexibility for schools with consistency for parents, and making incremental improvements without over-engineering or unnecessary change.
Below:
Timeline overview showing the original delivery and later system-led evolution of the feature.
Below:
Timeline overview showing the original delivery and later system-led evolution of the feature.
//phase1
2017: Designing the theming feature from scratch
Where trust was breaking down
Schools had no way to visually distinguish their communications within the parent app. As a result, parents often struggled to recognise whether messages were coming from the school or from School Gateway itself, weakening trust and clarity in school-to-parent communication.
Talking to the people who'd actually use it
To understand how school branding should work in practice, I worked closely with schools and internal teams to gather requirements and constraints. This included interviews with schools to understand their perspective, internal workshops with stakeholders to align on technical and business considerations, and a collaborative ideation session with teams such as Sales, Support and Product to define how school identity should appear in the app.
Finding it a home
Alongside this, I audited the existing Schoolcomms setup to determine where branding configuration would best live within the system, then defined the user flows and information architecture to support a clear setup-to-app experience. Early sketches and low-fidelity wireframes were used to explore options and discuss feasibility with developers.
Below:
High-level information architecture showing where branding configuration lives within Schoolcomms.
Working inside the lines
This work was intentionally scoped to a limited surface. Existing pages and navigation could not be restructured, and the solution needed to be delivered quickly within established system patterns. The School Gateway area already existed within the dashboard alongside School details and Useful links, making it the most logical and least disruptive place to introduce branding configuration.
Below:
High-level user flow showing how schools configure and preview branding before publishing to the parent app.
The branding setup provides an in-context preview of the School Gateway parent app as schools upload a banner, logo, and select a colour. Changes are reflected immediately in the preview, making it clear how the branding will appear before it is published.
Once published, the selected branding is applied to the parent app automatically. Parents see the updated school identity the next time they open the app, without requiring any additional configuration, app update or follow-up from the school.
Key considerations in the flow:
Image uploads use the device’s default file picker, reducing friction and cognitive load.
File type and size validation happens immediately, catching mistakes before they become a support ticket.
Branding stays reversible until publication, so schools can try things out without worrying they've broken something.
The setup mirrors the outcome: a few small inputs, an immediately visible result.
From wireframe to BETT stage
I progressed the work into high-fidelity screens and collaborated closely with developers throughout implementation to ensure the experience matched the intended behaviour and accessibility requirements. All designs followed the existing design system and established UI patterns, working within its constraints rather than redefining visual language.
The feature was presented at BETT ’18, where it was well received by schools, and was released to customers shortly after.
Done. For now.
The goal of the final design was to give schools a simple and consistent way to apply their identity within the parent app, while ensuring the experience remained clear and recognisable for parents. To achieve this, the solution focused on a small set of deliberate design decisions.
Limited branding to banner, logo, and colour
Branding was intentionally limited to a banner, logo, and colour. This struck a balance between giving schools a clear visual identity and maintaining a clean, accessible experience for parents, avoiding unnecessary complexity or visual noise.
Introduced an in-context live preview
A real-time preview was used to show how branding would appear in the parent app before publication. This reduced uncertainty, minimised errors, and allowed schools to make confident changes without risk.
Designed for recognition and trust, not decoration
Branding was applied consistently and sparingly to anchor communications to the school’s identity. The goal was immediate recognition rather than visual customisation, reinforcing credibility without distracting from content or core functionality.
Below:
2017 final school-facing and parent-facing theming screens
//phase2
2025: Evolving the feature within the ParentPay ecosystem
Background
This phase wasn’t driven by user dissatisfaction, but by business and system integration needs. Following Schoolcomms acquisition by ParentPay, all modules needed to adopt the new Design System to ensure visual and functional consistency across the MIS (Management Information Systems) ecosystem. This created an opportunity to modernise the theming setup, address accessibility gaps, and validate the feature’s continued value for schools and parents.
What was done and changed:
Still the right idea
Conducted lightweight validation with schools to confirm continued satisfaction.
Rebuilt for the new system
Rebuilt the school-facing upload flow using the ParentPay Design System.
Kept what worked
Retained the proven parent app branding model, refreshing visuals without functional changes.
Closed the accessibility gap
Brought the feature up to WCAG 2.2 compliance.
Below:
2025 updated school and parent facing theming screens
8 years later, back for round 2
The goal of the Phase 2 redesign was to modernise the branding experience within the ParentPay ecosystem while preserving the familiarity and effectiveness of the original model. The work focused on improving structure, accessibility, and visual consistency across both the school-facing setup and the parent app, without introducing unnecessary behavioural change.
Same colours, properly accessible now
Reworked the colour system so every school's branding choice still passes contrast requirements, closing a gap the original version never accounted for.
Keyboard navigation, not just visual polish
Rebuilt the setup flow so it works properly with keyboard and screen reader navigation, not just mouse and touch.
Validated before shipping, not after
Ran lightweight testing with schools ahead of release, rather than waiting to find out if the update landed.
Deciding what to touch
Rather than redesigning the feature completely, the work focused on careful, system-led evolution. As part of the wider Design System adoption, the School Gateway section was restructured and rebuilt, resulting in a clearer and more consistent information architecture.
Within this updated structure, I revisited the original insights, audited the end-to-end experience across the MIS and parent app, and worked closely with product, support, and development teams to identify where change was necessary versus where familiarity should be preserved.
Below:
information architecture after the 2025 restructure, with mobile app branding now grouped under its own section.
Lightweight validation with schools confirmed that the existing parent-facing branding model was still effective. This allowed the redesign to remain incremental, improving clarity, accessibility, and visual consistency without disrupting established workflows. Opportunities for future enhancement were captured but deliberately kept out of scope to maintain focus.
Below:
2017 final school-facing and parent-facing theming screens
What actually shipped
I worked closely with developers to implement the updated MIS screens using the new ParentPay Design System, paying particular attention to accessibility, colour contrast, and keyboard navigation. Given the feature’s widespread adoption, delivery focused on minimising disruption and preserving familiar workflows while improving clarity and maintainability.
The updated experience was released without impacting how schools or parents used the feature, and post-launch validation confirmed continued satisfaction, reinforcing that the incremental approach had been the right one.
//the_end
Small feature, long life
Small changes, big impact
This project reminded me how powerful simple decisions can be. Just a logo, a banner, and a colour was enough to change how parents perceived the whole app, and genuinely satisfying to watch happen.
A quiet success worth protecting
As ParentPay merges its parent apps into one experience, schools and support teams keep flagging this feature as one worth keeping. It rarely generates parent-facing support queries, since parents know they're dealing with the school, not ParentPay. Qualitative, not metric-led, but a consistent signal all the same.
Designing for longevity, not just launch
Revisiting this eight years on was reassuring, the core model still held up. It also showed exactly where accessibility and system alignment needed to catch up. Good foundations adapt. They don't just work in the moment they launch.
© 2026 DJoão
Designed in Figma • Built in Framer
Online in Glasgow
