DesignOps: Design Systems and Project Management – Mangahigh

Evolution of the Mangahigh Design System and my work leading the Design Team at Mangahigh, introducing a DesignOps approach.

Table of Contents

Overview

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.