UX/UI Case study - CourseSpace


CourseSpace is a learning platform that offers online video courses on various topics, e.g. IT, business, programming. Industry professionals teach classes in a fun and practical way. Students receive the certificate after the course completion. The target audience is adults with busy schedules and interest to increase their knowledge in their free time, probably in the evenings and at the weekends.


Business goal vs. user’s goal

I started with defining the business and users goals and finding the intersection between them. This first step is very important because it creates the base understanding that led my design decisions throughout the whole project. The business goal is to promote newly released courses and increase the number of new member sign-ups. The specific conversion goal is to gain 500 new sign-ups for in the first month after the release. The main user's goal is to expand their knowledge to step-up their career and learn in a flexible, easy and fun way. The mentioned intersection is creating the landing page with repeated value propositions (stressing the benefits related to flexibility, simplicity and having fun) leading to the CTA to sign-up.

Mockup
Final design

Research

The next step in the project was to conduct the research by exploring a few competitors of similar platforms, analysing their UI/UX, user flows and key features. I looked at Udemy, Skillshare, Lynda and Coursera. The main point of interest were weaknesses, so the CourseSpace could provide a competitive advantage that other platforms does not offer.

Competitive analysis research
Competitive analysis

User interviews and user personas

With the goal to find out what are the users and their pain points, I have conducted interviews and usability testing. In the interview part, I asked users a few questions and documented the answers. During the user testing part, users searched for competitors websites and I observed their behaviour.

Following questions were asked:

  • How often are you taking online courses in general?
  • Why are you taking online courses?
  • What do you want to learn?
  • How often do you want to learn? How long does it take to finish the course?
  • What is important/motivation for you?
  • How do you stay motivated?

I created personas with the goal to empathise with users and stay focused on the key users during the whole process.



User persona Emma
User persona 1
 User persona Fabian
User persona 2

User journey mapping

User journey is a series of steps that map out how the user might interact with the CourseSpace landing page. The following steps represent the user journey of our user personas:

These user journeys helped me to pinpoint important breakpoints and work on opportunities to address users thoughts and feelings. User journey also ensures that the final landing page is consistent with both business and user’s goals.

User journey Emma
User Journey 1

User journey Fabian
User Journey 2

Information architecture

Information architecture represents the organisation and structure of information. The navigation is organized in a way that helps users to complete their task effectively and easily. Aiming to reduce the cognitive load, the navigation is very simple and straightforward.

Information architecture
Information architecture

Key Findings

Based on user interviews and user journeys, I have collected all observations (direct quotes, user goals, user actions and pain points). I could see some patterns and found key insights that were used for creating wireframes. Those are the key findings:

  • Users need the flexibility to learn anytime and anywhere they can and have options to choose a specific course they prefer
  • Users expect benefits after finishing the course; e.g. certificate for their CV and tickets to conferences where they can network
  • Users are cautious where they spent their money and appreciate the free trial month
  • Users like to read reviews to help them to decide which course to take
  • Users decide based on beautiful imaginary

Wireframes and Mockups

The landing page is structured and organized with the aim to attract new visitors and keep their interest until reaching CTA. The hero image is the most important section to attract users and guide them to scroll down. The clear and simple navigation helps to direct users where they intend to go. The landing page continues with presenting competitive advantages of the learning platform. Users like to see how it works - how it will look and what they can expect. The intro video is the perfect way to show answers to all the commonly asked questions.

Low fidelity wireframe
Low fidelity wireframe

Wireframe
Wireframe

The next section addresses the main users' pain point of complicated and overwhelming platforms for learning. Users need easy access to flexible learning anywhere and anytime they can - the mobile app is the best suitable solution. The website will also have a desktop app version where login information will be saved for easy access.

Users need to know what is the estimated time to complete the course including information about time spent on exercises (called challenges). On that note, users like to have the option to fill out the questions voluntarily and skip them if they don’t want to spend time on that. This information is visible in every course overview.

The recommendations and reviews are significant for the user decision process. The landing page includes the latest reviews part. The user can use the filter on the search page to select courses with the best rating or read negative comments to be sure not to spend time on the course that does not meet their needs.

Filters
Filters

Users like to see they have a lot of options and showing the variety of topics is going to influence their decision to sign up to the website. Users are also cautious where they spend the money, so the free trial month is something they appreciate to gain their trust. Based on user interviews I have found out that users do not use discussion board in regards to search for answers or ask a question. The chatbot is an excellent solution for finding a quick solution.

The website is also presenting their best instructors to prove the value of the learning platform. Users can look at their social media to earn trust. Users appreciate receiving the certificate to have a lasting reward for taking time to successfully finish the courses. Yearly conferences are another reward for successful students to meet other students and network and ultimately create communities of like-minded people.

Instructors
Carousel showing all instructors

Landing page ends with the final CTA to start free trial and footer. Clicking the GET STARTED button will open the pop-up window with the registration form.

UI elements
UI elements

Sign up window
Sign up window

Summary

I focused on creating the landing page that accomplishes the primary goal of joining the learning platform in free month trial. I created both desktop and mobile version to provide the flexibility for the user to use the preferred device.

  • Creating app to have the flexibility to learn anytime and anywhere
  • Including reviews on landing page and also star system to see favourite courses, possibility to filter courses based on reviews and read comments
  • Including information about certificates and conferences on the landing page
  • Providing the free trial to gain trust
  • Creating a simple and clear navigation
  • Using beautiful and big images

Mockup of final design
The final design