Shuddi Vydhia Learning Platform
Shuddi Vydhia Learning Platform
Overview
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
UI Design
Visual Design
Prototype
Timeframe
7 Months
Role
UX/UI Designer
Industry
Educational
Tools
Introduction
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.
Goal
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
Benchmark
In the initial phase, the team conducted a comparative analysis of several companies within the educational market, assessing their strengths and weaknesses. Given the constraints of limited time and budget, we were unable to carry out extensive user research at this stage.
Instead, I relied on competitive benchmarking as a foundational reference to explore and evaluate the UI design approaches of key players in the space. This allowed us to establish a minimum base of knowledge to inform early design decisions, identify industry standards, and uncover potential opportunities for differentiation.
Benchmark
In the initial phase, the team conducted a comparative analysis of several companies within the educational market, assessing their strengths and weaknesses. Given the constraints of limited time and budget, we were unable to carry out extensive user research at this stage.
Instead, I relied on competitive benchmarking as a foundational reference to explore and evaluate the UI design approaches of key players in the space. This allowed us to establish a minimum base of knowledge to inform early design decisions, identify industry standards, and uncover potential opportunities for differentiation.
User Personas
User Personas
The User Personas were divided into student and instructor, the two main audiences.
User Personas
The User Personas were divided into student and instructor, the two main audiences.
Sitemap
Sitemap
User Flow
User flows, such as the one shown below, were created to enhance our understanding and design of the screens.
User Flow
User flows, such as the one shown below, were created to enhance our understanding and design of the screens.
Lo-Fi Wireframes
Lo-Fi Wireframes
After the research phase, we 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.
Lo-Fi Wireframes
After the research phase, we 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.
High-Fidelity Wireframes
High-Fidelity Wireframes
In the final UI, I implemented the typography and colors outlined in the brand guidelines, consistent with the logo crafted by Tasting Design, onto the approved lo-fi wireframe, ensuring responsiveness throughout.
Below, I outline the primary adjustments and offer a comparison slide to elucidate the modifications made to each page.
General Website
The general website serves as the primary entry point for users, designed to capture attention with a vibrant, youthful aesthetic that reflects the spirit of the platform. It provides an engaging experience where users can explore course offerings, view student showcases, and easily navigate through registration and login options.
With open access to course previews and detailed course pages, the site ensures that potential learners can quickly understand the value of the content. Consistency in visual design and thoughtful layout across all pages, including dynamic sections like “News,” helps build trust and maintain user engagement from the first interaction.
For Students - Platform
After logging in, in this area students can browse courses, track their progress, message tutors, and more. The interfaces were 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
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.
Announcements
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.
Message
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.
For Teachers - Platform
After logging in, in this area students can browse courses, track their progress, message tutors, and more. The interfaces were designed to facilitate easy navigation and enhance the platform’s overall aesthetics.
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.
High-Fidelity Wireframes
In the final UI, I implemented the typography and colors outlined in the brand guidelines, consistent with the logo crafted by Tasting Design, onto the approved lo-fi wireframe, ensuring responsiveness throughout.
Below, I outline the primary adjustments and offer a comparison slide to elucidate the modifications made to each page.
General Website
The general website serves as the primary entry point for users, designed to capture attention with a vibrant, youthful aesthetic that reflects the spirit of the platform. It provides an engaging experience where users can explore course offerings, view student showcases, and easily navigate through registration and login options.
With open access to course previews and detailed course pages, the site ensures that potential learners can quickly understand the value of the content. Consistency in visual design and thoughtful layout across all pages, including dynamic sections like “News,” helps build trust and maintain user engagement from the first interaction.
For Students - Platform
After logging in, in this area students can browse courses, track their progress, message tutors, and more. The interfaces were 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
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.
Announcements
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.
Message
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.
For Teachers - Platform
After logging in, in this area students can browse courses, track their progress, message tutors, and more. The interfaces were designed to facilitate easy navigation and enhance the platform’s overall aesthetics.
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.
Implementation
Prototype
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.
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.
