Mangahigh is a UK based Maths Games Edtech company with products used by more than 5.000 schools and education departments all around the world.
This project documents the evolution of the Mangahigh Design System – A comprehensive system of interface components, behaviour, uses and processes, utilised in Mangahigh’s core products: Teacher Experience and Student Experience platforms.
I also showcase my work leading the Design Team at Mangahigh, introducing a DesignOps approach, what that means, and what we achieved with a team comprised of Junior Designers, Games Designers, UX designers and freelancers.
This involved me designing holisitic work strategies, reviewing processes, creating styleguides and documentation and mentoring through workshops and activities.
The Mangahigh Design Team Celebrating a succesful brainstorming session.
Mangahigh Design System
Mangahigh DS, used in Mangahigh’s Teacher Experience and Student Experience products – branching into other subproducts such as the Prodigi maths games enging, evolved throughout the years.
I reworked, simplified and guided the evolution of the system.
Objective
Sustainable growth of the system
Reduced production times
Improved design-dev handover processes
Improved communication between designers
Mangahigh DS v1
Design in 2015 by a team of freelancers, the original Mangahigh DS was based on Google Material I.
Due to the development of new features and decentralised management of the system, the original Mangahigh DS suffered of high entropy – the complexity of the system made it increasingly unsustainable and hard to update and document.
Mangahigh DS v2
Rework started in-house during 2020.
Documentation of tokens and components
Revision and reduction of tokens: spacing, size, colour, typography and responsive grids.
Figma – Storybook – React integration
DesignOps
DesignOps refers to the orchestration and optimization of people, processes, and craft in order to amplify design’s value and impact at scale. ~ Nielsen Norman Group
How We Work Together
Organizational Structure
The Mangahigh Design Team worked as a centralised collaborative team.
Designers would report to me for task assigning, direction, feedback and mentoring.
Benefits:
Cammaraderie
Shared feedback and knowledge accross all design disciplines
Democratic decision making
Collaboration
Monday Standups – Dance to cheer up, Squishy the mascot
Weekly gathering of all designers to discuss all kinds of topics and organise workshops to keep designers informed and aware of everything regarding design.
Humanize
I was involved in the hiring process of many designers, reviewed hundreds of designer portfolios.
Induction Documentation, meetings and mentoring. I would make sure they would feel as part of the team quickly
How we get work done
Standardise
Branding Styleguides and Design System Documentation
Folder Structures, Naming Conventions
Harmonise
Design Systems: Mangahigh DS
Documentation Platforms: Storyboard, Tettra
Prioritise
Kanban Boards and Project Management: Jira, Trello, Monday, Hive.
How our work creates impact
Measure
Definition of Quality standards and KPIs
Peer review and feedback
QA sessions
Socialise
Design Workshops and Figjams
Design Hackathons
Enable
Design Fridays: For personal development, illustration lessons even on Saturdays, house-keeping sessions: branding, design systems, file structure, IT issues.