LIMITLESS LEARNING
Overview
The Product
Limitless Learning is an online e-learning platform that offers free quality courses for people without income.
Project Duration
January 2022 - March 2022
The Problem
Many of the educational courses and programs offered today are expensive or require a significant amount of time to complete, which are barriers for many people, especially those without income. Free and low-cost courses sometimes lack the same quality and amount of information as paid courses.
The Goal
To create an online platform that offers quality courses and programs for free to people without income. Learners will be able to take courses at their own pace, receive certificates or diplomas, and apply courses as credits to use for a program at a partnered institution in the future.
My Role
UX/UI designer for the mobile app and responsive websites from project conception to delivery. I carried out user research, created paper and digital low and high-fidelity wireframes, conducted usability studies, then iterated on designs based on feedback.
Tools Used
Figma
GlooMaps
Maze
User Research
Summary
I conducted a user survey to learn about the experiences participants had when taking online courses.
I didn’t ask specific questions about income level (ex. If participants are working, etc) as I felt that answers provided could also be applied to those without income.
Multiple participants mentioned that while free courses were good, they felt that there was a difference in quality between those and courses they had paid for. Most participants also said that affordability was a factor when choosing courses and deciding to further their education, as well as the options to learn on their own time and at their own pace.
User Personas
Based on my research, I created two user personas along with problem statements and user stories to guide me along with the next steps in the process.
Competitive Audit
Doing this competitive audit gave me more insight into what other online learning platforms offer.
I found that learners tend to go with Coursera or Udemy for affordable courses that cover a wide variety of topics, and Udacity is geared to those who want to transition into specialized technology roles.
Starting the Design
Paper Wireframes
For my ideation process for the Home and Explore screens, I sketched out 4 to 5 different screens, then chose the features I thought would be the best to focus on. Next, I combined the features to use in the screens labelled V1 on my paper wireframes.
The process for the My Courses screen followed the same format as the Home and Explore screens with 4-5 options sketched out.
I produced two sketches each for the Course Details and Profile screens as I had a good idea as to how I wanted those particular screens to look.
Digital Wireframes
At this stage, my digital wireframes were the same as the paper wireframes I had chosen to develop. I was open to changing elements around if needed during this process, but for the most part, I stuck to my sketches.
When a user is signed into the mobile app, they will see the last course they were watching. This helps users to be able to pick up where they last left off on their learning journey.
Top rated courses are featured on the Home screen along with the topic category, name of course, and the rating given by other learners. Users can click the Course Details button to read more about the course, see instructors, and the modules included.
Main points of the user flow include looking at course details, adding a course to their wish list, viewing current and completed courses, and leaving a review for a course.
You can view the low-fidelity prototype for the mobile app at the link included.
Usability Study Findings
I conducted one usability study and that was for the app’s low-fidelity prototype. I know that sounds absolutely wild and I know that’s not the typical process I have followed with my other projects for the Google UX Design certificate, but let me explain.
At this point in the course, testing the low-fidelity prototype was required, however testing the high-fidelity prototype for the app was optional. Same with testing the low-fidelity and high-fidelity prototypes for the responsive websites.
(In full transparency, I put a lot of pressure on myself to complete this project and course in a time frame that I had set, so yes - I did take advantage of the fact that those steps were optional.)
With that said, what I did learn from that first usability study was that I was in such a rush to get things done, that I missed the mark on a few things.
My findings:
Participants had difficulty finding the “Leave a Review” button for a course.
While participants did find the My Courses page, feedback was given that the current and completed courses tabs needed to stand out more.
4 out of 5 participants were successful in adding a course to the wish list and it was suggested that an icon or text be added so users would know the purpose of the button.
Refining the Design
Course Details Mockups
Before the usability study
An addition icon represented a button users would press to add a course to their wish list.
After the usability study
In the mobile app, I added a circle behind the addition icon to make the button stand out more. (The desktop responsive website version features an “Add to Wish List” button instead of an icon.)
My Courses Mockups
Before the usability study
This particular screen shows that courses that a user is currently enrolled in. Each thumbnail has a progress bar letting users know exactly how much they have completed in a course, along with a button to go directly to the course itself. There are also tabs for users to switch between current courses and completed courses.
After the usability study
Since a participant’s feedback on the usability study mentioned that the current and completed courses tabs seemed to look like floating text, I positioned rectangles behind the text to emphasize that they were separate tabs. The current tab that users are viewing features the solid green background.
The high-fidelity prototype for the mobile app follows the same user flow as the low-fidelity prototype.
Responsive Website Designs (Mobile, Tablet, Desktop)
I largely kept the visuals consistent with the responsive designs for the websites for mobile, tablet, and desktop devices. I used GlooMaps (a tool that was new to me) to create a sitemap for the responsive website designs.
To make better use of the space given, I rearranged and resized some elements. (Ex. Hamburger menu for mobile and tablet websites, header for desktop website, banner for wish list notification)
The high-fidelity prototypes for the responsive websites can be viewed below:
Accessibility Considerations and Next Steps
For the review screen, I made sure that the labels and input fields for the form were both clear and associated by proximity to reduce confusion.
When a review is submitted, the user is shown a message confirming that the form was submitted. This communicates to users that there has been a change on the page. (Also applies to wish list confirmation)
The mobile app features both a hamburger menu, a bottom navigation menu with icons and corresponding labels, and clear headings to help users know exactly where they are.
I also learned from my work on the Movie Snackr app to check my work with the A11Y Colour Contrast checker to make sure that all colours were AAA compliant.
As for next steps, I’d like to:
Focusing on making the designs more inclusive and accessible. I recently signed up for an accessibility course for UX designers and I would love to be able to apply what I learn in it to make this project better.
Creating a dark mode version of the app and the corresponding responsive website designs.
Adding in a user flow to search courses by certificate type.
Takeaways
“This was a good experience as everything you want the user to do can be completed easily.”
- Study Participant
This was my first time carrying out a project of this size and creating responsive websites for mobile, tablet, and desktop devices in addition to a mobile app.
I was so excited to finally be able to work on a project that has a focus on education and social good. If anything, this project made it very clear to me that this is the type of work I want to do going forward.
Notes
Icons used throughout the project are from Icons8.