Project Overview
Summary
HighScope Educational Research Foundation aims to facilitate high-quality early childhood education. Through robust research and practical application, they support educators in ensuring every child realises their full potential and achieves long-term success.
Currently, educators perceive HighScope's curriculum as tedious, resulting in ineffective lesson planning and hindered quality education. Additionally, budget constraints limit curriculum updates to every 5-10 years, preventing the incorporation of the latest teaching techniques.
This case study presents a solution that converts the curriculum into an engaging WebApp with interactive components, quizzes, and a content management module to support efficient updates and comprehensive learning.
Project Details
Project Type: Freelance
Organisation Type: Non-profit
Duration: 3 weeks
Tools: Figma, Canva, Paper & Pen
Target Users: Young Early Childhood Educators & Early Childhood Education Specialists
Team: 1 UX/UI Designer (Me), 1 Project Lead, and 5 Early Childhood Education Specialists.
My Role
As the UX/UI Designer in the project, I visualised the curriculum content through detailed information architectures, created low- & high-fidelity UI wireframes, established a cohesive design system, and designed a content management module to facilitate easy updates by the admin team.
The Problem
A Long and Unengaging Curriculum leads to its Underutilisation
The current curriculum, presented as a traditional book, is perceived as tedious by early childhood educators at HighScope. Consequently, they are not utilising it wholly for lesson planning, viewing it merely as long blocks of content. This lack of engagement hampers their ability to deliver quality education effectively, ultimately hindering the organisation’s goal of providing high-quality early childhood education.
Infrequent Curriculum Updates results in Outdated Teaching Techniques
Budgetary constraints prevent frequent updating of HighScope’s curriculum. Thus, content is updated only once every 5-10 years, despite new research introducing improved teaching techniques. This infrequent updating hinders the incorporation of the latest educational advancements, affecting the quality and relevance of the curriculum.
How Did We Solve It?
A New Interactive & Engaging Curriculum WebApp
We reorganised the Curriculum information and transferred it into a WebApp, which allowed us to incorporate the following aspects:
The ability to condense information into interactive components that present essential content upfront and can be expanded for more details.
Interactive quizzes and reflections to check the reader’s understanding, ensuring a comprehensive learning strategy.
A platform to include a content management module for efficiently updating and managing content.
Target Users
Young Early Childhood Educators, who use the tool to understand the curriculum and plan lessons for children.
Early Childhood Education Specialists or researchers, who will use the tool to regularly update the curriculum content as administrators.
Goals
User-based Goals: Create an interactive, engaging, and easy-to-use curriculum platform for educators, which allows administrators to update content quickly and easily.
Organizational Goals: Improve the curriculum, and ensure it stays relevant and effective.
Visualising the Information Architecture
After reviewing the Curriculum content for the Learning Environment and Daily Routine modules, I drafted content architectures to understand the information flow and hierarchy. This helped me visualise the different pages, sections, and subsections needed in my layout, and identify the various web components involved in the design.
Sketching Out the Initial Designs
Once the information architecture for the WebApp was clear, I began designing the page layouts. Initial sketches using paper & pen helped me choose between different layout styles (e.g., single-column or double-column) and visualise the look of varying web components. Finally, low-fidelity wireframes were created in Figma that showcased the intended layout to our stakeholders, providing an opportunity for constructive feedback.
The low-fidelity wireframes provided valuable insight into the look and feel of the Curriculum App, enabling our stakeholders to visualise their content on the web and propose modifications for smoother information flow.
Establishing a Cohesive Design System
Establishing a new design system from scratch can be challenging due to its detail-oriented nature. Thankfully, my information architecture strategy helped me create a comprehensive list of all the essential and non-essential components of the design system.
Typography & Colour Styles
I ensured consistent text styling through fixed font families, sizes, alignment, and spacing for the different text components in the app. The differences in font sizes and styles between various heading levels and the body text also added visual hierarchy to the content.
The primary colour palette follows the organisational branding guidelines (as seen in various UI elements). Additionally, we included a set of colours to promote a fun, joyful, and playful mindset, inherent to early childhood education.
Accordions as Collapsible Sections for Clear Information Hierarchy
I recommended using Accordions as collapsible sections to add a clear visual hierarchy to the lowest-level sections of the information. This feature encapsulates detailed information into key headers, provides users with the control to access it, and keeps the UI clean.
Callouts for Action Points & Essential Information
We highlighted different callouts by categorising them with various icons and colour styles, grabbing the readers’ attention towards valuable information and action points. These callouts include notes for Fidelity Check, Reflection, Conflict Resolution, Diversity & Inclusion, and more.
Cards, Popups, & Sidebars
By adding a card-styled layout (such as information cards, sidebars, and popups), I created a blend of 2D and 3D components, increasing the screen's liveliness and promoting higher user engagement. A similar design style is also used for Interactive Module Cards.
Increased Interactivity through Quizzes & Checklists
As a team, we decided to embed some interactivity into the layout. Prior UI design research suggests, increased interaction between the user and the content improves overall engagement. Following this idea, we embedded interactive quizzes and checklists throughout the app to help educators frequently check their understanding of the subject and keep track of their tasks before a lesson.
Consistent Form Elements
It was essential to maintain consistent design styles and layouts among different interactive components (Nielsen’s Heuristics #4). Therefore, I designed all the form elements and their distinct states before using them in the app design. These elements were predominantly used in the Content Management Module and sparsely in the Main Curriculum Content.
Applying the Design System on the Page Layouts
With the design system for the WebApp ready, I began crafting the high-fidelity wireframes for the main Curriculum Design. After a few iterations, incorporating feedback from the low-fidelity stage, and making minor improvements in the design system, the pages for different modules were ready for development.
The wireframes below depict some screens where different UI elements from the design system were incorporated into the Curriculum Content.
Designing the Content Management Module
A Simple & Efficient Page Management System
To maintain consistency with other apps at HighScope, I reviewed and understood the design strategy of a similar module in our Learning Management System. This led to my first design decision: conceiving a simple table where all pages of the Curriculum app can be managed.
One-stop Component Toolbar for all Web Components
For adding and editing page content, I researched content management systems like Squarespace and Wix, and identified common design strategies to craft a simple, user-friendly design. My key decision was to create a One-stop Component Toolbar, making all web components easily accessible for quick use.
Intuitive & Effective Content Editing
Using the component toolbar as a base, I designed screens for each web component, creating a straightforward design to support our users in efficiently updating content as and when needed. These screens include creating and editing of: images, text, quizzes, checklists, sections, and more.
Impact Metrics We’d Have Liked To Track
Since the designs are going through a review & development process at this stage, I am unable to showcase proper metrics and impact for the solution. However, as part of my analysis, I recommend focusing on the following metrics.
Check if We Solved Our Users’ Problems
The entire WebApp design fails if we cannot solve the defined problems that led to the conception of the design in the first place. To understand this we can look into the following quantitative and qualitative metrics.
Quantitative
Increase in the number of educators (our target users) who use the curriculum to plan their upcoming lessons.
Increase in the number of successful & frequent updates to the curriculum based on regular research.
Qualitative
Do the educators find the curriculum more engaging and useful now?
Can the administrators successfully manage Curriculum content without any difficulties?
Check the Overall User Experience of the App
Designing an intuitive and friendly user experience is an iterative and collaborative process, and is achieved through regular feedback loops. For this scenario, I would recommend focusing more on qualitative than quantitative metrics.
Quantitative
Gauge the success ratio of quizzes to see if the readers understand the curriculum easily in their first attempt.
Observe the number of times users face errors when accessing the platform (especially for the Content Management Module).
Qualitative
Observe and identify specific areas where users are getting stuck.
Gauge the users’ qualitative experience of using the app through Qualitative Studies.
Final Thoughts
Personal Reflections
Crafting a Design System from scratch enhanced my understanding of its detailed nature and importance.
Designing a Content Management platform allowed me to study strategies for building simple, effective solutions.
This project also helped me gauge my UX skills, and ability to quickly and efficiently conceive new designs.
Next Steps
Before proceeding with further design, we must research and understand users' perspectives through a well-informed User Study. I recommend:
Measuring user engagement on the Curriculum platform through surveys and observations.
Identify user pain points using qualitative methods like interviews and contextual inquiries.
Conclusion
The Curriculum WebApp project exemplifies my ability to conceptualise, design, and implement user-centred solutions in educational technology. By transforming the traditional curriculum into an interactive web application, we addressed usability challenges and enhanced educational outcomes for early childhood educators.
Thank You
The project would not have been possible without the support of my team at HighScope.
Check out some other case studies too!
-
![]()
A Mobile App for Clothes Trading
UX Design · Mobile App · Social Computing
-
![]()
An Empathetically Responsive Voice Assistant
HCI Research · Conversation Design · Voice Interaction
-
![]()
Improving Online Learning Experience
UX Research · Remote Field Study · Understanding User Needs
