top of page
Leading Education Brand
Web App + Mobile App
Learning Management System to facilitate a better learning experience for students and easier management for the staff.
Role
Duration
*Note: Final Wireframes and UI screens, brand name and some other information is not shown to respect the NDA.
Project Brief
This brand is a set of international schools, headquartered in Singapore, with a presence in over 7 countries with 21 campuses.
Their objective is to create a an online learning platform that encompasses the various aspects of education, providing a seamless learning experience. They wanted it to be user friendly, accessible and comprehensive enough to cater to the needs of students, teachers and administers.
I got the opportunity to work on multiple different modules for the web app as well as the mobile adaptations.
Process, Scale and Constraints
The vision of product meant that it had a huge scale, with multiple modules and over 10 active user roles. This resulted in a robust process that involved a lot of team work, stakeholder communication and constructive feedback mechanisms.
The project was planned out in 6 phases and the detailed features were finalised in the form of user stories for each role. Each phase involved 8-9 modules, some of them having 4-5 sub modules and each of them having 6-7 roles. About a 100 user stories per role
Team Structure and Communication
Team Size
We were a team of 20 + designers (16 UX, 4 UI, 1 lead designer and 1 project manager), across 4 different cities.
Multiple Time Zones
With a large team and multiple stakeholders from different countries, all communication happened in the form of morning calls that could respect all the different timezones.
Information Architecture
Given the scale of this product, the overarching IA that was created ensured efficient access to information and seamless navigation across the system.
The IA was created keeping in mind scalability, flexibility, and adaptability to accommodate the project's extensive scope and varying user requirements.
For this we mapped out user journeys, categorised content, and defined clear hierarchies.
High level IA of the the teacher role.
Detailed IA of the scholastic sub-module within the Workspace module for the teacher role
Ideation and Wireframes
Ideation involved a lot of collaboration, involving the entire design team. Modules were typically given to a team of 2-3 members, with each person individually working on each role. We conducted brainstorming sessions and design workshops to identify pain points and explore creative solutions. We followed an iterative process which helped refine the design, validate assumptions, and ensure usability.
Brainstorming session in progress
Some early sketches
Mobile Adaption
One major challenge we faced during this project was the task of adapting a large desktop-first LMS into a mobile application. We understood that not all functionalities and features could be seamlessly translated from desktop to mobile due to the inherent differences in screen size and user interaction patterns.
To tackle this, we closely collaborated with the research team to identify the key aspects that needed to be prioritised in the mobile adaptation. Despite all challenges, we successfully adapted it into a mobile app while maintaining its core functionalities and providing a seamless user experience on both desktop and mobile platforms.
Approach
Identifying Mobile Priorities
Focusing on quick, daily tasks that would be frequently accessed on mobile devices, such as marking attendance and submitting/approving/rejecting leave requests.
Design and Usability
Fitting a large amount of data and complex functionality into the limited real estate of a mobile screen, while maintaining easy accessibility.
Iterative Process and User Feedback
Considered the information hierarchy, simplified navigation, and optimised layouts to maximise usability and minimise the cognitive load on mobile users.
Condensed IA for the mobile app.
Data Visualisation
One of the most challenging tasks I worked on was designing data visualisations for the Analytics module. This involved creating complex dashboards that provided valuable insights to educators in a user-friendly and intuitive manner.
Through extensive collaboration with the educators, we identified key metrics they needed to monitor student progress and identify areas for improvement. Then we focused on organising the diverse data points and ensuring their relevance and accessibility in order to develop clear and visually appealing visualisations, employing appropriate chart types, and interactive elements to enhance data comprehension and exploration.
We wanted to ensure that the resulting resulting dashboard designs empowered teachers to make data-driven decisions, monitor student performance, and personalise their instructional approaches.
Major metrics involved:
-
Overall class progress
-
Subject wise class progress
-
Individual student level information
-
Attendance analysis
-
Comparisons with other grades and campuses
-
Yearly trends of performance
Design System
#402E6B
#764FDB
#F4EFFE
#5C677D
#8793AB
#C8CEDA
-
I was also a part of the design system team, responsible for setting and documenting the design behaviour, ensuring an overall cohesive visual identity to the product.
-
We set up guidelines for designing the various elements of the product, ensuring ease and better understanding for all designers on the project.
-
We also set up standards for file hygiene, documentation of modules, onboarding and off-boarding procedures to ensure the smooth functioning of the project.
-
The design system encompassed a comprehensive range of components and elements, including buttons, forms, typography, cards, navigation, and more, most notably an extensive library of over 300 custom icons.
-
Moreover, it was a highly interactive system, incorporating multiple user states, micro-interactions, and other interactive elements that enhanced the overall design process.
Key Takeaways
Developed a comprehensive understanding of how designing for a large scale enterprise product works (especially in the EduTech domain)
Worked with a team of 20+ designers requiring effective communication, coordination and documentation
Coordinated with stakeholders across 4 timezones, maintaining clear channels of communication and regular check-ins for timely feedback, decision making and progress updates
Designed multiple, complex modules within the same project, regularly reviewing the interdependencies between modules and to maintain consistency across the entire system.
Set up guidelines to standardise various processes across the product including designing, documentation, onboarding and off-boarding.
Contributed to the creation of a comprehensive and interactive system that was essential to ensure scalability of the project and maintain a strong visual identity.
bottom of page