Learning with Parents

Learning with Parents are on a mission to support children's education at home, and help them to achieve their potential. They do this by giving parents the tools to share learning experiences with their families.

I joined the project as they were looking to update their web system to something more scalable and responsive. I also assisted them with creating a complex prototype.

My role

Supporting the design and research needs of the team in building their new web app.

Business outcomes

  • A solid base for a design system, ready to build and launch their MVP.
  • A prototype to share with their potential new business partners.

Background

Learning with Parents launched in 2016, and has since grown into a registered charity supporting more than 10,000 families across the UK. They work with schools to provide educational exercises across a range of Maths topics (with topics in English on the way!)

As they finish activities, children add costume items to their Mathscot, a friendly monkey character. Having this character gives the kids motivation to finish their activities.

image

Design system

I built the new design system in Figma. I chose this tool because it made the feedback process smoother between me and the team. Link sharing and live collaboration made presenting my progress simple and kept the design process transparent.

Here, I'm walking through how I create new components within the library. I go through how to make updates in line with what's already in the library, which is important to keep things consistent.

At 1:57 I say text but I meant to say colour. 🤦‍♀️

Component overrides

By creating a single versatile component, making design updates becomes quick and easy. These two cards on the right both use the same base component.

It also means that if I wanted to update this component, I'd only need to change it in one place rather than manually doing it everywhere. This makes it faster and safer to make global design changes.

image

Responsive layouts

Designing for both desktop and mobile simultaneously can be made a lot easier using card layouts. It also makes things quicker to develop as you can use the same building blocks for both versions.

image

Developer task

When looking for a developer to join our team, we set them a small design task. I curated a smaller section of the design system for them to recreate in React. You can explore this file below.

image

To understand how a developer would use my designs, I also built it myself. I did this using React and the MaterialUI framework.

Prototyping

To help show the idea of Learning with Parents to potential partners, I created a prototype using UXPin. I included complex features like animations and consistent states between screens to make the demo feel close to the final product.

Project management

image

I kept track of my progress and timesheets in Notion. Having a dashboard for the project makes it easy to build a knowledge bank of links and resources, rather than constantly digging through my emails. I wrote an article on the things I've learned creating dashboards like this.