Chu-Ting Fan © 2019

  • email
  • LinkedIn
  • Twitter
  • medium
  • dribbble



Coursmart is a platform designed to help users find the best online courses for them, which is just like Yelp! With Coursmart, users can easily navigate through thousands of online courses, based on not only key course features but also user ratings and reviews. Furthermore, users could also join online learning community connecting with their classmates in order to post questions, answer others’ questions, and easily stay up-to-date with the courses they are taking.


The goal of this project is to provide online learners with a powerful online course search engine and a vibrate online learning community to overcoming obstacles of continuously taking courses, and managing their learninprogress.


Aug. 2016 - Dec. 2016 | Austin


Qualtrics, Balsamiq, 

Marvel, Mac Sketch, InVision,, Slack

My Contribution

Product Concept


UX Research

Interaction Design

Low-fi Prototyping

Usability Testing




MOOCs, the acronym for Massive Open Online Courses, have been heralded as the next big revolution in higher education. They are transforming the educational landscape, with millions of people already enrolled in hundreds of courses from top institutions through various provider platforms. However, online learners find out that with various course platforms and online courses, it is quite difficult for them to find the right online courses which meet their needs. 

In order to save several hours for online learners to discover whether the courses are designed for them, we decided to design and prototype a crowdsourced online course review platform.

Problem & Goal​

Currently, with hundreds of new courses coming online every year and little or no feedback about their quality, the issue of how to find the courses which are right for an online learner taking into account his/her schedule, interests, and long-term career aims becomes pressing.

For this project, our team aimed to assist online learners in overcoming obstacles when taking online courses. Specifically, our goal is to provide online learners with a powerful online course search engine and a vibrate online learning community.

This project was completed for a course in Interaction Design taken at the UT School of Information.

Design Process

The design process of this project can be illustrated in the following graph. For this project, our team conducted IDEO design thinking processes. I took the lead for Balsamiq wireframes, making the design deliverables while communicating internally with my four teammates.


Understand our users

In the contextual interview phase, 5 people were interviewed. The interview questions were designed to gather information about the interviewee’s online course selecting and taking behavior and their experience with writing and sharing courses ratings and reviews.

Step 1. First Round Contextual Interview

In the user research phase, our team conducted 5 contextual interviews to gather qualitative data from the online learners. After the first round contextual interview, we found more questions we wanted to get answered, so we did a second round in-depth interview with other 16 online learners. On the quantitative side, we distributed a survey on Qualtrics and ended up getting 76 valid responses. Furthermore, to make data meaningful, we did data visualization and analysis for our survey results and affinity diagram on qualitative data we collected.

Step 2. Survey

We launched a survey created in Qualtrics and posted it from Oct. 14th to Oct. 23rd. We were motivated to find out online learners’ experiences of choosing and taking courses, including why they would consider taking a course, why they drop a course, and whether/how they share a course with others.


There were 76 respondents completed the survey. By analyzing the results, we had a better understanding of trends in online learners’ needs: As a platform for helping online learners find and manage courses, it should arrange courses according to the user’s academic and professional background; Ratings and reviews from users who have a similar background could benefit online learners by saving their time to search for a desirable course. We also found that there were two challenges in our design: one is how to motivate online learners continuously, and another is how to help online learners manage their learning progress.

Step 3. Second Round In-depth Interview

From the first round contextual interview, we got some basic ideas for online learners’ course searching and learning behavior. The second round in-depth interview we wanted to understand users needs when they decided to choose a course better, focusing on the searching and finding design feature. We asked a bunch of questions to dig into factors like what they cared about when they made decisions and what features would make a class fit their needs.

Discover users needs, pain oints, and insights

After gathering the data from the user research, we used three methods, affinity diagram, user journey map and target audience, to analyze interview and survey data, making sense of users' needs and defining the features of our product.

Step 1. Affinity Diagram

  • Lots of people take online courses because some courses are only provided online or the topics are related to their research.

  • Some people take online courses for self-improvement purpose or their interests in some subjects they haven’t learned before.

  • Most of the users search courses they want from the platforms they have used or from search engine directly and they don’t know other methods to search a course.

  • A lot of people decide to take the courses just because they see a good advertisement from somewhere.

  • Users like to see the syllabus, table of contents and keywords to find the course which meets their needs.

  • The instructor and the university are also factors that could influence users’ decisions to take a course.

  • Users prefer to see others’ reviews and recommendations when they are going to choose which courses they would like to take.

  • Users feel the difficulty of a course is very hard to measure.
  • Users feel the online courses lack the interaction between instructors and students.

  • Users would like to read courses reviews but they hardly write a review.

  • Users are more likely to share what they have learned in social media.

  • Users would have face-to-face recommendations with friends about a course they like rather than other methods.

Step 2. User Journey Map

Step 3. Target Audience

Generate product features

In the ideation phase, we gathered our user research data and generated some insights as the foundation for our design brainstorming time. During the group meeting, we used a storyboard to give a scenario that how Coursmart, our design product,  interacts with the target audience and helps them to overcome the problems they met.  From storyboard, all of us gained a stronger consensus of the goal of our design and the pain points that we aimed to solve for our users. Therefore, we generated our required features for the website and its function, and each of us came up with our own designed wireframes of the screen before we collaborated our final low-fidelity prototype.

Step 1. Storyboard

In our storyboard, we wrote up a story about the interaction between Jordan and Coursmart, including the problems he met, the way he found out Coursmart, and how Coursmart solved his problems and helped him to succeed. This storyboard helped us to identify the challenges we want to tackle and crank out the solution in the next step.

Step 2. Required features

From our user research data, we gathered multiple insights that can inform our design and then went through a convergent process to define the required features we should definitely have in our final product:

  • Search for courses -- help our users get a broader view of the potential candidates and have a better decision-making process.

  • View course details -- the more details the courses provide, the more users could have a deeper understanding of them.

  • Give reviews -- motivate people to not just read other’s reviews but also contribute to the community and exchange the information.

  • Share experiences -- give users a common classroom interaction in our design to help users to engage more in online courses.

  • Manage different MOOC accounts -- integrate a central platform that users can access whenever they need to take online courses. 

  • Online community -- build an online community to mitigate users' feeling of isolation and provide motivation to keep the online course progress.

Step 3. Sketches

From the above user research data collections and our defined required features, we created our sketches for the low-fidelity prototype. In this stage’s sketches, we mainly focused on the homepage, the search result page, the course detail page, and the user profile page. Sketches helped us to express and exchange ideas between group members and formed the design of our website.


Iterative design

After the sketch phase, we generated four rounds of prototyping and testing during our iterative design life cycle. Our low-fidelity prototype focused on verifying the product concept and features. It was created in Balsamiq and was tested through Marvel App. Medium-fidelity prototype put emphasis on task flows and the interactions. We also add the new feature of the online community which is basically a study group where users can ask questions and see the progress of others. In the high-fidelity prototype, we colored the website, added content details (like feature descriptions, course details, and review contents) and make more animations to it. 

Low-fidelity Prototype

Mid-fidelity Prototype

High-fidelity Prototype

Usability testing

Totally, we conducted 4 four rounds of usability testing following each round of prototyping. Each round we had different focus points and we got useful feedback from our participants. The first two rounds, our low-fidelity, and medium-fidelity testing, we did them face to face. We tested 6 participants in low-fidelity testing and 5 in medium-fidelity testing. And the last two rounds, our high-fidelity testing, we did remote testing using Because we changed our testing methods from in-person testing to remote testing, it was important for us to make sure all tasks were not only fixed based on the feedback and responses we gathered before but also guided and asked appropriately. Therefore, we separated our high-fidelity testing into two rounds. First round testing included a dry test with 3 participants, and a formal test with another 3 participants. And after the first round testing, we fixed some tasks descriptions and tweaked our high-fidelity prototype based on the user feedback, and recruited 6 more remote participants as second-round usability testing participants.


During the high-fidelity testing, we adopted the System Usability Scale to evaluate Coursmart's usability and our product got a score of 82.5. The score points out that people love your site and will recommend it to their friends.

·  ·  ·
What I learned

Project Feedback

For this two-month project, our team gave a final presentation and got feedback from UX designers at Dell.


"This was an excellent and thorough job. It was unusual and refreshing to see a well-designed website as a project in this course, as opposed to the frequent mobile app approach."     

-- UX Designer at Dell


"Your work was polished and well executed throughout. You ended up with a design that presents a ready to go front end for the information system that would support it on the back end."   

-- User Experience Engineering & Insights Research Lead at Dell


Because of the course schedule limitation and based on the feedback from Dell panelists, our team would like to do the following few things for our next steps:

  • Add shopping cart -- this feature could help users save their interesting courses for later use when they are browsing the course lists. 


  • Go front end for the information system -- because the product we have done is a prototype and we aren't sure if this could actually work on in the real world. We would like to partner with developers to code the real product.

Lesson Learned

Going through the whole process, the most challenging lesson I learned from this project is how to collaborate with teammates and work as a team. When we finally finished defining our features and moved to design phase. Our team had different opinions about designing a "load more" function or "pagination" function for scrolling the website. We can't come to a consensus during the several time discussions. However, we tried to test these and ask users for their feedback. I realized that as a UX designer, we always have the choice to let users speak. Moreover, since everyone in our team wants to provide the most user-friendly product for people, even if we have different opinions, we could still find out the best solution in the end because we have the same goal and mission.