Creative Course Website

Responsive Website • Personas • Wireframes • Research • User Interface • Prototyping

Overview

Creative Tutorial is a platform that offers free design courses on various topics. Students watch courses videos primarily to improve design-related skills. The typical user is between 16-45 years old, including college students, and workers who seek for improvement and career transition. The goal of Creative Course is to make learning process fun and motivate learners.

My Contribution

I was the only designer on the project so everything you see I created myself. I was involved in everything from defining personas, conducting user research, usability study, wireframes, prototypes, and all the way to creating final UI designs.

Type:
Independent student project completed in the Google UX program
Timeline:
8 Weeks, Oct - Nov, 2022
Tools:
Figma, Adobe XD, PS
Creative course website

Challenge

Online learning is great for people who are advancing their education while working. Students start losing hope once they find difficulty in online learning. It requires motivation to complete tasks and engage students with their learning.

Solution

Design a website to be user friendly by providing variety of design topics and offering a discussion forum and learning goal settings to motivate learners.

web home image
Web filter image
Web course page image
Web learning center image
Web classroom image

Design Thinking Process

Empathize-Define-Ideate-Prototype-Test
Research

I conducted interviews with 5 participants about their experience with booking musicians. All participants were between the ages of 20 to 45. Interview questions were:

  • How often do you take online courses? When you do, what is your motivation for doing so?
  • What challenges do you face in the finding and viewing process? How does this make you feel?
  • Is there any way in which you feel these challenges could be resolved?
  • Can you describe your current schedule and how long you spend on taking online courses?
Personas

Two personas were generated by five interviewees. They were fictional users whose goals and characteristics represented the needs of a larger group of users.

web persona-1
web persona -2
Journey Map

The journey map were generated based on Helen's story. The main goal was to book a pianist for the company annual event quickly and efficiently.

web journey map
Findings
1

Navigation

  • Busy workers don’t want to spend too much time finding and viewing tutorials
2

Motivation

  • So much flexibility often results in inaction. Learners lack of motivation to complete the entire course.
3

Lonely experience

  • Online learning websites don’t provide an engaging  learning experience.
4

Technical difficulties

  • There are compatibility issues (with operating systems, browsers or smartphones), and students don’t know how to continue.
Crazy Eights
crazy 8-2
Crazy 8-1
Site Map
web site map

Prototyping

prototype process
Paper Wireframing
web paper wireframes
Paper wireframe 
screen size variations
3 screens
Lo-fi prototype
web lo-fiWeb lo-fi prototype
Usability Study

Usability Study Findings

  • Continue Learning - There wasn’t an easy way to access to my recent played tutorials.
  • Contrast Ratio - Poor contrast ratio
  • Consistency - Names weren’t consistent.
Iteration
Iteration After Usability Test:
  • To encourage users to spend time learning and complete the tutorial, I add continue learning section on home page.
  • Adjust color to pass WCAG, so users can read text easily.
  • Change Headings and subheadings to ensure consistency.
web iteration image-1web iteration image-2
Hi-fi prototype
web hi-fiweb hi-fi prototype

Final Product

Other Work:

Musician Booking App

Save Elephants App & Website

Magazine pages images

Real Estate Magazines