Lillian Ip-Koon - Serial Mash Online Library

Serial Mash

Serial Mash is an online platform that engages primary school students through interactive books, quizzes, and activities, while enabling teachers to set tasks and track progress. The challenge was to design a new platform that would better engage children and support both classroom and home learning.

The goal was to improve engagement and learning outcomes, while also using the project to establish a scalable design system that would streamline processes and ensure consistency across future products.

Case study 1: Standalone product

Serial Mash is originally a part of Purple Mash, a signature product from the company. However, Serial Mash was often overlooked amongst hundreds of other in-platform offerings of Purple Mash.

The goal was to launch Serial Mash as a standalone product, offering a distinct yet familiar user experience.

Prototyping and Working process

I iterated on designs from paper sketches and Balsamiq wireframes to high-fidelity prototypes in Figma, using each stage to explore user flows, layouts, and interactions while gathering early feedback.

I conducted remote usability testing via Maze, using behavioural data and qualitative insights to validate decisions and refine the experience. Throughout the project, I worked closely with developers to ensure feasibility, support secure implementation, and align on version control and hosting.

The product successfully launched in 2022 as a standalone platform, delivering a more modern, user-friendly experience while maintaining familiarity for existing Purple Mash users.

User flows with wireframes for various tasks for one user type

Screenshot of a figma file detailing a high-fidelity prototype of the serial mash product

Screenshot of research data results in the Maze user testing platform

Tablet and mobile device with showing screens from the serial mash product

Launch and evaluation

Successfully launched Serial Mash in 2022 as a standalone product, offering a refreshed, user-friendly interface that retained familiarity for Purple Mash users.

Carefully considered how the product would be evaluated post-launch, outlining key metrics such as user adoption rates, usability feedback, engagement statistics, and usage patterns.

Summary

Redesigned Serial Mash as a standalone platform to improve student engagement and support both classroom and home learning, elevating it from its former position within Purple Mash.
Led the end-to-end design process—from low-fidelity sketches to high-fidelity Figma prototypes—conducting usability testing via Maze, gathering user insights, and collaborating closely with developers to ensure a secure, feasible implementation.
Successfully launched in 2022 with a refreshed, user-friendly interface and clear evaluation metrics (adoption, engagement, and usability feedback), laying the groundwork for a scalable, company-wide design system.

Reflection

It was a challenge to turn Serial Mash into a standalone product, as it needed to stand out from the crowded Purple Mash platform while still feeling familiar. Redesigning with a clear focus on user journeys helped create a cleaner, more engaging interface suited to both children and teachers. Usability testing revealed subtle issues that informed adjustments, ensuring accessibility for all users.

The experience highlighted the importance of guiding users through change by maintaining familiar design elements and offering clear onboarding. Launching Serial Mash independently increased its reach and relevance, showing how giving a product its own space—backed by user insight—can significantly boost engagement and impact.

Case study 2: Championing a new Design System

The introduction of Serial Mash as a standalone product served as the perfect opportunity to build the company’s first design system, aiming for greater consistency, scalability, and improved user experience across products.

A laptop with a screenshot of purple mash home page, and a tablet with a screenshot of serial mash home page

Screenshot of a figma file of a colour palette

Design System Development

I audited company products to identify common components, patterns, and functionality, establishing the foundation for a unified design system. I defined and documented core elements such as colour, typography, grids, and spacing, and designed a reusable component library to scale across products.

I also developed page-level patterns and templates to streamline design and maintain consistency. The system was built alongside live projects, ensuring components were validated in real use and supporting team adoption.

Screenshot of Figma file with detail of various buttons in different states.

Screenshot of a figma file design system of components

First page of a set of design system presentation slides

Driving company adoption

I introduced Figma to design and development teams as a more effective prototyping tool and as a central platform for hosting the design system. I led targeted design talks with delivery teams to build understanding, demonstrate value, and secure adoption.

I also delivered organisation-wide presentations to promote user-centred design, increasing awareness and buy-in. Working closely with developers, I co-designed and implemented the system, fostering shared ownership and driving consistency across digital products.

Summary

Developed and launched the company’s first design system alongside Serial Mash, establishing a consistent, scalable design language and component library for use across multiple products.
Conducted a comprehensive audit of existing products to define core elements (colour, typography, grids) and built reusable components and templates, validating them in live projects to ensure practical adoption and cross-team buy-in.
Championed organisation-wide adoption by introducing Figma, leading design talks and presentations, and collaborating closely with developers, driving a shared commitment to user-centred design and unified product experiences.

Reflection

Leading the development of the company’s first design system alongside Serial Mash reinforced the importance of balancing vision with practicality. By auditing existing products, I identified shared components and patterns to establish a scalable foundation, and validated these through live projects to ensure effective adoption.

I drove adoption through clear communication and collaboration, introducing Figma and leading targeted design talks to build understanding, engagement, and shared ownership. This experience highlighted that success depends not just on design quality, but on education and teamwork.

Ultimately, the project demonstrated how a well-executed design system can improve consistency, efficiency, and user-centred alignment, supporting more scalable and cohesive products.

Page updated

Google Sites

Report abuse