image
case study

Front-End, Design, and QA for an AI-powered Learning Tool & Educational Platform

image

Our team contributed to the development of a digital learning platform that includes 1,300+ courses focused on workforce e-training and enriched with AI-powered coaching.

image
Germany
image
20 Months
image
EdTech
Team Members
1 Frontend Engineer
1 UX/UI Designer
1 QA Engineer

Learn how our client got:

  • A team that joined early in development and played a crucial role in the product launch
  • A structured development process with clear sprints and dedicated environments
  • A fully documented design system replacing scattered templates
  • Team members who continue driving feature scaling and product improvements

TECHNOLOGY STACK

image

NEXT.JS

image

ZOD

image

AXIOS

image

MUI

image

REACT

Check All Technologies

CHALLENGE

The client had two ambitious systems: the Academy, an online university for corporate courses and certifications, and an AI-powered training tool for personalized skill development. Both were still in early development, with scattered templates, minimal structure, and an MVP in progress. The team faced tight timelines and limited internal expertise, struggling to turn concepts into a scalable, polished product.

They needed senior professionals to bring deep technical and design expertise, establish structured workflows and environments, build a robust design system, and enforce disciplined QA — taking the product from a startup prototype to a launch-ready platform.

The client's input

  • A platform in early development with basic structure and initial front-end templates
  • Internal team lacking senior front-end, design, and QA expertise
  • Need to launch two systems: Academy for online courses and an AI-powered training tool
  • Tight timelines to move from prototype to release-ready product
  • Limited processes and environments, requiring setup of structured workflows and disciplined QA
image

OUR APPROACH

Our team joined as senior specialists, stepping in where the client needed deep technical and design expertise. We worked as embedded team players, collaborating closely with the client’s staff while also providing expert guidance and consulting on best practices. 

From structuring front-end development and setting up release-ready environments to implementing a robust design system and defining QA processes, we ensured a disciplined, high-quality approach. Through this outstaff model, we combined hands-on delivery with strategic input, helping the platform grow from an early-stage prototype to a live product now in active scaling, with our team continuing to support its development.

QUALITY ASSURANCE: BUILDING STRUCTURE AND STABILITY

The QA engineer we brought to the project has over 10 years of experience working on complex digital platforms. She joined at an early stage and helped the client establish core QA processes from scratch, bringing structure, discipline, and measurable improvements to product quality.

She continues collaborating with front-end, back-end, and design teams to validate evolving requirements, supports two interconnected systems, the Academy and the AI-powered training tool, and ensures role-based logic and license-based access scenarios work reliably.

image

QA impact and enhancements

  • Establishing QA processes from the ground up in a startup-stage environment
  • Supporting large, complex releases with coordinated regression cycles
  • Introducing a dedicated regression environment before production deployment
  • Early involvement in feature discussions to prevent defects, not just detect them
  • Ensuring multilingual functionality across multiple language configurations
  • Contributing to release flow improvements after identifying bottlenecks in previous releases

When I joined, the team didn’t have a dedicated QA role, and there were almost no structured processes. Development was moving fast, but in a rather chaotic way, with features and fixes overlapping and little clarity on priorities. My first focus was to bring order: defining proper workflows, introducing multiple environments for Dev, QA, PO, and Production, setting up regression cycles, and establishing clear release practices. Over time, we implemented structured sprints, proper ticketing, monitoring with Sentry, and systematic logging, turning ad hoc testing into a reliable, scalable QA process.

image

Oksana Bila

Senior QA Engineer

FROM TEMPLATES TO A COHESIVE DESIGN SYSTEM

Our senior UX/UI designer joined when the platform had only very basic templates and concept files. She established a structured workflow, transforming fragmented ideas into a consistent, scalable design system that supports both the Academy and AI-powered training tool. Her impact includes:

  • Building a scalable design system from scratch for a growing platform
  • Streamlining design handoffs to improve delivery speed and consistency
  • Embedding accessibility and inclusive design practices
  • Integrating user feedback into iterative product improvements

FRONTEND EXCELLENCE

Good design only works when it’s implemented thoughtfully on the frontend. Our developer ensured that every design element was implemented with precision, creating a smooth and responsive user experience.

From components to complex features

  • Built and maintained a highly interactive SPA using Next.js and React
  • Developed reusable components and integrated them with the scalable design system
  • Collaborated closely with backend, QA, and design teams to implement complex platform logic
  • Supported the rollout of new features across both the Academy and AI-powered training tool while maintaining backward compatibility
  • Optimized the platform for responsive, client-side rendering tailored to authorized users
image

PLATFORM FUNCTIONALITY

The platform includes the core Academy with admin tools for managing users, groups, learning paths, and course assignments. Employees access a personalized profile to track progress and engage with interactive features like an AI-powered voice mentor that provides skill practice with post-session feedback. It also includes a psychological assessment tool that generates tailored learning recommendations. Access and available features vary depending on the user’s license level.

User & organization management

The platform offers a flexible and scalable user management system. It supports manual and bulk user onboarding, course and learning path assignment, role and permission management, and adapts to different organizational structures. Various license types influence functionality, while the interface stays intuitive and easy to use.

image
image

Profile & scan up assessment system

The assessment system forms the foundation of a personalized learning experience. Users complete structured evaluations to identify their level, strengths, and improvement areas, with results presented in clear, visually organized reports. Based on these insights, the platform delivers tailored learning recommendations and helps users better understand and develop their motivations and self-regulation skills.

Dashboard

A dedicated Academy dashboard gives administrators a quick overview of user activity, license usage, and remaining seats or credits.The dashboard currently provides essential metrics, but the team is actively expanding it into an advanced analytics tool to support better learning management and data-driven decisions.

image

E-learning reporting

Academy analytics functions as a decision-making tool, enabling real-time progress tracking, bottleneck identification, and flexible data segmentation. This allows administrators to optimize learning paths based on actual user behavior and continuously improve outcomes.

AI role play tool

The platform bridges theory and practice through interactive, voice based role play scenarios such as sales conversations or job interviews. Users can practice in a safe environment, receive immediate feedback, and apply knowledge in realistic situations, making learning more practical and effective.

image

Accessibility & inclusive design

Accessibility was embedded into the product from the very beginning of the design process. The UI is designed with visual impairments in mind, ensuring clear layouts, readable text, and high-contrast elements for an inclusive experience.

Multi-language support

The platform delivers courses in up to seven languages, tailored to each client’s license, ensuring a seamless learning experience for a global workforce.

image

FINAL THOUGHTS

By joining early and contributing across design, frontend, and QA, our team helped turn a promising prototype into a live, scaling platform. The structured workflows, robust design system, and disciplined QA processes we established continue to support ongoing feature development and product improvements. Collaborating closely with the client, we acted as both hands-on experts and trusted advisors.

If you’re looking for senior specialists who can step in, strengthen your team, and help your product reach its full potential, this is how we make it happen.

We engaged OTAKOYI to support the development of our learning platform, including frontend and UX/UI design, backend development, AI-powered coaching features, and full QA processes. Throughout the project, the OTAKOYI team demonstrated excellent communication, proactive problem-solving, and deep technical expertise. Deliverables were consistently on time, design and feature updates were implemented effectively, and ongoing support continues to drive product improvements. We are extremely satisfied with the results and the partnership, and we continue to rely on OTAKOYI for development and product scaling support.

image

Head of IT & Information Security

E-learning Platform

FEATURED PROJECTS

We have a proven track record of building high quality solutions for customers all over the world.

MORE PROJECTS

TALK TO OUR EDTECH TEAM

Talk to our team
Only for communication
No more than 5 files up to 5MB each

By submitting, I agree to OTAKOYI’Privacy Policy

Business is built on conversations, but true partnerships grow when we remember we’re humans first, not robots.
Solia Kaminska
Strategic Partnerships Director
Let's Connect
image
Trusted by more than 160 companies
imageimage
imageimage
imageimage
imageimage
imageimage
imageimage
imageimage
imageimage
imageimage
imageimage
imageimage
imageimage