Study smarter, not harder.
Springboard UX/UI Design
Designer | Self-Led
4 months
Key Skills
UX Research

Paper Prototype


High-Fidelity Prototype

Usability Testing

UI Design

Project Overview
The rise of digital technologies and their prevalence in academic settings has impacted the way students learn. This means that creating tools that encourage effective learning has become an increasingly important task for designers.

The KNOW learning management system seeks to assist college students with a full course load by keeping them on track with their schoolwork and making their studying more efficient and effective.
I felt like I would have had to have been more consistently on top of the material the whole semester... and trying to understand what I didn't understand. Cramming did not help.
The Challenge
College undergraduates often have a heavy course load and frequently get overwhelmed by the amount of work they have to do. The number of readings, assignments, and exams can lead to cramming prior to assessments — which typically results in grades that are lower than desired. Students need a way to efficiently manage what they need to study in order to maximize their time and get high scores.
The Goal
Design a learning management system that allows college students to take control of their studies by enabling them to keep up with assignments, readings, and assessments.
01. Research

This project began with the discovery phase, in which research was conducted to gain a deeper understanding of the existing issues that the KNOW learning management system aims to resolve. This consisted of secondary research to understand the problem space using existing data, a screener survey to gain user insights, and one-on-one interviews to fully grasp the motivations, needs, and goals of college students.

SECONDARY RESEARCH — To better understand the problem space that digital learning technology exists in, secondary research was conducted. My goal was to understand the way college students learn in order to make studying more effective. By reviewing information from academic journals, I was able to understand some of the issues experienced by our users:

81% of college students reported that digital learning technologies helped boost their grades prior to the COVID-19 pandemic

BUT ...

84% of college students believe that digital learning technologies could be better used to improve their education

AND ...

Studies have also indicated that online learning has created problems with regard to multitasking and distraction
Information from Statista and Wiley Online Library
100% of students use digital courseware & 92.3% of students use a computer for studying, in addition to the following information...
Contrary to my secondary research findings, I discovered that multitasking and distraction aren't the main issues for college students. This only seems to occur with coursework that students perceive as being less consequential.
02. Synthesize

After the research phase, I began to synthesize the data obtained from my primary research to find similarities between user experiences. Here, we discovered that the issues the students faced were different from what was found during secondary research. The insights gained enabled me to create a persona and a problem statement to continue the design process.

AFFINITY MAP — After conducting user interviews and re-reading the transcripts, I took the commonalities and turned them into an affinity diagram. I used virtual sticky notes to write down observations and direct quotes from participants. These were then placed in clusters that corresponded to a theme. By organizing them in this way, I was able to visualize the most common issues that college students typically face when studying.

RESEARCH INSIGHTS — Affinity mapping was a useful tool to identify patterns commonly experienced by users and organize common issues by importance. These patterns were turned into research insights, which enabled me to identify three pain points that require a solution:

No. 1
Pace Assignments
Students are often overwhelmed by the amount of required readings, causing them to fall behind.
No. 2
Every student that was interviewed used flashcards as a self-assessment tool prior to taking exams and quizzes.
No. 3
Gauging Progress
Students expressed the ways that they gauge their study progress in order to see what they need to focus on in their studying.

PERSONA — Based on the insights gained in the previous exercises, similarities between our users were used to generate a persona. This is a representation that reflects the shared interests, goals, and concerns of the users identified during the discovery phase. This was extremely crucial in gaining an understanding of real needs and challenges faced by college students.

PROBLEM STATEMENT — A problem statement was generated to guide the ideation phase of the design process.

Olivia is a college student with a full course load who needs to manage her time and keep up with her studies because she wants to get high grades to excel.
03. Ideate

The affinity map and persona developed in the previous phase enabled me to identify the pain points that require a solution and generate a problem statement to guide the design process. Defining the issue in this way allowed for the ideation process to begin.

HOW MIGHT WE's — Keeping the insights acquired during the synthesize phase in mind, I used "How-Might-We" questions to continue ideating. By reframing these insights and turning them into questions, I began to build a proper framework for design thinking. This exercise prompted me to explore the challenges that were uncovered and turn them into design opportunities. The key questions posed during this activity were the following:
How might we encourage students to gauge their study progress?


How might we enable students to use digital textbooks more efficiently?


How might we help students assess their strengths and weaknesses on study materials?

USER STORIES — In addition to How-Might-We questions, two user stories were created to reflect our users, their desires, and their goals. These were largely inspired by our persona, Olivia, and go as follows:

As a busy college student with a full course load, I need to keep up with readings and assignments so that I don't fall behind on my homework


As a student preparing for finals, I need to figure out what material to study so that I get a high grade on my exams

MINIMUM VIABLE PRODUCT — Once the user stories were developed, I created two epics to further examine user pain points. This consisted of outlining the steps required to complete the user goals laid out in the stories. This exercise revealed potential features that users can benefit from, as well as  improvement opportunities to incorporate in the design for KNOW. Defining these steps enabled me to establish the minimum viable product to be created.

SITE MAP — After mapping out the steps required to complete user goals, I started the process of organizing the content needed to perform these tasks. I created a site map to begin thinking about the different screens required for this website and the ways in which they connect to each other. By creating the information architecture, hierarchy was established for the KNOW website.


The ideate phase enabled me to identify potential design solutions by reframing the problem space, as well as recognize potential gaps and opportunities. How-Might-We questions, user stories, and site maps were tools used to start thinking about what is needed to help users achieve their goals. This phase will take these ideas and turn them into a fully functional solution.

RED ROUTE DIAGRAMS — Once the minimum viable product was defined and hierarchy was established, I created red route diagrams to help users accomplish their tasks. Here, I identified key actions and pages that users will take when using our product. They consist of marking readings as completed, taking assessments and and reviewing results, and using flashcards as a self-assessment tool. The red routes — seen in the form of a user flow — establish the most critical tasks for our product's success.

PAPER SKETCHES — The user flow diagram became a website in this exercise, where I used paper sketches to implement the critical tasks defined in the previous step. Concepts in these drawings include ways to gauge learning progress, study tools for self-assessment, and marking readings as completed in order to prevent students from falling behind on coursework and maximize their study time.

PAPER PROTOTYPE — Drawing on the design used in the sketches, a paper prototype was created to test the usability of our digital product. The success of this prototype will be measured by analyzing the ease or difficulty in performing the critical tasks identified in the previous steps.

GUERILLA USABILITY TEST — The final step in the design phase was conducting a guerrilla usability test. I recruited five college students to test our paper prototype in order to identify pain points and ensure that our product needs is easy to use. We sought to find out if existing features are useful and if there are any issues with our red route user flows. The findings were compiled into a report and consist of the following:

5 out of 5 users had difficulty finding the course readings
We need to change the wording from "Module" to something more intuitive and remove the  "Textbook" section from the navigation bar
4 out of 5 users wanted to see a larger schedule on the universal dashboard
We need to increase the size to emphasize its visual hierarchy
3 out of 5 users wanted to see more upcoming deadlines on the universal dashboard
We need to include more deadlines than just "Upcoming Exams"
2 out of 5 users wanted a better way to see which questions were missed in the assessment results summary
We need to list questions on the quiz results
1 out of 5 users was concerned about whether he would have to leave the quiz to review the suggested reading
We need to remove the link to the reading in the answer explanation given while taking the quiz

The previous phase enabled me to realize the ideas that were generated during ideation and turn them into a design solution. By identifying critical tasks and turning them into a paper prototype, I was able to identify pain points that need to be resolved. In this phase, I will be refining the design of our product based on the feedback gathered from the guerrilla usability test.

WIREFLOW — To start the refine phase, I redesigned the KNOW website using the insights uncovered during the guerrilla usability test. To do so, digital wireframes were created. This enabled me to map the product's content and create a strong visual layout prior to creating a high-fidelity prototype. This was turned into a wireflow by using arrows to connect the screens needed to perform critical tasks. This illustrates how users will interact with visual components and move through the product.

VISUAL DESIGN — Once the screen layouts were established using wireframes, the process of visual design began. Because KNOW is a learning management system, I used motifs associated with classrooms in the product interface. This includes blue lines as dividers — which is reminiscent of lined notebook paper — as well as a color palette that is inspired by a traditional wood pencil.

MOCKUPS — The visual design elements in the previous section were applied to our digital wireframes. In doing so, we created high fidelity mockups that enabled us to see what our next prototype is going to look like.

06. Test

The previous phase enabled me to refine the design to better accommodate user needs. Using feedback from the guerrilla usability test, I was able to optimize the prototype and turn it into a more user-friendly product by using digital wireframes to conceptualize the redesign. Once the screen layouts were established, I applied visual design elements to our wireframes and created high-fidelity mockups. These were then applied to the final phase of the design process — user testing.

HIGH-FIDELITY PROTOTYPE — To create a high-fidelity prototype, I took the mockups and connected the screens using Figma. We then performed a usability test to analyze the efficacy of the redesign.

5 out of 5 users had difficulty finding the flashcards
We need to put them in a location that is more apparent to users
This may be due to changing the task order during testing. In the guerrilla usability test, taking the quiz was performed prior to reviewing flashcards. This means that most users may have seen that the flashcards were located in the same page as the quiz and easily found them when asked to perform the task. Because reviewing flashcards was done prior to taking a quiz during this round of testing, users may have found it more difficult to locate them.
4 out of 5 users did not utilize the quiz results summary to review their answers
We need to redesign this to give it greater visual hierarchy
1 out of 5 of users expressed concern about assessment timing with regard to answer explanations
We need to remove them from the quiz to maximize assessment timing

MODIFICATIONS — The first usability study enabled me to use these insights and create an updated design for the KNOW website. These modifications were made according to user feedback to make a more useful product for our target users. To accomplish this, I added a new section to the top navigation, redesigned the "Quiz Results" summary section, and removed explanations from the live quiz — these can only be seen when reviewing assessment results. These changes can be seen below:

USABILITY TEST II — I conducted a second usability test to further refine the design based on user feedback. Using the same script, I tested our modified prototype on 5 new participants and found that the issues were less crucial than those discovered in the previous round of testing. This was determined by the fact that fewer users experienced problems with the updated design. The findings consisted of the following:

2 out of 5 users indicated that the "Content" sidebar was not immediately apparent
We may need to give the reading sidebar more visual hierarchy
1 out of 5 users wanted to see a stronger indicator for incorrect answers on quiz results
We may need to give incorrect answers more visual hierarchy

REFLECTION —The next step would consist of applying design solutions to the next prototype based on the insights gained during the second round of usability testing.

This project has shown me the ways in which user feedback dictates the products we interact with. The more I spoke to users, the more I understood them and the pain points they experienced as they studied for school. By designing this learning management system, I've learned that it’s crucial to listen to the thoughts of as many users as possible to ensure that the product functions for our target audience.

Thanks for reading!