top of page
CODING NINJAS
Empowering Education in Pocket: Optimizing Coding Ninja's Classroom for Mobile Efficiency
A major update to Coding Ninja's Classroom on Mobile web to help students watch lectures anytime and anywhere in the absence of laptop
Role
Timeline
Team
Associate Product Designer
1 Month ( May 2022)
1 Designer, 3 Developers, 1 PM
Core Responsibilities
Identifying user problems, Setting up Design roadmap, UX Design, Product Strategy
Want to skim through case study in 1 Min?
Here is the quick summary of the entire case study
🤩What I did?
I created an outcome-based strategy plan for this design task. Conducted user research, analyzed heat maps to understand the problem, and came up with new mobile web design which is not only responsive but also optimized.
🔥What was the impact?
1. Increase in Mobile users from 3% to 10%
2. Users spent an average of 45 min on the platform. Post-optimization, this figure soared to an impressive 2 hr and 38 min
⁉️Why did I do it?
The current mobile web design is responsive but not optimized for the various user needs, So it was important to make sure that the designs meet various use cases.
🖋️What did I learn?
Small but mighty : How little changes can make a big difference to user experience
BACKGROUND
Coding Ninjas is an online platform that offers coding and programming courses. It provides a range of courses in programming languages.
It aims to empower individuals with coding skills and enhance their proficiency in various areas of computer science and software development. The platform typically includes video lectures, coding challenges, and hands-on projects to facilitate learning.
Buy's Java course on Coding Ninjas Platform
Gets access to
Coding Ninja's online classroom where he can listen to lectures and practice Java problems
PROBLEM
Users are experiencing frustration and limitations with the current Mobile web app interface during course interactions and assessments. The inability to play paused videos, lack of clarity on incorrect answers during assessments, and a poor overall UI/UX design contribute to dissatisfaction.
Users unable to solve Mcq's/probems on phone
Why should we care to solve?
Since the journey is too long and your exams are around the corner you wanted to use this time to learn something new!
You take out your laptop and start listening to Coding Ninja's lecture video's
Imagine...
You are a computer science student traveling on a bus from Detroit to Chicago and the journey is 4hr long.
All of a sudden your laptop slips from your lap and falls down, Luckily it was safe
Using laptop might not be the right option so you took out your phone.
Since, the Mobile Web App is
Responsive..
You can just login to your account and start listening to the letures
What if you face these issues:
Too many clicks to watch a lecture
Difficult to navigate to different section within classroom
Very little space to scroll and access other features
HYPOTHESIS
How do I ensure clarity, alignment, and success throughout the design process?
OUTCOME
What do we primarily want the user to achieve or do?
1. To access and watch videos easily on mobile
2. Do important thing on mobile i.e. MCQ, fill ups, test, doubts
METHOD
How do we ensure the user will achieve our targeted outcome?
By improving the mobile UX after collecting data & understanding user pain points
MEASURE
How will we measure our success? What are the different users we can optimize for?
By comparing the ratio of old mobile version users to new mobile version users
RESEARCH
How do we know if it's a problem?
1. Leveraging Session Recordings :
We analyzed 10 session recordings which were recorded in Microsoft clarity. This was done to identify the issues faced by the users and to see the authentic user behavior.
Scrollable area to view other video lectures
Video is not allowed to play in portrait mode
There are questions like Mcq's, Fill in the blanks.
How Video lectures are shown on Mobile web
2. Insights from User Interviews:
We interviewed 10 Students who are daily users of coding ninja's classroom. They expressed their frustrations around the mobile web experience and they were kind enough to show me the issues as well.
User Frustrations
1. Messages feature on mobile is broken - " There is no option to close messages" and the Chat window opening is not visible even after clicking multiple times"
2. "Playing video is not allowed in portrait mode, why? "
3. " To watch another lecture we have to click on exit and select on other video then click on start. Its frustrating!! "
4. " I don't know why I can't do a fast-forward of 30sec "
5." The whole video screen is so congested, I have to be very careful if I want to click on something "
6. " Page loads very slowly, I have to be very patient enough to watch lectures on mobile "
Empathy Mapping
To know the context in which users will interact with the mobile
Uncovering Insights from Research
I divided all the painpoints into different buckets and identified areas of improvement
Improve the Video Player experience
Redesign the overall video experience so that users can watch lectures easily
Improve the overall navigation of mobile website
Help users to navigate to different parts of the mobile website easily
Help users to solve MCQ's and Fillups on mobile easily
Optimizing the assignments so that users can solve questions with just 1 click
User's should be able to ask doubts easily
The user should be able to initiate/ask doubts from a mobile easily and efficiently
COMPETITIVE ANALYSIS
Let's learn from Competitors
There are 2 main direct competitors Coursera and Udemy
1. Easy to resume video from home screen
2. Allows users to watch video in Portrait mode
3. User can watch next video with just 1 click
4. Better visibility of course content
1. Clearly highlighted from where user need to resume
2. Portrait mode is available
3. Better utilization of dropdowns
Let's Understand the current flows
This is the entry point to enter into classroom and the place where all the courses are listed.
Course Page: This is the entry point to enter into classroom and the place where all the courses are listed.
User faces difficuilty in using the two top navigation
Classroom: This is the Home page for classroom. Students can resume learning and explore modules related to their course
Users are getting confused
with the two hamburger menus available on the top
Modules: These modules have different topics associated with the milestones
Eg : Module - Introcuction to C++
Includes Milestone 1 & 2
Side Navigation Bar: This includes milestones which indicated the amout of course work the student has finished
Lecture Video Experience
Fill ups
Not enough space for the user to type/answer fillups, As portrait isn't available.
As we discussed the issue earlier, User have to turn on landscape mode everytime before watching.
MCQ's
Almost half of the mcq options aren't visible, Users have to carefully scroll down to see options.
ITERATION 1
Identified issues with certain elements that take up more space on the video page and encouraged students to watch full lecture.
What worked? ✅
1. Portrait Mode - It gives some space for the user to scroll and see other content easily.
What didn'tworked? ❌
1. Icons - There are too many icons to put them up front.
2. Lecture - Name of the lecture missing
3. Prominent CTA - Making the " Mark as watched" CTA more prominent will motivate students to skip the lecture.
ITERATION 2
Balancing Space Efficiency and Technical Constraints in 'Ask/View Doubt' Feature Implementation"
If only possible from tech
What worked? ✅
1. Portrait Mode - It gives some space for the user to scroll and see other content easily.
What didn'tworked? ❌
1. Buttons - " Ask/View Doubt" CTA is taking up more space
2. Lecture Name - Using the same component is disturbing the hierarchy of the page.
3. Tech - we realized that the overlay would be too much for tech team considering the timeline
ITERATION 3
Engaged with the tech team to explore the potential technical constraints associated with our design
It was determined that implementing Portrait mode posed a challenge due to the fixed aspect ratio of lecture videos in landscape mode. Converting these videos to portrait mode could adversely affect their quality. The tech team communicated that resolving this issue would require some time as they needed to assess possible solutions.
What worked? ✅
1. Navigation - The top navigation bar clearly shows the lecture name.
2. Icon Usage - "Ask a doubt" CTA has been replaced with a hand icon
3. Visibility - Users have more visibility and can easily scroll through different lectures
What didn'tworked? ❌
1. Portrait Mode - One proposed approach is to streamline the user experience by automatically directing users to landscape mode when accessing lecture videos. This would eliminate the need for users to manually switch to landscape mode, considering they would not be utilizing portrait mode for the remainder of the application.
Hi-Fi Design
Showcasing Visual Designs
Home Screen
Part -1
Access Content
Seamlessly
Video Learning Pages
Part -2
Watch lectures
Anywhere...
Fill ups & Mcq's
Part -3
No more Accidental taps.
Coding Problems
Part -3
Seamless Coding Experience on Mobile
RESULTS
Impact & Metrics
+7%
Increase in mobile users
The Designs successfully led to a notable surge in the percentage of mobile users, rising from 3% to 10%. This increase signifies a substantial shift in user behavior, indicating improved accessibility and acceptance of the mobile web version.
+1Hr 53 Min
Average time spent
Prior to the project, users spent an average of 45 minutes on the platform. Post-optimization, this figure soared to an impressive 2 hours and 38 minutes, with users expressing a high degree of satisfaction with the enhanced video playback and assessment clarity.
NEXT STEPS
So' Did we achieve it?
Not exactly,
There is still a long way to go...
Implementing Portrait Mode
We need to collaborate with the tech team to explore alternative solutions that maintain video quality while accommodating Portrait mode. Implement the chosen solution to enhance the overall user experience.
Coding Test on mobile
The current setup restricts users from taking coding tests on mobile devices. we need to Collaborate with the tech team to enable coding tests on mobile. This may involve designing an interface that accommodates coding problems effectively on smaller screens.
Iteration based on feedback
Gather user feedback and insights from analytics to identify areas of improvement. Collaborate with the design team to iterate on the mobile interface, ensuring it aligns with user expectations and industry best practices.
LEARNINGS
What did I learn?
1. Flexibility and Adaptability:
Learning to adapt and find alternative solutions when faced with constraints is a valuable skill in product design. In this project, I tried to explore options for accommodating user preferences while working within technical limitations, showcasing adaptability and flexibility in problem-solving.
2. Small but mighty :
I understood how little changes can make a big difference to user experience. Subtle alterations in user interaction elements, such as the automatic direction to landscape mode for videos, can significantly enhance user convenience. Eliminating the need for manual adjustments streamlines the experience.
bottom of page