Web App Redesign for EdTech SaaS Solutions Provider

One of its core products - an educational platform - having been in the market for two decades, required a redesign of its UI/UX and a revamp of its technology stack to guarantee its continued success among users.

Challenge: revamp tech stack with UI/UX redesign

The client presented us with three major challenges they needed to solve:

1. Urgent UI improvements as they had already lost contracts to a competitor whose platform has a better UI. With a major state contract ahead, the client wanted to have the MVP with upgraded UI.

2. Improving reporting features - although reporting was not the key part of the product, there was an urgent need to make the reports flexible and customisable, since each US state has its own reporting rules and regulations. Reporting has been a real downside of the current product, calling for additional, ad hoc development to meet the state/district requirements.

3. Replacing legacy tech stack with Node.js and Vue

Existing tech stacks (Microsoft based, .NET, store procedures in the database with Microsoft SQL Reporting services) caused a low net profit per user, as the maintenance costs required purchasing the top tier on Microsoft SQL licence. On top of that, the client invested more time with maintaining the tech stacks for this platform than with any other product. The aim of the project was to switch from Microsoft solutions to Node.js + Vue in order to increase the net profit per user.

Given the size and the scope of the project required assistance from external experts.

Detailed project scope

Client partnered with Netguru to:

• Map detailed features of a product that has been on the market for 20 years
• Identify all end-users and develop a list of goals/use cases for each type
• Translate the users’ high-level business objectives into functional requirements
• Redesign the platform from a user perspective, satisfying current functional requirements as well as future scalability
• Ensure increased simplicity, a modern look and feel, and balance between user and business needs
• Meet accessibility requirements (WCAG 2.1 level AA guidelines)
• Create a multi-tenant tool that is a responsive web application, adjusted to both web and mobile devices
• Decrease the number of roles used in the system
• Maintain the required level of product security (OWASP) and privacy
• Migrate the application base away from the Microsoft-based ASP, .NET, and MSSQL infrastructure to a modern, open-source tech stack
• Enable centralized reporting using client’s enterprise BI platform
• And finally, teach users how to use the new solution

Product Audit and User Research

The goal was for a product designer to investigate and research the existing product, identify key user journeys, and critical vs. nice-to-have functionalities, as well as prepare recommendations on UX/UI improvements. In the meantime, a user researcher conducted interviews to understand user behaviors, needs, and pain points. The findings were summarized in a comprehensive report.

Product Scoping

Having reviewed the input from the preceding phase, the product manager and the team prepared and ran a project scoping workshop, aiming to gather TransACT’s ideas on the application’s development and analyze them against user input. The outcome was an extensive report including all discussed functionalities, broken down into must-haves vs. optional improvements, all including implementational effort and related risks.

Design Phase and User Validation

Scoping was followed by the creation of wireframes and applying the application's visual layer based on product designers’ and users' recommendations. The phase was concluded with a second round of user tests, validating the product’s usability and readiness to be implemented.

Development Phase

Netguru and client teams joined forces and aligned two independent scrum teams from three different time zones to deliver the product’s MVP. The process was jump-started with Sprint 0, necessary to establish cooperation ground rules and coding practices, select tools and tech stacks, align on recommended integrations, and divide the scope to ensure smooth delivery.

Teams worked separately on independent functionalities of the application but required frequent communication and touchpoints to identify and remove blockers, discover scope interconnections, and ensure maximum speed.

Experienced with Vue and Node.js, Netguru served as a tech advisor, providing guidance and support for client’s internal squad. Quality engineers supported and guided the automation and accessibility validation processes, making sure the end product met all the requirements.

The project required preparing and maintaining extensive documentation that served not only as a single source of truth for all team members but as a foundation for the client team to take over and independently deliver future improvements.

Accessibility Audit

To make sure the product meets the WCAG 2.1 level AA accessibility guidelines, we performed a separate review of the functionality. The product was validated and any feature deviating from the guidelines was modified.

Results

• Fully functional MVP was developed in 6 months, helping our client secure important state contract
• MVP scope was delivered on time and within budget, meeting the required accessibility standards
• User research & design provided in 5 months
• Comprehensive UX/UI analysis based on product audit and usability testing
• A modernized UX/UI base, including functionalities’ design, style guide, and additional assets for future product improvements
• User validation of the application’s usability