Projekt Matematyka

A website with integrated, custom educational platform for a math school in Warsaw

System Design

Web App Design

Backoffice Design

Introduction

Projekt Matematyka is a private math school in Warsaw that proves learning doesn’t have to be scary – it can be fun and engaging. Students benefit from a personal approach and constant contact with their instructors. To match their fresh, school-like vibe, they needed a website redesign and a custom online learning platform.

Timeline

June 2024 - November 2024

Deliverables

Website redesign

Web learning platform

My duties

Research & Analysis

Wireframing

Stakeholder management

System Architecture Design

UX/UI Design

ERD & Documentation Design

Design System

Testing

Problems & Challenges

Previous website was outdated and built on an outdated technology while the old platform was more of a drive of lessons that were time consuming to upload.

Bad User Experience

The website had poor usability, making it hard for users to navigate or sign up for courses. Its unstructured layout and lack of clear information led to frustration and high drop-off rates. The site lacked proper UX, had inconsistent navigation, and too many hard-to-access subpages. Missing conversion-focused design elements reduced engagement and trust.

Bad User Experience

The website had poor usability, making it hard for users to navigate or sign up for courses. Its unstructured layout and lack of clear information led to frustration and high drop-off rates. The site lacked proper UX, had inconsistent navigation, and too many hard-to-access subpages. Missing conversion-focused design elements reduced engagement and trust.

Bad User Experience

The website had poor usability, making it hard for users to navigate or sign up for courses. Its unstructured layout and lack of clear information led to frustration and high drop-off rates. The site lacked proper UX, had inconsistent navigation, and too many hard-to-access subpages. Missing conversion-focused design elements reduced engagement and trust.

Bad User Experience

The website had poor usability, making it hard for users to navigate or sign up for courses. Its unstructured layout and lack of clear information led to frustration and high drop-off rates. The site lacked proper UX, had inconsistent navigation, and too many hard-to-access subpages. Missing conversion-focused design elements reduced engagement and trust.

Lack of proper online learning platform

Lack of proper online learning platform

Lack of proper online learning platform

Lack of proper online learning platform

Design not aligned with the brand

Design not aligned with the brand

Design not aligned with the brand

Design not aligned with the brand

Outdated Content Management System

Outdated Content Management System

Outdated Content Management System

Outdated Content Management System

Website redesign

I established a clear visual direction early on, which informed every stage of the process - from moodboarding and wireframing to UX decisions and UI design resulting in a cohesive and well-structured website design.

Moodboarding & style direction

Before initiating wireframes or layouts, we began with a comprehensive moodboarding session to establish a clear visual direction. One of the client’s team members brought a strong background in graphic design, allowing us to collaborate effectively. Together, we aligned on a modern, minimalistic aesthetic enhanced by abstract, hand-drawn elements-evoking a familiar, school-inspired atmosphere.

Moodboarding & style direction

Before initiating wireframes or layouts, we began with a comprehensive moodboarding session to establish a clear visual direction. One of the client’s team members brought a strong background in graphic design, allowing us to collaborate effectively. Together, we aligned on a modern, minimalistic aesthetic enhanced by abstract, hand-drawn elements-evoking a familiar, school-inspired atmosphere.

Moodboarding & style direction

Before initiating wireframes or layouts, we began with a comprehensive moodboarding session to establish a clear visual direction. One of the client’s team members brought a strong background in graphic design, allowing us to collaborate effectively. Together, we aligned on a modern, minimalistic aesthetic enhanced by abstract, hand-drawn elements-evoking a familiar, school-inspired atmosphere.

Moodboarding & style direction

Before initiating wireframes or layouts, we began with a comprehensive moodboarding session to establish a clear visual direction. One of the client’s team members brought a strong background in graphic design, allowing us to collaborate effectively. Together, we aligned on a modern, minimalistic aesthetic enhanced by abstract, hand-drawn elements-evoking a familiar, school-inspired atmosphere.

UX structuring & interface design

UX structuring & interface design

UX structuring & interface design

UX structuring & interface design

Content management & Design System

Content management & Design System

Content management & Design System

Content management & Design System

E-learning platform

An intuitive e-learning system focused on usability, cost-efficiency, and smart automation built from scratch to grow with the school.

Strong focus on usability

I designed the entire platform from the ground up — starting with information architecture and ending with a clean, intuitive UI. One standout feature is the custom video player, optimized for smooth lesson playback. To reduce server costs, lessons are streamed directly from YouTube via embeds.

Strong focus on usability

I designed the entire platform from the ground up — starting with information architecture and ending with a clean, intuitive UI. One standout feature is the custom video player, optimized for smooth lesson playback. To reduce server costs, lessons are streamed directly from YouTube via embeds.

Strong focus on usability

I designed the entire platform from the ground up — starting with information architecture and ending with a clean, intuitive UI. One standout feature is the custom video player, optimized for smooth lesson playback. To reduce server costs, lessons are streamed directly from YouTube via embeds.

Strong focus on usability

I designed the entire platform from the ground up — starting with information architecture and ending with a clean, intuitive UI. One standout feature is the custom video player, optimized for smooth lesson playback. To reduce server costs, lessons are streamed directly from YouTube via embeds.

Lightweight, functional, cost-efficient

Lightweight, functional, cost-efficient

Lightweight, functional, cost-efficient

Lightweight, functional, cost-efficient

Smart access control and automation

Smart access control and automation

Smart access control and automation

Smart access control and automation

System architecture & integrations

From CMS wireframes to third-party integrations and final testing. I made sure every part of the system was well-planned, documented, and ready for development.

Wireframe for Backpack CMS

I created detailed wireframes for the Backpack-based CMS, including thorough annotations for developers. These wireframes served as the foundation for how Backpack was ultimately configured and implemented by the dev team.

Wireframe for Backpack CMS

I created detailed wireframes for the Backpack-based CMS, including thorough annotations for developers. These wireframes served as the foundation for how Backpack was ultimately configured and implemented by the dev team.

Wireframe for Backpack CMS

I created detailed wireframes for the Backpack-based CMS, including thorough annotations for developers. These wireframes served as the foundation for how Backpack was ultimately configured and implemented by the dev team.

Wireframe for Backpack CMS

I created detailed wireframes for the Backpack-based CMS, including thorough annotations for developers. These wireframes served as the foundation for how Backpack was ultimately configured and implemented by the dev team.

Integrations with Fakturownia & YouTube

Integrations with Fakturownia & YouTube

Integrations with Fakturownia & YouTube

Integrations with Fakturownia & YouTube

System documentation & final testing

System documentation & final testing

System documentation & final testing

System documentation & final testing