By Valeria Varlamova, Project Manager, Phenomenon Studio

Key Takeaways:

• Phenomenon Studio’s redesign significantly improved user satisfaction with key features, addressing past frustrations with progress tracking.

• Learning productivity and engagement saw noticeable improvements post-launch.

• The technology stack included modern tools like TypeScript, React, Vite, MUI, Redux, Firebase, and Auth0, chosen specifically to meet product needs.

Qurtuba is an online school platform serving students in Johannesburg, South Africa. The platform’s user interface (UI) had accumulated significant friction over the years, leading to frustration for both students and teachers. Our challenge was to redesign the platform while preserving its functionality and keeping its loyal user base intact, all without taking the platform offline.

The Initial State: A Platform Struggling with UX

Before the redesign, Qurtuba’s platform, although operational, presented various inefficiencies. Students had difficulty accessing their progress data, which was buried under multiple menu layers. Teachers encountered cumbersome workflows that required numerous steps to grade assignments. These issues created friction that affected user engagement and overall effectiveness.

The UX Audit: Identifying Core Problems

During the audit, we found that the primary UX issues weren’t a lack of features but rather the poor design of the existing ones. For example, the progress-tracking feature required navigating through several menu layers, which often led to confusion. Similarly, the grading workflow for teachers was unnecessarily complex, with many steps required to complete a task.

The audit revealed that Qurtuba’s platform wasn’t designed with the users’ needs in mind. Instead, it reflected the perspectives of the developers who built it. This disconnect led to unnecessary friction and hindered the platform’s ability to serve its users effectively.

Choosing the Right Tech Stack

Given the complexity of the project, we carefully selected a technology stack that aligned with Qurtuba’s specific requirements.

• React with TypeScript: React’s component-based structure was ideal, while TypeScript ensured consistency and minimized errors that could disrupt the user experience.

• Vite: Vite accelerated the development cycle, allowing us to test and iterate more quickly.

• MUI: MUI’s accessible components helped ensure that the platform was usable by students with varying needs, laying a strong foundation for accessibility.

• Firebase & Auth0: Firebase allowed for real-time data synchronization, while Auth0 provided secure, flexible authentication for users with different roles.

Redesigning the Platform: Streamlining the Experience

The redesign focused on addressing the most significant sources of friction and improving usability.

• Student Dashboard: The dashboard was simplified, reducing the number of interactions required to view key information and making it easier for students to track their progress.

• Teacher Grading Workflow: We streamlined the grading workflow, significantly reducing the time teachers spend entering grades and freeing up more time for teaching.

• Teacher-Student Communication: The communication process was made more efficient, with a faster response time and a simpler interface for providing feedback.

Phased Rollout: Minimizing Disruption

To prevent overwhelming users with too many changes at once, we implemented a phased rollout strategy. Rather than launching the entire platform redesign at once, we introduced new features incrementally. This approach allowed users to adapt to the changes more smoothly and provided an opportunity to gather feedback and make adjustments as needed.

Results and Impact

After the redesign, we saw significant improvements across various aspects of the platform. User satisfaction increased, particularly with features related to progress tracking, and learning productivity improved noticeably. Teachers were able to work more efficiently, and students engaged with the platform more effectively.

Lessons Learned

This project reinforced the importance of a user-centered design approach, particularly for educational platforms. Key lessons included:

• The Importance of User Research: Taking the time to understand user needs before designing a solution is crucial for effective outcomes.

• Phased Rollouts Work Best for Existing Products: Gradual changes help users adjust to new features without feeling overwhelmed.

• Streamlining Processes Increases Efficiency: Reducing unnecessary steps can significantly improve both teacher and student productivity.

Redesigning Qurtuba was a challenging but rewarding experience. By focusing on improving usability and reducing friction, we created a platform that better serves its users. The result wasn’t a dramatic transformation, but rather the result of methodically addressing key issues and making the platform more intuitive and efficient.