Aug. 2016 - Dec. 2016 | Austin


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 an 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 learning progress.

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

My Role

I teamed up with 4 designers to design the end-to-end product. My main contributions included analyzing the survey findings, designing user journey maps based on the research insights, and low-fidelity prototype.



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. 

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.

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.


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 vibrant online learning community.

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.

User Research

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 the other 16 online learners.

Step 2. Survey

On the quantitative side, we distributed a survey on Qualtrics and ended up getting 76 valid responses. 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. Furthermore, to make data meaningful, we did data visualization and analysis for our survey results and affinity diagram on qualitative data we collected.

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. In 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.

Defining Scope

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 for courses they want from the platforms they have used or from a 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.

  • 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 course 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

Ideating Solutions

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

The storyboard helps us to identify the challenges we want to tackle and crank out the solution in the next step, which starts from the problems user may meet, the way he found out Coursmart, and how Coursmart helped he succeed.

Step 2. Required features

From the above research insights, we are able to define the required features 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' feelings of isolation and provide motivation to keep the online course progress.

Step 3. Sketches

In this stage, we further narrowed down the solution 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.

Design Iteration

In the design iterations, overall we generated four rounds of prototyping and testing. The low-fidelity prototype focused on verifying the product concept and features; Medium-fidelity prototype put emphasis on task flows and the interactions. We also add a new feature of the online community to solve the problem of how to keep learning. The high-fidelity prototype colored the product and focus on the real user interactions. 

Low-fidelity Prototype
Mid-fidelity Prototype
High-fidelity Prototype

Evaluating the Usability

We conducted 4 rounds of usability testings following each round of the prototype. We did the first two rounds in person and the last two rounds using to reach more targeted users. 

During the high-fidelity prototype testings, we also 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.

The Takeaway

Project Feedback

For this two-month project, we presented our design and got feedback from a team of 4 UX designers.

"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

"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

Because of the course schedule limitation and based on the feedback from Dell panelists, our team also discussed 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 is how to collaborate with teammates and work as a team. When we finally finished defining our features and moved to the 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.

Other Works

Engagement w: background.png
Hiretual Engagement
Rethink Cyberbullying.png
Rethink Cyberbullying
Interested? Let's build great products together.

Check my LinkedIn, or send me an email directly

Chu-Ting Fan © 2020