# Bright Spark — Preschool Monitoring and Recommendations > A preschool monitoring and recommendations application exploring communication and learning progress for parents and teachers. Canonical case study: https://uditha.design/projects/brightspark.html Created by Uditha Prabhasha Dharmarathna. This page summarises the published case study; claims about testing and outcomes are limited to those stated in the original. 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 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. #### Adult survey responses **55** 22 parents, 20 teachers, 12 guardians and 1 parent/teacher. #### Monitoring matters **52 / 55** 37 rated monitoring/customisation very important; 15 somewhat important. #### Age-appropriate design **36 / 55** Selected this when choosing digital apps or games for their child. #### Readable type matters **52 / 55** 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](https://uditha.design/assets/brightspark/wireframes.webp) 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. [![Song Tales start screen with illustrated school and characters](https://uditha.design/assets/brightspark/song-tales-1.webp)](https://uditha.design/assets/brightspark/song-tales-1.webp) [![Song Tales selection screen with three cards and star indicators](https://uditha.design/assets/brightspark/song-tales-2.webp)](https://uditha.design/assets/brightspark/song-tales-2.webp) [![Animal selection game asking the player to select a monkey](https://uditha.design/assets/brightspark/song-tales-3.webp)](https://uditha.design/assets/brightspark/song-tales-3.webp) [![Play confirmation dialog with Yes and No buttons](https://uditha.design/assets/brightspark/song-tales-4.webp)](https://uditha.design/assets/brightspark/song-tales-4.webp) 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 [![Bright Spark sign in interface concept](https://uditha.design/assets/brightspark/testing-sign-in.webp)](https://uditha.design/assets/brightspark/testing-sign-in.webp) Sign in [![Bright Spark sign up interface concept](https://uditha.design/assets/brightspark/testing-sign-up.webp)](https://uditha.design/assets/brightspark/testing-sign-up.webp) Sign up [![Bright Spark games and activities interface concept](https://uditha.design/assets/brightspark/testing-games-activities.webp)](https://uditha.design/assets/brightspark/testing-games-activities.webp) Games and activities **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. [![Close-up of the Song Tales prototype being used on a phone](https://uditha.design/assets/brightspark/usability-session-1.webp)](https://uditha.design/assets/brightspark/usability-session-1.webp) [![Hands holding a phone with the Song Tales prototype](https://uditha.design/assets/brightspark/usability-session-2.webp)](https://uditha.design/assets/brightspark/usability-session-2.webp) [![Song Tales prototype being used on a phone over a patterned surface](https://uditha.design/assets/brightspark/usability-session-3.webp)](https://uditha.design/assets/brightspark/usability-session-3.webp) [![Hands interacting with the Song Tales prototype beside a laptop](https://uditha.design/assets/brightspark/usability-session-4.webp)](https://uditha.design/assets/brightspark/usability-session-4.webp) #### 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](https://uditha.design/assets/brightspark/heatmap.webp) #### 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. [![Bright Spark Teacher homepage](https://uditha.design/assets/brightspark/solution-teacher-home.webp)](https://uditha.design/assets/brightspark/solution-teacher-home.webp) [![Bright Spark Classroom](https://uditha.design/assets/brightspark/solution-classroom.webp)](https://uditha.design/assets/brightspark/solution-classroom.webp) [![Bright Spark Children’s profile](https://uditha.design/assets/brightspark/solution-child-profile.webp)](https://uditha.design/assets/brightspark/solution-child-profile.webp) [![Bright Spark Check-in](https://uditha.design/assets/brightspark/solution-checkin.webp)](https://uditha.design/assets/brightspark/solution-checkin.webp) 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. [![Original Bright Spark welcome screen exported from Figma](https://uditha.design/assets/brightspark/ui-welcome.png)](https://uditha.design/assets/brightspark/ui-welcome.png) #### Welcome A playful introduction with clear sign-up and sign-in actions. [![Original Bright Spark parent home screen exported from Figma](https://uditha.design/assets/brightspark/ui-parent-home.webp)](https://uditha.design/assets/brightspark/ui-parent-home.webp) #### Parent home My Kids and Teachers grouped around the parent’s everyday tasks. [![Original Bright Spark evaluation report screen exported from Figma](https://uditha.design/assets/brightspark/ui-evaluation-report.png)](https://uditha.design/assets/brightspark/ui-evaluation-report.png) #### Evaluation report A structured view of observations across development areas. [![Original Bright Spark children’s report (parent side) screen exported from Figma](https://uditha.design/assets/brightspark/ui-parent-report.png)](https://uditha.design/assets/brightspark/ui-parent-report.png) #### Children’s report · Parent side Activity summaries and progress charts help parents follow their child’s development. [![Original Bright Spark teacher home screen exported from Figma](https://uditha.design/assets/brightspark/ui-teacher-home.webp)](https://uditha.design/assets/brightspark/ui-teacher-home.webp) #### Teacher home Classrooms and staff gathered in one workspace. [![Original Bright Spark classroom screen exported from Figma](https://uditha.design/assets/brightspark/ui-classroom.webp)](https://uditha.design/assets/brightspark/ui-classroom.webp) #### Classroom Quick access to children, attendance and classroom tasks. [![Original Bright Spark attendance screen exported from Figma](https://uditha.design/assets/brightspark/ui-attendance.png)](https://uditha.design/assets/brightspark/ui-attendance.png) #### Attendance Daily counts and a visual attendance summary. [![Original Bright Spark child profile screen exported from Figma](https://uditha.design/assets/brightspark/ui-child-profile.webp)](https://uditha.design/assets/brightspark/ui-child-profile.webp) #### Child profile Child details, homework and reports in one place. [![Original Bright Spark activities screen exported from Figma](https://uditha.design/assets/brightspark/ui-activities.webp)](https://uditha.design/assets/brightspark/ui-activities.webp) #### Activities A visual library of classroom activity categories. 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 / Brand**Expressive lettering introduces Bright Spark and its playful identity. **Heading / Section**Bold headings separate classroom, staff and activity content. **Body / Description**Readable supporting text explains tasks and learning content. **Label / Action**Short labels identify buttons, navigation and selections. **Caption / Metadata**Supporting 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](https://www.figma.com/design/jmn2C2lxfgz9q8ZKbQgMwM/DEV?node-id=1-1169) 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.