Let’s upscale Skillshare!
E-learning mobile app designed for Skillshare as a concept project during a 2-week sprint in a UX boot camp.
Skillshare is an online learning community where anyone can start watching online classes, take a course or even become a teacher. The idea of Skillshare was to close the professional skills gap and provide universal access to high-quality learning. They offer classes for creative people on topics including illustration, design, photography, video, freelancing, and more.
Skillshare saw a dramatic increase in visits to their website during COVID. People seem to be loving the idea of learning new skills as they spend more time at home. Data shows that 87% of millennials and 69% of non-millennials consider career development and learning to be important for job progression. (source: LinkedIn)
With that in mind, there was an opportunity of creating ‘paths’ for people who want to get serious about a particular subject or craft but don’t know where to start when they land on the website.
The ‘paths’ will provide the user with a clear idea of the order to do the modules and what’s required to move beyond levels such as ‘beginner’, ‘intermediate’, and ‘advanced’.
Currently, Skillshare has ‘lists’ but that might be confusing so we were considering merging ‘lists’ into paths or offer both options with a different structure. “Lists” allow users to group the classes that they’ve saved to their profile based on a certain theme or a specific purpose.
Main challenge
Create ‘paths’ for people who want to get serious about a particular subject or craft but don’t know where to start.
New Features to Include
- Ability to view all learning paths and help around choosing what level is right for them.
- Ability to book a 121 with the teacher.
- Ability to see progress and what comes next.
- Ability to display their work on their profile.
- Ability to display ‘badges’ with the new skills learned on the profile.
- Ability to choose how much time to dedicate every day to the lesson.
- Use gamification to keep users engaged.
This project was developed by a team of 3 UX designers: Robyn Bellamy, Lisa Lonoce, and myself, Dora Mucsi during the General Assembly bootcamp we attended in 2021.
I. DISCOVER
We reviewed other e-learning platforms to see what they provide and if they had features that are useful but not available on Skillshare. Learning paths were not that common, neither the option of mentoring. We saw an opportunity here: if we introduce paths and direct contact to mentors or teachers Skillshare could dominate over its competitors.
The most common features that are used on e-learning websites are shown in “Competitive Analysis II.” Online learners are used to certain features such as feedback from teachers, course overview, certificate, etc. If we remove them or they simply don’t exist that might generate a sense of incompleteness. Such feelings towards a product have a direct impact on retention rates.
We also looked at pluses and deltas to identify the things that were working on other providers' websites and we would like to use for our development and the items that are not that great and we would rather avoid. The key insights were that
- Less is more in regards to how much you show on the home page.
- Organisation of the navigation needs to be clear and only a few options.
- Good to have quick overview captions of the course/video so it is easy to have a quick understanding.
Our opportunity
Only half of the e-learning platforms are available or usable on a small screen, however, the survey research we conducted showed that 33.3% of respondents used mobile as a device for learning online. This is was an opportunity for us to develop mobile-first in the design process. The survey research also showed that in the past year 88% of the respondents took an online course to learn something new. Their preferred way of learning was via video tutorials (66.7%) via live classes online (62.5%) and via live classes in-person (54.2%). We received 24 responses to our survey, 50% were male, 50% female and 83% were 18–35 years old.
We wanted to understand more about users’ e-learning habits, pain points, and preferences, so we conducted 9 user interviews. We learnt that the users want clear structure, engaging content; they learn by doing; they appreciate the sense of a community; they would like to be able to interact with a mentor and/or teacher and they pick the course based on recommendations.
II. DEFINE
Based on the above needs and desires, I would like to introduce James, the persona. A persona in UX design is a character, who is created based upon research in order to represent a typical user. Creating James helped us understand our users’ needs, experiences, behaviours, and goals. It is also great to have personas alongside our development phase to remind ourselves of who we are designing for. Meet James!
Follow James’s journey below throughout the navigation, the browsing, and the learning phase to see his main pain points. Based on our research and observations the problem statement is the following:
James needs a well-structured path that keeps him engaged so that he can learn a new skill and enhance his career.
User Journey
I took charge of creating a user journey for James. Review the user journey on the following link: https://bit.ly/33mzWGk
James’s journey starts offline when he decides to learn more about UX. He receives recommendations from friends and goes on Skillshare to look up a course. His journey is fairly troubleless at this stage, except that he might feel a bit apprehensive by all the information and number of choices he sees on the landing page. He finally finds the browse option in the top left corner of the page and he is able to locate the type, of course, he is looking for. How might we help James in the “offline” and “navigation” phases? Our HMWs (how might we’s) could go along the following:
- How might we make our course recommended?
- How might we make it easier for users to find a course or new courses?
Once James found the UX/UI Design courses within the “browse” section he clicks on the section and scrolls through the options. James feels overwhelmed at this stage. There are too many choices. He also sees recommended classes that are “trending” and “popular” but he is unsure why they are trending or popular and the difference between the two is also unclear. He is unsure which course is his level and he wouldn’t want to start a course for complete beginners as he has a bit of experience in this field.
- How might we help James, how might we show learning paths at the browsing stage?
- How might we show an overview of a course in a structured way?
The final phase of his journey is at the “My classes” and “Profile” page. James is excited about starting the course but he gets interrupted and he doesn’t return to finish his class. This leaves him dissatisfied and disappointed. He never completes the courses he started.
- How might we make sure a course is engaging?
- How might we motivate users to complete a course?
Site Map
We created a detailed site map to understand how the site will be structured. Review full site map here: https://bit.ly/33mzWGk
Due to the time constraints (2 weeks) we had to priorities certain features that we wanted to develop as part of this project. We created a priority diagram for this purpose. (Review here.) What are the priorities? At this point we realised how important the research we conducted was. The insights we gained during the user interviews guided our decisions in the priorities.
We considered the high-impact and low-effort features essential and wanted to make sure that those get most of the focus in our design. We decided to develop some of the high-impact and high-effort features as well. The low-effort low-impact features were not prioritised this time. Please see the list of features and their priority below.
High impact & low effort: Essentials and must be developed.
- “Pro” Career Path
- Ability to view all learning paths
- Syllabus
- Skill levels
- See and track progress
- Highlight goal
- Testing/Quizzing
- Recommendations
- Information about the teacher
High impact & high effort: It would be great to be able to introduce!
- 1:1 with teacher
- Mentor
- Gamification
- Live Streams
Low impact & high effort: Will not be prioritised.
- Reminders/notifications to dedicate time to the lesson every day
Low impact & low effort: Nice to have, but not priority.
- Display portfolio/ ability to share work
- Discounts
- Extra resources
- Badges
The features we developed as part of this project are highlighted in dark green in the following site map. The light green highlights are features that are marked and visible in our design but they are not clickable and their wireframes need further development.
III. DEVELOP
The user journey, the “HMWs”, the site map and priority diagram directed us to the design stage of our project.
The first decision we had to make was whether we would like to keep the current structure of Skillshare which is allowing everyone to upload classes and level them as beginner, intermediate or advanced. There is no suggested path for users and the leveling is decided by the teachers individually. We decided that we would like to keep the current structure which is allowing users to learn online but in a less structured way, meanwhile, we wanted to introduce the “Premium” path where users will have to pay more but can get access to a structured learning path suggested by Skillshare.
I took charge of creating a user flow for the “Premium” path. After a couple of usability tests where users flagged that they were not sure about what premium indicated we abandoned the “Premium” title and renamed the path to “Pro”.
We held a design studio amongst the 3 of us to come up with ideas for showing progress, displaying work, badges, and gamification. We took some ideas from the design studio and created our own low-fidelity sketches. The above user flow aided the design process, as in what sequence the frames should progress. We merged the sketches into one master low-fidelity prototype and tested it with 2 users.
Please find the sketches from “design studio” to “usability testing” in high resolution on the following link: https://bit.ly/33mzWGk
We implemented the insights gained during the usability testing into a master sketch which made the basis of our mid-fidelity wireframes.
This is how our design developed from low-fidelity to mid-fidelity:
The mid-fidelity wireframes were tested on 5 users. Some of the feedback we received:
“Everything is too small.”
“How does it work and, what is the difference between the paths?”
“I feel overwhelmed by all the information.”
“Why would I choose the levels, I want a full path!”
“I like the quiz but wouldn’t have expected it to be here.”
“Oh, I have to pay?”
IV. DELIVER
We improved our design based on the above insights and created our high-fidelity prototype:
The Skillshare colour scheme changed. The tertiary neon green colour indicates the basic path (currently in use). We added a type of magenta colour for the “Pro” path and we changed the logo.
Next steps:
- Developing the desktop version. We developed mobile-first following the opportunity we saw in our research (33% of users use mobile to learn online) and following the development trends in the industry. According to our research, 100% of the e-learning platform users use the web on a desktop to learn online. Developing desktop is one of the key next steps.
- Gamification fell under the high-impact and high-effort category in our priority diagram. We sadly didn’t have enough time to add gamification to the “Pro” path. We have great ideas, however! One of the next steps is to create “Games”.
My role, challenges, and learnings.
We took turns in the role of the facilitator, the cheerleader, and the coach every 2 days in our team. I took the facilitator role at the end of the first week and successfully guided the team through some obstacles. It was challenging to create our first low-fidelity sketches. We couldn’t get an agreement on the design so I suggested that we go off separate paths, generate sketches individually, and then discuss the ideas and merge the solution. This worked and we were able to continue with our mid-fidelity wireframes the next day.
- Research is key. Whenever we were stuck and had to make a decision we went back to our research. Which features are the main priority for our users? What serves them best? The key trends we saw in our research were always good guidelines throughout the project.
- Don’t assume that your design is good, just because it makes sense to you. Our initial design is very different to our final one. We thought some solutions worked, but then the user tests showed differently. In the beginning, our assumptions supported the design (based on the comparative research and interviews) but the usability tests showed how users actually think!
Thanks for reading! If you would like to learn more about my work get in contact! :)
