A project involving collaboration with UX designers (John Koffi, Eric Khuu, and Angela Yang) as well as UI designers (Suri Wang) which was my primary role, and Project Manager Eki Ero, was undertaken to create a new learning platform for children in India, replacing the outdated existing platform.
UX/UI Design
Prototype
Role
UI Designer
Timeframe
November 2023 – May 2024
Industry
Educational
Tools
Introduction to the Project
Shuddhi Vidhya is a non-profit organization based in India, dedicated to championing children’s right to education, particularly those in underprivileged and rural communities. With a mission to enrich the learning journey, the founder of the organization has decided to redesign their learning platform to ensure greater accessibility, interactivity, and effectiveness in delivering educational content to marginalized communities.
Goals
Developing an all-in-one learning platform for students and instructors ensures that students can easily and effortlessly complete their courses, while enabling instructors to maintain teaching quality by addressing any questions and monitoring student progress
Old Learning Platform of Shuddhi Vidhya
1.
Design Process
The design process used by the UX Team was the double diamond.
2.
Benchmark
In the discovery phase, a comparative analysis of various companies within the educational market was conducted, evaluating their pros and cons. In my role, I used this benchmark to delve into the UI design of the competition.
3.
User Personas
The User Personas here were divided into student and instructor, the two main audiences.
4.
Sitemap
5.
User Flow
User flows, such as the one shown below, were created to enhance our understanding and design of the screens.
6.
Lo-Fi Wireframes
After the research phase, I began designing low-fidelity wireframes and brainstorming potential pages, as showcased below. Some of these pages were exploratory, serving as initial concepts to experiment with different layouts before finalizing to the final UI design.
6.
High-Fidelity Wireframes
Here I show some of the screens made for the final UI, and some of the features of each page.
Homepage
We aimed to evoke a sense of youthful energy and vitality for users through bright and diverse colors. On the homepage, users can view students showcase, explore available courses, complete registration and login.
Courses
Introducing all courses offered by Shuddhi, accessible with or without login, each accompanied by a brief overview to aid students in grasping the course content swiftly. Upon selecting a course, users are directed to its dedicated page, featuring a detailed and well-organized introduction to the course.
Other Pages
The remaining pages of the website also featured a visually appealing and consistent design, which is crucial for engaging students, with pages like “News” to help the user engaged and update
For Students - Platform
After logging in, in this area students can browse courses, track their progress, message tutors, and more. The UI was designed to facilitate easy navigation and enhance the platform’s overall aesthetics.
Courses
Students can browse the courses they are enrolled in, view upcoming assignments, and check their grades. Most importantly, SmartScheduler can help students personalize their study plans. This feature lets users pause and resume a timer, while also emphasizing the upcoming content that needs to be studied
Leaderboard
By understanding the learning progress of other students and introducing rankings, we aim to foster a sense of healthy competition among students, while also providing the attention and recognition they need.
Announcements
Students can receive the latest news from the website, keeping them informed about the upcoming events.
Message
When students wish to communicate with instructors, they can easily contact the instructors of each course through the message feature
For Teachers - Platform
The inability to track students learning progress and the standardization of video courses were the most pressing issues instructors want to address. The new website would allow teachers to introduce more learning materials to enable multi-channel teaching. Teachers will not only be able to chat privately with students but also gain insight into students’ overall learning progress through backend reports.
Courses
Provided instructors with greater authority to construct ideal courses ensuring teaching quality.
Reports
Clearly showcase students’ overall learning status and progress through visual dashboards.
Support Tickets
Allow instructors to easily track support tickets and annotate the progress of each case.
7.
Style Guide
7.
Prototype
The prototype was created for internal testing and to facilitate better understanding for the development team after delivery.
7.
Challenges
The wireframes were distributed among three UX designers, each with varying levels of experience. This resulted in some wireframes lacking continuity, necessitating additional time to reorganize and refine them. Continuous communication was essential to grasp the underlying rationale and logic behind their respective designs.
8.
Next Steps
At present, we have completed the design for Phase I. Once the learning platform is officially accessible to students, we will make modifications to the website based on the feedback received. Concurrently, Phase II design work will commence, focusing on the implementation of student incentive mechanisms. The current plan involves students earning points by completing courses and using these points to redeem desired rewards on the platform.