GoCourSE

A One-Stop Web-Based Solution

To Go For The Right Course

Concept ∙UX/UI

Project Summary

Overview

GoCourse is a one-stop web-based platform that makes it simple for prospective students to choose the right course for them. It allows users to preview the course key information, reviews, demo videos and to compare courses from different providers. According to surveys, the need for high-quality offline learning does occur in Singapore, hence GoCourse only provides courses that are conducted in the workshop/classroom setting. My role was to research, design, and test all UIs related to the project.

Timeline

10th - 15th June 2019 (6 days)

Tools

Adobe Creative Suite
Sketch
Invision

My Role

● Project Planning ● UX Research ● UX/UI Design ● Prototyping

Design Thinking Process

Discovery

User Interviews

Comparative Analysis

Affinity Mapping

Define

Problem Statement

Hypothesis

Persona

Prototype

UI Design

Interaction Design

Deskstop Prototype

Test

Usability Testing

Ideate

Feature Prioritization

User Flow

Sketching

Wireframing

Discovery

User Research

UX discovery process began with one-one interviews with the aim of speaking to my target audience who have enrolled in courses/workshops to learn the desired skills/knowledge.

Research Goals

To find out

User motivations for wanting to learn new knowledge or skills.
The decision-making process of choosing the courses/workshops/classes to attend.
The key factors and considerations when it comes to selecting a course provider.
The pain points in their course seeking journey.

To explore opportunities to create a design solution for them

Target Audience

Students and working adults who have taken initiative to attend courses/workshops
Aged 18-50, Singapore residents
Female and male
Single and married

Research Insights

Based on the findings synthesized with affinity mapping, five key insights were revealed:

Users find it difficult to access information about the instructor's teaching style and the learning environment that is lacking in the current market.
Users highly value the reviews from others who have enrolled in the same course before.
Users value the technical proficiency and credentials of the instructor.
Users value transparency of the attendance size as well as the total class size.
Users want to quickly analyze and compare courses at one glance instead of jotting down the information on a piece of paper or toggling between tabs in the browser.

Define

Problem Statement

Users need an easier way to select a right course that is aligned with their interests and expectations because they are not able to find sufficient information to reference on the subject of class size, the instructor's teaching style, and the learning environment.

Hypothesis

I believe that by developing a one-stop web app platform that allows users to preview key course information, demo videos and analyze on a comparison page, we will help them select the right courses that are suitable to them.

Persona

With reference to the findings above, I developed a primary persona, Carole, for the potential GoCourse user and created a storyboard to illustrate her pain point and frustration.

Comparative UX Analysis

I also sourced inspiration and studied direct/indirect competitor products to see how they design for their users. They can serve as creative inspiration for new product features or design solutions.

Ideate

After all the UX research was done, I translated the key insights into several feature opportunities and prioritize them on a 2x2 matrix. The features falling in the essential range were integrated into the MVP (minimum viable product). Later, I began to layout a user flows chart in order to get a sense of how my proposed design solution would work.

User Flow

Sketching & Wireframing

I started to ideate the web page layout with its main features and sketched on papers. During the design session, I was keeping in mind the persona and based my ideas on the potential use scenarios. I also created an interactive prototype for usability testing later by Sketch and Invision.

Figure 1: Ideation on paper

Figure 2: Wireframes on Sketch

UI Design Details

1

3

2

Color Design: I chose to use a combination of Blue (#1B5EAC) and Orange (#F7A41A) primary colors associated with trust, dependableness, friendliness, and enthusiasm to support the brand values.
Using a simple and clear sentence as a signifier that’s easy to read will naturally reach a wider audience.
Using a 3-column grid displaying the top-recommended course options for consistency throughout the web system.

Figure 3: landing page

1

2

A prominent CTA button is placed on every column to facilitate the process of enrollment.
For consistency, using a 3-column grid to make a comparison table of key course information and user's considerations.

Figure 4: course comparison page

3

2

1

Users would be greeted by a video preview that allows them to view the instructor's teaching style and have a sense of the learning environment as well.
Users are able to view the class size and the number of occupied seats.
A dedicated full profile page allows users to find out the more in-depth details of the instructors’ credentials, qualifications, and teaching philosophy.

Figure 5: course details page

Testing

Validation of Design

To test the validity of the proposed solutions as well as seek improvements on usability, I conducted 2 testing sessions with 5 target users using the digital interactive prototype. I tasked them with the following scenario:

You want to learn Python for your own career progression with a budget of S$2000. You would prefer small class size and an experienced instructor with good reputation and reviews.

Please assess which course is right for you.

Outcomes

Task Completion Rate:

All 5 users managed to complete the task by selecting the right course based on the preset preference.

Learnability:

On a scale of 1 to 5 (the easiest), the users rated the task a 4 on average in terms of its difficulty level.

Iteration Process

1

2

3

1. On the search result page, users commented that the price tag font size was overly large that captured all their attention while they wanted to scan other information. As a response to this issue, I reduced its size to match with the course topic.

2. Class size information was not displayed on the previous version of search result page which users were intentionally trying to find out.

3. Bookmark was replaced by Wishlist because users found that it is easier to understand for booking and purchasing items.

1. Users would like to quickly glance at the details of the learning content. Therefore I made it pop out in a dialogue frame when users hover pointer over the course card.

2

1

1. I added the learning outcomes (What you’ll learn) and instructor profile onto the comparison page because users deemed them as the important information to be compared as well.

2. For efficiency of use, user could preview the demo videos on the comparison page to get a sense of the instructor’s teaching style and learning environment.

The Next Steps

Reference from Foodpanda and Grab, I plan to speak to the course providers to gain their perspectives because they are the important stakeholders of the platform and we need to understand their needs as well. By accommodating both stakeholders nicely, I believe that I would gain a holistic understanding of the student-course provider relationship.