top of page
Noted Background Image

Challenge

Accelerated by COVID, remote learning is gaining popularity. Even though several courses have moved online, note-taking trends are lagging behind; many students are still clinging to hand-written notes.

How can I get students in remote courses to align their note-taking preferences with the manner their classes are delivered?

Solution

Noted is a subscription-based website for universities offering remote classes that provides students with an interactive and collaborative way to obtain the best notes possible for their courses.

Research

My research process followed a specific pattern. My subjects were college students who have at least one year experience in taking fully-remote courses in a university setting.

Conduct a survey to find trends in note-taking.

Hold user interviews where I use data from my survey to help carefully choose questions asked.

Create an affinity map and personas to organize all the observations I gathered from interviews

Survey Results

57 Percent

of students prefer to take

hand-written notes.

Interview goal: how can I harness what draws users to handwritten notes in a digital design?

69 Percent

of students were

at least 'likely'

to use another source outside of their notes to study

Interview goal: find what sources do users go to to study beyond their notes

68 Percent

of students rated their

memory capabilities

average or worse when taking digital notes

Interview goal: find out why students believe this, and in what ways could memory be taken into account digitally?

91 Percent

said they

look back at

their notes to study

for exams

Interview goal: find out how can notes be deemed 'good enough' to be used as study material

Research

User Interviews

Below are some quotes from user interviews that really caught my attention and had a huge influence on building future personas.

Interview Image

"Within a class, I feel like some students are strong in one unit, and some in others."

- communications student returning to college in their early 30's

"When I go to study my notes, I feel like I'm constantly re-writing them to add in more stuff."

- undergrad physical therapy major

"I like to summarize all content for an upcoming exam on a sheet of paper, and my friends always ask for a copy."

- undergrad undecided major

"When I'm looking back in my notes, I really want to know where in the lecture my professor discussed that topic for context."

- community college student chasing associate's degree

"If I took my notes digitally, I wouldn't mind if other people had access to them. I just want the option to keep them hidden from certain people if they are lazy."

- undergrad ceramics major

Personas

Affinity Map from Interviews

Through this process, I found that the students I interviewed classified 'good' notes as notes that promote knowledge retention, contain personality, are organized, and can be easily shared with others.

Knowledge retention = easier to remember for test

Personality = notes recognizable & understandable

Organized = easier to find pertinent info to study

Sharability = knowledge can be combined to improve notes

After looking at these four observations from my research, I was able to come to a major insight: what's determined as 'good' notes are notes that are sufficient enough to use to study for a future exam.

Affinity Map

Defining the Problem

Building off of the above insight, I started to develop a problem statement. I used the four W's approach to form this statement.

Who is affected by this problem? Students attending remote classes at a university.

 

What is the problem? Students desire notes that are study-ready for when they are preparing for an upcoming test, and the sometimes disconnected nature of remote learning results in notes that aren't of the best quality.

Where does the problem present itself? When students are attempting to study for an upcoming exam for a remote course.

Why does it matter? More efficient ways to study can lead to better grades in college, and therefore better opportunities for employment beyond education.

College students in remote learning courses need notes that are sufficient enough to use alone when preparing for exams so that they can succeed in their college courses.

Define

Ideation

Competitive Audit

Simplenote
Evernote
Notion
Apple Notes

Once I had the problem statement locked in, I began to analyze my competitors. I knew that none of these websites were strictly marketed to students (like I knew this project would be) so I was aware that these websites would contain features wouldn't fit the user needs required for this design.

Some details I noticed:

Differing start screens for user journey: some websites start the user on a home dashboard screen, while others just threw users into an empty notes document with a blinking type cursor.

Light color palette: these website featured light colors, and all word-processing was black text on a white background. This may seem obvious, but it helped re-affirm that notes need to be VERY readable, and the easiest way to do that is dark text on a white background.

Too many screens vs. too overly simplistic: a few of my competitors offered only the basics of note-taking: word-processing and organizing saved notes. Others (specifically Evernote) offered so many features that it was honestly a confusing user experience. Finding some kind of middle ground was key.

Once I had the problem statement locked in, I began to analyze my competitors. I knew that none of these websites were strictly marketed to students (like I knew this project would be) so I was aware that these websites would contain features wouldn't fit the user needs required for this design.

Some details I noticed:

Differing start screens for user journey: some websites start the user on a home dashboard screen, while others just threw users into an empty notes document with a blinking type cursor.

Light color palette: these website featured light colors, and all word-processing was black text on a white background. This may seem obvious, but it helped re-affirm that notes need to be VERY readable, and the easiest way to do that is dark text on a white background.

Too many screens vs. too overly simplistic: a few of my competitors offered only the basics of note-taking: word-processing and organizing saved notes. Others (specifically Evernote) offered so many features that it was honestly a confusing user experience. Finding some kind of middle ground was key.

Ideate

How Might We?

After doing some research into competitors and having my problem statement ready, I used the 'How Might We?' exercise to generate some ideas to utilize in my future sketches.

Because users needed notes that sufficient enough to study alone for exams, I wanted to focus on ideas that could make studying for an exam as centralized to their notes as possible.

How Might We give students easy access to a lecture video from their notes?

How Might We incentivize students to take better notes?

How Might We include a way to incorporate hand-written designs in a digital layout?

How Might We allow professors to check the accuracy of students notes

How Might We make note-taking a community process?

How Might We make note-taking fun?

How Might We make note-taking like a social media experience?

User Journey

This is the user flow I created to demonstrated to show what it looks like navigating the Noted website.

When I started to create screens, I knew the primary user goal was to take notes, and the secondary user goal would be to help other students who had problems with their notes.

User Journey Map

Prototyping

Early Sketches

I began by creating paper wireframes of the most important parts of the user experience.

In my first project, I was very caught up in paper wireframes being perfect. It resulted in a bunch of crumbled up paper and frustration.

For this project, I began to understand the real benefits of paper wireframes: chasing ideas and not perfection.

Paper Sketches
Prototype

Digital Wireflow (Desktop and Mobile)

These are some early low-fidelity digital wireframes I created for both the desktop and mobile versions of my responsive website. It was rewarding to see solutions for my users' problems come to life digitally for the first time, all aimed at the goal of helping users prepare sufficient, study-ready notes for their exams in remote courses

Desktop Flow
Phone Flow

Iteration

I took early versions of my low-fidelity prototype and received feedback from users through a moderated usability study. Feedback was acquired through 5 questions and a survey. Some of the feedback included:

"Do people HAVE to see my notes"

I got so hyper-focused on ways to share your notes with classmates

Design Response: Added "keep private" as a primary setting when saving your notes, and created a way for users to save their privacy preferences

"I can't tell the difference between a notes document and a lecture video"

Because lecture videos and typed notes are linked, users couldn't tell the difference between the two

Design Response: I added a dark gradient with a profile photo and the student's name layered over lecture videos to show that it's a notes document

"Why would I open the most recent notes"

Recent notes was the top category on home dashboard

Design Response: Users didn't think "recent notes" was a relevant grouping on the home screen. Instead, I featured course names on the home screen.

"Listing students with best grades in class is kind of weird"

Originally, I had a way to contact the students performing the best in a particular class.

Design Response: Instead, I listed the full class roster on the course dashboard. Singling out the best students probably wasn't the best thing to do for the mental health of the students in the class.

Final Mockups

Final Mocks

Solution

By signing up for Noted, students in remote courses can prepare well-rounded notes that are uniquely equipped to use for studying.

Simple Organization

Desktop Organization

Your notes are organized by the lecture videos your professor uploads for your remote course.

Creates more efficient studying because there is no searching for what notes go with what topics when you're preparing for an exam.

Phone Organization

Find the Source

Link any important word, sentence, or paragraph in your notes to a timecode in your lecture video.

Creates more efficient studying because when reviewing notes, students can find the exact context of an important topic in an instant.

Desktop Link
Phone Link

Mark Your Tough Topics

Desktop Question

Have trouble with a concept? Mark it as a question to know to review when studying, or use it as an indicator for classmates to potentially help edit your notes (covered in detail below)

Creates more efficient studying because clearly shows what concepts need targeted review, in lieu of just scanning over a document assuming you have a grasp on everything.

Phone Question

Get (And Give!) Some Help

Your notes feed contains posts from classmates with questions about their notes. Click the link to their notes and answer questions that they have!

Creates more efficient studying because it allows classmates to answer questions with your notes document so you have well-rounded info to study from!

Desktop Feed
Phone Feed
Solutions

Takeaways

This project contained two firsts: it was my first design on Adobe XD and my first responsive design. I know that the Adobe cloud is going to continue to be a huge part of my design career (especially since Figma was recently bought by Adobe!) so gaining in-depth knowledge about this program was essential.

The research phase for this project was super fun and informative. I really tried to separate my experience as a recent college graduate (who took PLENTY of remote notes) from the many university students I interviewed for this project. Being aware of this during my process I think will serve me well in UX research projects in the future.

Finally, I really enjoyed working on a project that is super relevant to the world. Education is paramount and remote work/schooling is surging. Helping students succeed in remote schooling was a rewarding UX project to work on.

bottom of page