Night School UI/UX Case Study
Night School UI/UX Case Study
1. Project Overview
For this module, I worked in the Night School group, where our client was an organization that provides training and support for Alternative Learning Centre (ALC) teachers. Night School focuses on equipping educators who work with refugee and underserved communities, many of whom lack access to formal teacher training, resources, and institutional support.
Our task was to understand Night School deeply — beyond the initial brief — and propose a design-led solution that responds to real needs faced by ALC teachers, owners, and funders.
My Role
UI/UX Designer & Research Support
- Conducting contextual research focused on Night School’s curriculum and training modules
- Synthesizing research insights into personas and problem statements
- Co-designing the website user journey, wireframes, and high-fidelity UI in Figma
- Iterating on layouts and visual structure based on lecturer and client feedback
Phase 1: Contextual Research
In the first few weeks, each team member researched a different aspect of Night School. My focus was on:
The curriculum and modules used in Night School
How content is structured and delivered
Whether the training meets the practical needs of ALC teachers
Although we were given a brief overview at the start, it was not enough. We had to independently gather information through desk research, documentation reviews, and discussions.
Phase 2: Research Review & Feedback
After completing our individual research, I documented the feedback session and organized it in Miro, so the entire team could refer back to it.
Key feedback included:
Ask more specific and critical questions about Night School
Research competitors and similar programs
Understand Night School’s pain points and structure more deeply
Begin developing clear personas to guide design decisions
This feedback pushed us to move beyond surface-level research and focus on real-world constraints and opportunities.
Phase 3: Interviews & User Insights
We shifted our focus to Night School’s primary stakeholders — ALCs and their staff. We conducted interviews to better understand their realities and challenges.
Interview 1: Abdul Syukur – Head of Secondary, UAIM (Puchong)
Joined Night School in 2023 (first batch)
Found training practical and insightful
Learned to use tools like Magic School and ChatGPT for lesson planning
Suggested more physical sessions and training for special needs students
Key challenges: limited resources, learning disabilities, language barriers, lack of exam recognition
Interview 2: Blessed Learning Center (ALC Owner)
Established in 2009, reopened post-MCO in 2022
Offers Cambridge syllabus, Mandarin, and music classes
Faces teacher shortages and limited recruitment reach
Provides in-house training only for paid staff
Relies on school fees due to limited sponsorship
Interview 3: Cassie Seow – Head of Communications, El Shaddai
Organization operates multiple centers for refugee and stateless children
Employs 70 teachers with mixed backgrounds
Key challenges: classroom management, teacher drop-outs, lack of long-term commitment
Highlighted trust issues toward university-led or external programs
Phase 4: Defining Personas
Initially, we created five personas. Based on feedback, we refined them into three core personas to maintain focus:
ALC Teachers
ALC Owners
Sponsors / Funding Parties
These personas helped us prioritize real needs instead of trying to design for everyone at once.
Phase 5: Synthesizing Insights
From interviews and research, we identified key patterns:
ALC teachers lack formal training due to limited resources and language barriers
Funding is unstable due to legal issues, lack of trust, and perceived risk
Inconsistent curricula and lack of certification affect learning continuity
ALCs prefer trusted organizations to avoid scams and harmful programs
Fragmented teaching methods make student progress difficult to track
Problem Statement
ALC teachers need flexible and supportive training with recognition because they lack resources, support, and access to practical, in-person training opportunities.
How Might We Questions
How might we support undertrained ALC teachers with accessible, practical resources?
How might we help funders develop trust in ALCs despite legal and perception barriers?
How might we help ALCs overcome curriculum and certification limitations?
Phase 6: Website Design Direction
Website Goals
Inform – Explain what Night School is and why it matters
Teach – Provide access to training resources and toolkits
Build Community – Connect ALC teachers through forums and shared spaces
We created a user journey map to guide structure and flow before moving into wireframes.
Color Justification
The visual identity uses bold primary colors — red, yellow, and blue — to communicate key emotional and functional values:
Red conveys energy, urgency, and action, reflecting active learning and engagement.
Yellow represents hope, optimism, and possibility, aligning with Night School’s mission to support educators working in challenging contexts.
Blue communicates trust, reliability, and credibility, which is especially important when engaging educators, partners, and funders.
Typography
The typography system was chosen to balance clarity, approachability, and trustworthiness.
- Headings: Inlander Rough
- Subheadings: Poppins
- Body Text: Poppins
Graphic Elements & Layout Language
Geometric forms are a core part of the visual system, used not just decoratively but structurally.
Rectangular Shapes
Represent structure, stability, and growth.Circular Shapes
Convey friendliness, trust, and inclusivity.
By integrating geometric shapes into the layout itself, the design achieves both clarity and emotional resonance, reinforcing the idea of structured support within a welcoming learning environment.
Phase 7: Wireframes to High-Fidelity Design
Wireframing
Started with low-fidelity wireframes
Focused on content hierarchy and clarity
Kept visuals minimal due to unfinished branding
High-Fidelity Design
Introduced brand colors and typography
Refined information architecture
Removed redundant sections for clarity
Initially, geometric shapes were used decoratively. After feedback, we reworked them into functional layout elements that:
Frame content
Guide visual flow
Create a distinct Night School identity
This phase involved extensive iteration and collaboration, testing balance, readability, and visual coherence.
Comments
Post a Comment