Edx redesign: Mobile app UX research and UI redesigning case study
(I am not associated with edx. This is a personal project.)
What is Edx?
edX is an American massive open online course provider created by Harvard and MIT. It hosts online university-level courses in a wide range of disciplines to a worldwide student body, including some courses at no charge. Students from the whole world can enroll for the courses and by paying an amount then can also avail for the course completion certificate. In the extraordinary period of COVID-19, edx also started campus course initiatives for different universities. MOOCs like edx is a superpower for the students. Students can learn, gather knowledge, and ern credentials from top-notch universities that are going to help them to build a sustainable carrier.
“Ultimately with some courses, the large lecture may disappear — replaced by smaller classes to provide feedback, allow better discussion and to focus on applying new knowledge through problem-based learning.” — STEPHEN KING, Economics Professor at Monash University
In this case study, I am going to tear down the UX issues of a famous MOOC platform “edx” and with the help of a data-driven design approach, I tried to fix the issues. The outcome of this case study is a brand-new version of edx with prominent branding, cutting edge features, gamified interactions, and engaging UX.
A quick walkthrough of the existing edx application 👇
My Role & Responsibilities :
I am responsible for field study, UX research, Quantitative and Qualitative analysis, UI designing & Usability testing.
I don't just designed the whole application , but also find ways of improving the product as a whole.
The backend Story:
It was the month of December when I was wanted to enroll myself in some courses offered by edx. The very first moment I entered their mobile application I had noticed a couple of straightforward usability issues. I am a UX researcher & product designer so, I always have the motivation to dig down into the root causes of the problems. I had enrolled myself in a couple of courses and started learning from them. After using the application for almost 2 hours I can feel that the application is a junkyard of issues. The next moment I went to the Play Store to check the reviews of the users and the results are very much predictable. So, Let’s redesign the UX of edx 👩🔬
The Process ( Let’s be the Sherlock Holmes):
Throughout the project, I have used Human-centred-Design principles to improve the UX of the application. I have also used design thinking and competitive landscape analysis to innovate a couple of features for edx. This is a very complex project. Here is a high-level overview of the project👇
What is the actual problem?
As of 20 July 2020, edX has around 33 million students taking more than 3,000 courses online. edX also has over 6,000 instructors on the platform with a presence of 196 countries represented worldwide. Despite having a huge student base, edx is completely failing in the game to provide cutting edge features and a smooth user experience to the users. More than 90% of the students are unable to complete the courses. Some researchers have already analyzed the situation of edx. From the below reports, we can see the decrement in course completion with the increasing time.
A couple of research and articles had already addressed the root causes for the massive decrement in the course completion. The root causes are mainly spread from the lack of engagement with the students and motivation to pursue it.
Find out the problems:
Being the Sherlock Holmes of this case study, I have used the very famous principles of Observation, Deduction, and Analysis😀. Bad UX is one of the root causes behind lack of engagement and motivation. Let us dive deep to find out the usability issues of edx
Analyze the User’s review:
I had dug down into the user’s reviews to find out the problems they are facing. I have been able to find out a wide range of problems just from the review analysis. The review analysis was completely performed on Play Store. Here is the list of the insights I have found out from the early-stage review analysis —
(a) Lack of features (b) Clumsy User Interface (c) Hard video navigation options (d) Unorganised catalogs & home screen (e) lack of Progress tracker (f) hard to search for new courses
Baseline insights: usability testing
From the review analysis, I got a basic idea about the usability problems but I wanted to dive deeper (Fun fact: I am a mountain Guy ⛰️). I have planned and prepared a research plan which consists of mainly two types of research (a) Qualitative research & (b) Quantitative Research.
Qualitative Research:
I went to a nearby restaurant to perform the Qualitive research. I took a sample size of 10 people for my observation and asked them to perform certain tasks using the existing edx application.
The goal of the research is to — (a) Find out the usability issues faced by sample users (b) validate my assumptions and review insights (c) Gather insights about their thought process
Success Metrics — (a) Ease of use (b) Engagement and satisfaction (c)time need to finish a specific task.
Wanted to know more about how I have conducted the Research? Acees the full Reseacrh procedure from here👈
Quantitative Research:
I have also performed one to one interview to gather quantitative data. I have total 20 participants in the interview. From the quantitative analysis data, I got some crazy insights for different features of edx. Now I have enough data to quantify the usability testing results.
Quick Survey:
One of the key insights that I got from the qualitative analysis was that the ‘Login” section of edx was not properly designed. The composition of the login page is not well maintained which leads to an aesthetically unpleasing UI. Even students hardly use their “Microsoft” account for login but this menu still presents itself in the window. edx has completely forgotten to prioritize the Log In options. So, I did a quick survey to understand what kind of accounts people generally use for login or Sign Up.
Analyzing the Insights:
In this phase, I analyzed all the insights from my usability testing and user study to make data-driven decisions. With the help of the analytics, I can validate my assumptions and find out the usability issues of edx. As edx is a complicated application with unoptimized information architecture, I was able to discover few very critical issues which may be the potential cause for the bad UX, lack of engagement, and motivation.
Competitive Landscape Analysis:
Before redesigning the application, I took the opportunity to analyze the market strength of edx. Using competitive analysis, I got the idea about the features that edx is lacking and also the features we should incorporate to make edx a game-changer in the E-learning industry.
SWOT Analysis
Competitor Analysis
I did a quick Competitor analysis to know the strength of the available learning platforms. Edx will have to do something out of the box to beat the competition and make their platform more interactive.
Data! Data! Data! I can’t make bricks without clay!
Sir Conan Doyle’s famous fictional detective, Sherlock Holmes, couldn’t form any theories or draw any conclusions until he had sufficient data. Now I have gathered data to work on the design part. Uuuu Huuuu !!🤗
Ideation:
In the ideation phase, I use Design thinking principles to understand the scenario and proceed accordingly. To start out the ideation phase, I conducted an affinity diagramming exercise to examine emerging patterns and groupings of objects, materials, and activities around Online learning and capturing. Based on the affinity diagrams and my previous research insights, I realized that to make the application supper engageable and interactable I must use something out of the box.
Research On Gamification:
Gamification of education is a strategy for increasing engagement by incorporating game elements into an educational environment. The goal is to generate levels of involvement equal to what games can usually produce (Fardo 2014). The main goals of gamification are to enhance certain abilities, introduce objectives that give learning a purpose, engage students, optimize learning, support behavioral change, and socialize.
Studies have already proved that gamification is a great way to build engagement in MOOC platforms. Even a researcher has already published a work on edx where he used gamification to increase user engagement. The result of the lab test is a 28% increment in the course completion and a more engaging experience.
Target Audience :
edx has a huge amount of audience base. Students from more than 190 countries are a part of edx. Engineers, Doctors, CEOs, Teachers, Scientists, Researchers, hobbyists everyone is the part of edx learning team. Mainly students from developed countries are dominating this platform with the highest number of enrolments but it didn’t mean that learners from under-developing countries are not a part of edx. A massive chunk of edx’s audiences is from developing / under-developed countries.
Personas:
Using data collected throughout the research phase, I put together a set of 4 illustrated personas to represent some of my key users’ needs, goals, and state of mind. I have also counted the outliers and stress cases and designed personas according to them.
Storyboarding:
I have created a storyboard to better understand the scenario & problems of the users. The storyboard contains animation with respect to different situations.
Wireframing:
I have designed rough pencil sketches of the screens..
Branding:
The existing edx application has dull colors and inconsistent branding. The dull colors are one of the main reasons behind the aesthetically unpleasant UI. The newly redesigned version has lots of Saturated colors. The primary color is consistent throughout the UI.
User Journey Mapping:
Let’s compare the user flow of the previous version and the redesigned version with the help of a scenario.
Ramesh and Suresh both are in their freshman year of college. They are studying computer science and engineering. They want to get placed in a fortune 500 company. So, they installed edx on their smartphone to learn the new cutting-edge technical skills. Ramesh has the older version and Suresh has the redesigned version. They have already enrolled in a course. Now their task is to navigate to the ongoing video lecture.
The information Architecture of the existing edx application is not optimized. One has to run through extra unnecessary steps to perform a task. Even some options are not prominently visible on the UI.
Let’s understand the usability issues and their solutions by comparing both user interfaces.
The existing UI is very cluttered, and there is no direct option to jump into your ongoing video which is a horrible user experience. Even if you have come through the video tutorial window then you will find that there is no way to recognize your ongoing lectures.
If you forget about your progress, then you have to run every video to find out the ongoing one. That’s a very serious usability issue in my opinion.
The Very First Screen:
The very first screen of the existing edx application is the login/ register page. You can also search for different courses directly from this page using the search bar. But a huge portion of this page is unused. The search bar is good for someone who already has some idea of what to study but for a newcomer, it will be a little hard to navigate.
So, I have taken the opportunity to redesign the page. I have maintained consistency through the screen with proper composition and added a feature from where the newcomers can navigate to the course page using the Domain-specific options.
The Login/signup screen:
From the quantitative analysis survey, we can see that hardly anyone uses their Microsoft account to login into any E-learning platform. Most people use Google/Mail/Facebook account for login and signup.
The existing Sign in/up account isn’t very much aesthetically pleasing because of the unusual composition. The buttons are not properly designed, UI seems to be from a 90s movie. Even you can’t skip from the sign-in/up menu on the existing screen.
To address the needs, I have redesigned this page with only the necessary options. Minimal cluttered free UI with perfect-sized buttons and trendy looks. One can easily interact with the options and navigate through the UI.
The Search Page & Filter
When I am performing the qualitative analysis, I found that some users find it difficult to use/navigate the search option in the existing edx interface. The search page also contains buttons of imperfect sizes.
The Filter option is very cluttered. The checkboxes are small and sometimes it becomes hard to distinguish between different options quickly because of the seer cluttered. The filter option also has a numbering system. This number reflects the number of courses available in the same domain. From the qualitative analysis I found out that users are hardly bothered about the numbers but because of the numbers, the UI seems a lot more cluttered.
In the redesigning session, I sincerely have taken care of those issues. I just omitted the unnecessary features and redesigned the whole experience. The filter option is now much more clearer and interactive. The buttons and checkboxes are also designed according to the standard laws (Fitt’s law).
The Enrolled Courses Page:
The enrolled course page of the existing UI is very cluttery. This page also lacks some of the important features like Course Unenrolment, Progress Tracking of Individual courses, Reset deadline option, switching account between personal account, and organizational account.
The main concern is the extreme clutter which makes the application less pleasant and the absence of the Unenrolment option.
The redesigned screens are completely clear and minimal. Zero clutter makes the UI physically appealing and the availability of the important options is the icing on the cake.
The Course Content Page:
The existing course content page is very hard to navigate. From my usability testing, I have found out that most users face problems interacting with the course info screen. The edx screen is monotonous and clumpy. Options are not properly prioritized. One also has to face a problem to find out the course specialization.
This screen is full of critical usability issues and needs to be addressed. In my designs, I have tried to make them as minimal as possible.
In the existing edx application, it is very hard to track finished or ongoing course videos. So, in my design, I have introduced an Icon highlighting system to provide information about the course progress
Video Player:
The present video player UI is lacking multiple features and the icons are also inconsistent. The weight and alignments of the icons are not regular. The media player lacks the resolution control feature. the mini player also not supported which sometimes hindered the user's experience.
From the usability testing, I found that there is no need for captioning when we have the future of video transcripts. Also, the transcript progress slider is not properly visible.
The redesigned Video player is full of all the necessary features. From video speed controlling to the mini-player, everything which is necessary is available. I have also removed the captioning option as the transcript option is enough to fill the need and provided a separate feature to control the resolution from the video plating window itself. The transcript has a re-branded slider and progress bar.
Engagement through gamification:
Some researchers had already published the need for gamification in E-learning platforms. A specific research paper had addressed the needs of engagement for engaging and interactive learning in edx. With the help of gamification, we can engage our users and help them in their journey to learn and complete courses.
“Good design is like a refrigerator — when it works, no one notices, but when it doesn’t, it sure stinks.” –Irene Au
Let’s design the features which can make edx stand out from the race and increase the user’s engagement. From the literature review insights, I am pretty sure that I have to use gamification to improve the efficiency of edx. I have planned specific features and designed them accordingly🙃👇
(These features are not available on the current edx application)
Energy Score:
When students are able to finish a course, he/she will get a certain amount of “Energy Points”. The user has to slide the circular bar from the notification to get their points. The more point they ern, the more will be their chances of rising on the leaderboard. Students can track their progress and leaderboard from their profile option.
Performance Tracker:
Performance Tracker is a one-stop solution to measure your progress, active days, and performance. Using the pie-chart student can track their course performance. They can move the chart and play with its perspectives.
Active Day is a feature that will help the students on their most efficient days. This feature will count only the days when students will be active for at least 1 hour in the application.
Energy Graph will help the students to track their Energy Coin collection using a graphical visualization. Students can see their energy coin collection with respect to different dates. The X-axis of the graph is representing the Days and Y-axis is representing the Collected Coins.
Additional Features:
I have also designed some additional features which will help edx to become more student-centric and engaging.
Sync Course & Track Course Schedule:
Sync Course will help the students to Sync their assignments, projects, and important deadlines both manually and automatically. Students can use the calendar for manual syncing. With the help of Automatic Syncing, they can choose different courses and sync accordingly.
Musiclock & Gesture
Musiclock will help the students to track their effective study hours using the inbuilt stopwatch. One can also play soothing sounds for better concentration and engagement. Swipe Up Gesture will help the user to quickly access a couple of features just using swipe.
Design Showcase:
I have designed a couple of more frames that I haven’t showcased in the above-mentioned part. Let’s jump into the designs to get more ideas about the brand new edx.
High fidelity wireframe:
Final Design👇
Usability Testing with Prototype:
I have designed an interactive prototype from my design for user testing. A mix of two different usability testing methods was used (Quantitative Analysis and Questionaries) to evaluate my design and prototype. The interview was done with 5 users where I asked them to perform 9 different tasks (Fun fact: The interview was done on a random bus stand😀). I had set a different time limit for the different tasks according to their level of difficulties (It’s completely hidden from the users).
The goal of the research was to — (a) Evaluate the redesigned edx(b) validate my assumptions and review insights © Find out any new usability issues.
( Access the full report from this link)
Conclusion:
The users had great importance and role in this case study. The whole design, testing, and evaluation are based on data-driven information. This was one of my favorite projects and I worked passionately to unblock the issues. My love for User research and designing has grown exponentially from this case study ❤️🔥. This project was by far my best learning experience because this helped me to-
Understand the users: This is the most important takeaway for me from this case study. I find the proper explanation of why WE! = USER.
Learn from data | Design from data: Data is the ultimate fuel. Data has the answer for everything. In the process of building this case study, I have learned how to gather data, how to analyze the data, and how to find insights from them.
Review Research papers: Reviewing a research paper isn’t an easy job but now I am confident enough to find proper insights from a research paper. Because of the case study, I have learned how to review research papers from different domains like Psychology, Computer Science and Human-Computer Interactions.
Conduct research and testing: I have learned how to form questions for User research, how to conduct research, How to talk to users, and how to find insights from users’ behavior.
(I had forgotten to mention that I have also learned how to spend sleepless nights😂)
&…. Now it’s time to wrap up the case study
I hope you guys found the case study useful, informative, and innovative. Feel free to hit me up on any social media platform if you have any questions, suggestions, or opportunities for me. I would be more than happy to have a conversation with You 🦸
Thank you very much for reading. Don’t forget to check out my profiles
