← All projects
CASE STUDY 04 / Child development · UX/UI

Learning made playful.
Care kept connected.

Bright Spark — a preschool learning and monitoring experience for children, parents and teachers.

Project
Bright Spark
My role
UX/UI design & evaluation
Context
Academic research · SLIIT
Final report
June 2024
BRIGHT SPARK / CHILD DEVELOPMENT
Small steps.
Bright futures.
grow with confidence
PROJECT AT A GLANCE

Designing around three different needs.

Bright Spark is an academic project exploring an integrated preschool monitoring and learning experience. It brings together children’s activities, development information and parent-teacher communication. My focus was making the experience approachable for young children while keeping everyday tasks clear for adults.

MY CONTRIBUTION

Research, design strategy, user flows, information architecture, wireframes, visual design, prototyping and usability evaluation.

PROJECT CONTEXT

BSc (Hons) IT · Interactive Media · SLIIT.
UX/UI contribution within a wider research system.

02 / THE CHALLENGE

One system. Three perspectives.

A learning experience that feels obvious to an adult can still be difficult for a young child. The research identified a need for interfaces tailored to preschoolers’ cognitive, emotional and physical abilities, alongside useful information and communication for adults.

01

Children

Recognisable visual cues, manageable interactions and encouraging feedback that make activities approachable.

02

Parents

A clear view of their child’s activities and progress, with a simple route to communicate with teachers.

03

Teachers

Ways to record observations and activities, review child information and share updates with parents.

04

Design objective

Balance engagement with usability across these audiences, rather than treating every user as the same.

How might we connect preschool learning and care through an age-appropriate interface?
03 / RESEARCH

Start with people and context.

The discovery survey collected 55 adult responses between 23 and 28 August 2023. It captured expectations about digital learning, monitoring, navigation and visual design. The final report also describes interviews, observations and child-development research.

55

Adult survey responses

22 parents, 20 teachers, 12 guardians and 1 parent/teacher.

52 / 55

Monitoring matters

37 rated monitoring/customisation very important; 15 somewhat important.

36 / 55

Age-appropriate design

Selected this when choosing digital apps or games for their child.

52 / 55

Readable type matters

33 rated font choice very important; 19 important.

Learning from a preschool teacher · A teacher at Lyceum International School in Ratnapura helped me understand what children enjoy, how they behave and where they need support. The teacher also helped arrange a group to try the prototype.

What this meant for the design

The research helped me focus on four ways to make Bright Spark easier for children to use.

01

Easy to understand

Keep instructions short and put buttons in familiar places, so children can follow each task without remembering lots of steps.

02

Friendly and encouraging

Use welcoming characters and kind feedback, so children feel comfortable trying again when they make a mistake.

03

Easy for small hands

Use large buttons with space between them and simple taps, so children can select what they want more easily.

04

Try it, learn and improve

Understand what users need, sketch ideas, build a prototype and let people try it. Use their feedback to improve the design.

04 / SYNTHESIS

Turn research into priorities.

Personas, empathy maps and journey maps framed different user needs. The journey considered onboarding, the dashboard and child profile, then monitoring and communication. This connected learning with the information adults need to support it.

01

Make the next step visible

Use clear hierarchy and consistent navigation so people can recognise where they are and what they can do next.

02

Make progress easy to find

Group child information, activities and reports around the child.

03

Keep learning approachable

Use illustrations, colour and playful elements purposefully while keeping interactions understandable.

04

Support shared care

Connect observations and progress information with communication between parents and teachers.

From survey evidence to design priorities

01

Monitoring → child-centred information

52 of 55 respondents rated monitoring/customisation as important. Keep child profiles, activities and progress reporting together so adults can find the information they need.

02

Age fit → appropriate activities

36 of 55 selected age-appropriate design when choosing apps. Use developmental abilities to guide activity presentation and interaction complexity.

03

Clarity → visible navigation

34 of 55 selected simple, clear navigation as part of a positive preschool experience. Keep routes consistent and make primary actions understandable.

04

Typography → readable hierarchy

52 of 55 rated font choice important or very important. Give labels and headings a clear hierarchy rather than relying on playful visuals alone.

These findings support the design priorities; they do not prove the interface resolved every need. Competitor exploration covered educational experiences and communication tools, with an opportunity to bring both together in a preschool-focused product.

05 / STRUCTURE & PROTOTYPING

From ideas to a usable flow.

I explored solutions through brainstorming and early wireframes, then developed detailed mockups and interactive prototypes. Successive design and implementation phases allowed layout and flow to evolve before treating the interface as final.

Hand-drawn Bright Spark parent and teacher wireframes showing onboarding, child profiles, classrooms, attendance and reports

The experience grouped account access, child information, classroom management, activities, reports and games. Parent-teacher communication remained part of the wider product requirements.

06 / VISUAL DESIGN

Playful, with a clear purpose.

Bright colours, illustrated characters and familiar imagery were intended to make learning inviting. The survey reinforced the need to balance appearance with clarity: 35 of 55 selected visually appealing design and 34 selected simple navigation as part of a positive experience.

01

Role-aware entry

Introduce parent and teacher roles so the experience can respond to different responsibilities.

02

Consistent foundations

Repeat navigation, controls and spacing to build familiarity across screens.

07 / USABILITY TESTING & ITERATION

Compare. Observe. Refine.

I tested prototypes with parents, teachers and children to explore how they used the interface. A/B testing compared design alternatives, while Useberry heat maps showed where people tapped. Surveys and follow-up interviews added feedback to guide the next iteration.

Compare the early designs

Version 01 · These screens were used in A/B testing to compare interface alternatives and inform the next iteration.

Try the learning game

These hands-on sessions explored the Song Tales prototype on a phone, including its Challenge, Practice and Start controls.

See where people tapped

The Useberry heat map shows tap locations on the chat, child-profile and account-entry screens.

Useberry heat-map artefact showing tap locations on Bright Spark chat, child profile and account-entry screens

What changed in the interface

01

Labelled child-profile actions

The case-study board shows an early icon-only action row, followed by labelled Chat, Call and Activities buttons. Adding text makes each action explicit instead of requiring users to interpret icons.

02

Consistent section alignment

Class Rooms and Staff Members headings move from centred to left-aligned layouts. This creates a shared reading edge with the content below.

The survey contains 55 adult responses. The prototype-test participant count, variant-level completion rates and effect sizes are not reported, so a statistically validated A/B winner cannot be established from these sources.
08 / THE SOLUTION

Connect learning with oversight.

The design connects two complementary experiences: adults can manage child information and communication, while learning activities and games provide the child-facing experience. The parent home in the UI file groups My Kids and Teachers; persistent Home, Chat, Games and Profile navigation connects the main destinations.

01

Parents: review and connect

Start with a child profile, review activities and reports, then contact the teacher through the communication flows.

02

Teachers: manage and share

Work with classrooms, attendance, child information and activity uploads. The UI file also includes reports, chat and call screens.

01

Design deliverables

Research artefacts, user flows, wireframes, visual mockups, interactive prototypes and iterative interface versions.

02

Implementation context

The report documents Flutter development, Firebase and GitLab. These demonstrate project progress rather than a production launch.

09 / FIGMA UI DESIGNS

A closer look at the interface.

Original screens from the Bright Spark UI file. Select a screen to view the full-size image, or explore the interactive prototype below.

10 / DESIGN SYSTEM

A familiar language for learning and oversight.

This overview organises the patterns already visible in Bright Spark’s interfaces. It describes the existing design rather than claiming a separate component-library audit.

COLOUR VARIABLES

Semantic palette examples

Action / Purple
Heading / Deep indigo
Brand / Blue
Surface / White

Visual samples from the existing teacher interface; these are not a documented Figma token collection.

TYPOGRAPHY VARIABLES

Type styles

Display / BrandExpressive lettering introduces Bright Spark and its playful identity.
Heading / SectionBold headings separate classroom, staff and activity content.
Body / DescriptionReadable supporting text explains tasks and learning content.
Label / ActionShort labels identify buttons, navigation and selections.
Caption / MetadataSupporting labels describe class names and contextual information.
CORE COMPONENTS

Reusable UI building blocks

Action button

Repeat clear labels and rounded controls for creating and viewing content.

Classroom card

Group the classroom illustration, name and action in one familiar pattern.

Bottom navigation

Home, Chat, Games and Profile provide consistent entry points.

Profile & report

Reusable information groups connect child details, attendance and progress.

Open design system in Figma

11 / OUTCOMES & REFLECTION

Design for understanding.

Bright Spark produced a child-focused interface concept, prototypes and implementation-stage screens informed by research and stakeholder participation. The strongest supported outcome is the connection between developmental considerations and concrete interface exploration.

01

Design for ability, not just age

Cognitive, emotional and physical considerations need to shape interactions as well as illustration and colour.

02

Treat stakeholders as different users

Parents, teachers and children share a goal, but their tasks require different priorities.

What I would validate next

Run a supervised usability study with clearly defined tasks for each audience. Record completion, time, errors and assistance needed; compare controlled variants and capture qualitative feedback. Evaluate comprehension, accessibility, privacy and report clarity before making wider product claims.

The key lesson · A child-friendly interface needs evidence of understanding, not only an engaging appearance.
NEXT PROJECTNVW