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.
Supporting the design and research needs of the team in building their new web app.
- A solid base for a design system, ready to build and launch their MVP.
- A prototype to share with their potential new business partners.
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.
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.
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.
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.
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.
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.
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.