Xplor Home
Connecting parents with their children's education.
UX Design
UI Design
Motion Design
Xplor Care was the legacy app that was struggling under increased scaling demands that came with 150'000+ active parent users. A complete re-design and new product was necessary to continue growing: Xplor Home.
I was the first designer hired and #3 on the Product team, working simultaneously across multiple products on the three touch points of the business: parents, educators and child care centre managers.
During the years at Xplor, I’ve also led the creation of the first design system at Xplor, collaborating with teams of web and mobile developers to evolve the system.
🔒
Password required for full case study. Please contact me if you have any questions 🙏.
Show Full Case StudyUI Design Decisions
Accessibility Considerations
Design System and Dark Mode
UX Writing for Notifications
Reflections
App On-boarding
QR Code Tutorial
Success Delights
Methods & Insights
Legacy App Review
Information Architecture
Workshops and Ideation
Prototype User Testing
"
How might we help parents to be more involved in their child’s education and build relationships with their Educators?
Problem Statement
Engaging parents with learning content
Observations are spontaneous learning moments that Educators capture and document.
I also wanted to engage parents more in learning outcomes specifically as they are provided from a government educational framework. To make this section more engaging, I illustrated badges which match the outcome theme and provided context if this was the first time the child had achieved them.
Child's learning timeline
Keeping a balance between the large photographs and videos that are captured by Educators which engage parents. The description text is truncated after only two lines to encourage the parent to press into the card to read more.
Dark Mode within the Design System
Flexible Component Driven UI
Prior to this project commencing I had been collaborating closely with other developers on Xplor's nascent design system: Stardust. One of the foundational elements of this system was support for dark/light mode across all components. It was also a design decision to use native components where possible to reduce developer effort.
In anticipation for the native dark mode support in iOS 13 and Android 10 I advocated for this feature to support parents with the flexibility to choose their own preferred UI style.
While it was completed on Android, it was postponed for a future road map update.
Ensuring accessibility with colour choices
While it was challenging to use Xplor's branding orange as an accent colour for light mode, I chose a colour variant within WCAG 2.0 guidelines that would have sufficient contrast in either light or dark mode.
Using these guidelines ensures that parent's with varying visual abilities, such as colour blindness are able to use the app more easily.
"
What my partner and I love about Xplor is how transparent it makes our daughter's care. Love how we can check: what she eats, how long she naps for, and of course the learning posts!
- Parent Review
Highlighting the essentials
After conducting user concept testing, most parent participants specifically mentioned that they liked to see a daily summary of their child health. This led to the dashboard style design with a running timeline at the top.
This timeline displays the events as they occur, in addition to acting as a date controller. Using swipe interactions to move the dates backwards and forwards.
Visualising Health Data for easier comprehension
In order to better contextualise the events on a wider timescale, data visualisation in the form of bar charts and a timeline was added.
This allowed parents to better compare events such as sleep where they could now see how much their child was sleeping on average by week.
Finance Design Iterations
Distilling complex financial statements into the key information parents want to know.
Reducing Financial Anxiety
The Finance card design which includes the government subsidy upfront and amount due, along with payment date. Additionally, if a parent needed to perform additional actions on the government website, a banner would display advising them of what to do.
Aiming to reduce support tickets, the Help & Support section encourages parents to contact the child care centre or government agency if they have questions about their finances.
Notifications UX Writing
Xplor Care
This frames the content as being created by ‘Xplor’ which detracts from the work being conducted by Educators.
Xplor Home
Refocus the parent credit for the event back to the Educators who actually performed it.
Increasing parent and educator trust
As discovered in research, parents found it difficult to build rapport with Educators. The notifications are the initial communication which allows a parent to see the names of the Educators that are closely caring for their child.
This helps parents when they visit the centre to hold conversations around any particular notifications they received as a conversation starter with that Educator.
In total there are 36 different types of notifications that can be sent or configured by parents if they want to receive them.
Stopping notification overload
I advocated strongly for the notifications permission feature in the initial release which allows parents to customise in detail what notifications they receive. Some parents are reassured by the consistent health notifications - while others prefer only to receive the bare essentials.
Attendance Feature Design
Making a compulsory task for parents, as fast and frictionless as possible.
Secure child sign in
It is a legal requirement for parents to digitally sign their children in and out when they are present at a centre. The Xplor Care app used hardware bluetooth beacons to validate that the parents were at the centre which were unreliable and expensive to operate.
Collaborating with our product managers and development tech leads we ideated different solutions for how a centre administrator could validate if a parent was physically at a centre when signing into a booking.
Reducing privacy anxieties
One alternative was to use device location which was discarded due to privacy concerns from parents who wanted to know why Xplor was ‘tracking them’.
The solution chosen was scanning a QR code which is displayed on a screen or paper at the front reception of a child care centre.
As the workflow to sign children in/out of care had changed significantly, I designed an onboarding animation of this process in order to educate parents and reduce potential support tickets.
Motion Graphics
Delighting parents with brand relevant illustrations and on-boarding animations using After Effects and Lottie.
Reusable Success Confirmation
This small animation is used once a child is successfully signed in providing delight.
App Onboarding
Providing feature information for those who have just downloaded the app, using expressive animation that is aligned with the space, friendly branding of Xplor.
"
You worry about the care of your child when starting a new centre until you get to know the teachers.
🔒
Password required for full case study. Please contact me if you have any questions 🙏.
Show Full Case StudyThe Team
Mobile Tech Lead
Lauren Grimes
Mobile Engineer
Chris Mabotuwana
Pradnya Dikle
Johnny Lin
Joshua Lareta
CEO (Founder)
Mark Woodland
Head of Product
Harry Vamvakas
Product Manager
Will Athanasakis
Product Designer
Albert Brunda
