Ivory Lee | Erudite

Project Overview

'Erudite' is a website to help instructors upload assignments, resources, and grades for class that students can directly access. More importantly, teachers can mark students’ work directly on the platform. In addition, students and teachers can send messages to each other and create discussion forums to engage and ask questions after class. 'Erudite' targets not only online learners/educators, but every one who wants all their resources and papers to be saved and collected in one cohesive location.

The Problem

Educators want to be able to get access to class material and mark papers without having to bring stacks of paper around because not only is not practical (especially for those who teach many classes and/or have many students), carrying around papers makes the risk of them/it getting dirty or damaged higher.

The Goal

To design an all-in-one platform for schools where educators can share resources, upload and grade assignments, and communicate with learners all at once without anything getting lost.

Understanding the User

User Research

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users although prefer grading the physical versus digital (such as papers being printed out by students and then marked physically), they find that having to bring around a lot of material with them to be able to work on-the-go very inefficient with higher risks (such as papers getting lost, dirty, etc).

Personas

Persona 1

"I want to give my students as much feedback as possible."

Age: 30
Education: Master's in Education
Hometown: Taipei, Taiwan
Family: Single
Occupation: Professor

Frustrations:

- Wants to give students good feedback
- Wants to give the same attention to each student's work
- Contribute towards the knowledge development and understanding of her students

Basic Information:

- Not being able to bring a lot of work with her at once
- Scared of drinking and eating while grading papers in case of damage

Jane is a 25-year-old psychology professor. She likes to work away from her office for a clearer headspace and so brings around her students' assignments with her to mark. While this has worked well for her, with assignments for her different classes being spread out over the semester, during important exam periods such as mid-terms and finals, she finds it hard to keep track of all the papers that she has to grade. She feels like there should be a better alternative to her being able to grade students' work on-the-go

Goals:

Problem Statement:
Jane is a psychology professor at a local university who needs to be able to grade student assignments and assessment on the go because she wants to be able to save the hassle of bringing around paper copies of students’ work when she is running errands and having a social life.

Persona 2

“I want to spend more time with my friends and less time doing something manually that I know, for sure, can be automated.”

Basic Information:

Goals:

Frustrations:

Age: 19
Education: In pursuit of Bachelor's
Hometown: New Taipei, Taiwan
Family: Single
Occupation: Student

- Wants to get the most out of learning as possible
- Wants to also have a social life and enjoy college with her friends

- Wants to have a platform where she doesn't need to input all the information into her spreadsheet manually
- Wants to be able to track her performance across time and across classes on the same platform

Hannah is a 19 year-old physics student who is in her second year of university. She really enjoys learning and keeps a good record of all of her class notes, class material, and her grades for every assignment. She takes the time to create her own spreadsheets to keep track of professor's feedback on her assignments as well as any grades she has received, including, as well, any answers that she has gotten wrong so that she can go back to relearn the concepts that she has not gotten correct. While this is a useful tool for her, it takes a lot of effort and time that could have been spent elsewhere.

Problem Statement:
‍ Hannah is a physics student who needs a platform to automatically generate grade reports and be able to track progress and her professor's feedback on her assignments because she wants to create a better balance between her work and social life and decrease the unnecessary extra amount of time she spends tracking her progress herself.

Pain Points

1. Too Many to Bring Around

2. Separate Communications

3. Further Discussion After Class

4. Comparing Results Across Students and Across Classes for Success Indicator

Grading physical copies of papers although are still efficient can still be a nuisance especially if there are large copies that one has to bring around everywhere, with the potential for the papers to become lost or damaged.

Students may have questions and/or discussion topics that arise after class that could really benefit others should the topics be further discussed with the class.

Looking at trends of results is a good indicator of the success of the class/teaching. However, having to input scores manually and then looking for trends across many variables can be very time consuming, especially when there are many students.

Having to resort to using different platforms or techniques to spread information or reach individuals can get confusing and taxing to manage.

Competitive Audit

While researching for an audit on competitor products, I realised that a resource like 'Erudite' exists but on a smaller scale. One competitor allowed teachers to upload assignments and grade them directly on the platform, but does not allow for any other feature such as accessing class resources. Another was a resource that included both testing and sharing of class resources, but the testing and examination part had only few features, not allowing the teachers/graders to put comments and/or feedback directly "on the paper" and for each question.

The competitive audit, then, revealed a market gap for a resource like ‘Erudite’.

Starting the Design

Ideation

I did a quick ideation exercise to come up with ideas for how to include all the features as addressed in the competitive audit and make sure that the platform has these features fully accessible.

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, as seen below, I prioritised having easy access to all courses an instructor may teach. I created a couple of iterations and starred features that I liked and wanted to include in the final paper wireframe.

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research, including which user flows and features are most important.

Being able to view results using different variables and indicators was a key user need to address in the design.

Desktop vs. Tablet

lo-fi mockups of the difference between desktop and tablet screens

Lo-Fi Prototype

To create a low-fidelity prototype, I connected all screens including those involved in one of the primary user flows of uploading an assignment. I had received feedback on my designs from my team about placement and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
‍
I then conducted a usability study of this prototype to get heuristic feedback before starting the hi-fi design and prototype.

Usability Study: Parameters

Study type:

Location:

Participants:

Length:

Research questions:

Unmoderated

- 5 participants: two males, three females, between the ages of 18 and 70
- All are locals who have various working backgrounds and schedules

20-30 minutes

- Can users access a new assignment successfully?
- Do users understand how to upload new materials and assignments?
- Are there any parts of the uploading processes that users are confused with?
- Can users easily navigate to different parts of the platform from the landing page?
- Do users think the app is easy or difficult to use?

Taipei, Taiwan (remote)

Findings from the usability study was used to make insights and then further prioritised by order of importance to make changes in the next mockup.

Usability Study: Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used high-fidelity prototypes and revealed what aspects of the mockups needed refining.

Round 1 Findings:
1. Users want more ways to display and analyse results may be useful to evaluate teaching methods and/or content
2. Users needed more back navigation buttons/symbols for wayfinding and navigation
3. More options are needed for grading to be inclusive of all the ways of assessing students

Round 2 Findings:
1. Have more customisable options for uploading resources
2. Have an on-screen system keeping track of grades given for each question and the comments for each question/answer
3. Have an option to view uploaded resources/documents in the perspective of the student

Hi-Fi Mockups and Prototype

During the second usability study users tested out the grading option and found the process of awarding marks to answers easy, some users noted that they would benefit from having an on-screen tracker of every question marked, the mark given, and the comments provided. I have added an additional drop-down bar to allow users to toggle to see a quick summary of marking.

During the first usability study users noted that more options are needed for grading to be inclusive of all the ways of assessing students and the second usability study revealed that while this new feature was included, more customisable options for uploading resources were wanted. In addition to adding this option I have also added an additional option to view uploaded resources/documents in the perspective of the student to check whether the assignment format is to the liking.

changes in design before and after usability study

Visual Design - Colour and Style

The colours of the design were chosen for their formal yet non-intimidating feel. Below is the colour palette with the functions that they were used for. The Sans-serif font of Montserrat was chosen for its less-intense, less serious, and more calm and gentle aesthetic.

Title
Semibold - 50 pt
Heading
Semibold - 35 pt
Sub-Heading
Normal - 35 pt
Body Text 1
Medium - 25 pt
Sub-Body Text 1
Light - 25 pt
Sub-Body Text 2
Thin - 25 pt

Sample Features and Pages

Below are some examples of features and pages in the hi-fi prototype of the 'Erudite' website.

gif of the upload new assignment feature

'Upload New Assignment' Feature
- From the 'Quick Add/Upload' button, users can choose what sort of material they want to create and upload
- Each type of material has input fields for the user to include information for the students and for identification purposes, such as 'Title' and 'Instructions for Students'
- Users can also choose how they want the assignment or material displayed to the students, such as choosing the way in which students can view their grades (i.e. either as pass/fail or as a grade/percentage)

'Grading' Feature
- Users can grade students' assignments using the grading rubric/markscheme answers that when uploaded, automatically translates onto the right side of the assignments page
- Users can give marks/points for each question/answer directly
- For easy holistic view of the grading process, there is also a floating bar that keeps track of all questions and marks awarded as well as comments and notes given to the answers so that users don't need to scroll up and down on the pages to make sure of certain grades and comments
- Tally of points awarded at the bottom of the page means that the users don't need to add up the scores themselves

'View Grades' Pages
- Users can view grades in three ways: 1) Overall/Average Results, 2) By Assignment, and 3) By Demographic
- With results being automatically plotted out on graphs and averaged in whichever way desired, users can do easy comparisons across individual students, groups of students, and classes to identify potential areas that may need more attention
- Easy access to indicators of success

Hamburger Menu
- Feature that allows users to navigate to specific pages directly without having to scroll down the 'Home' page to the different sections or navigate within the different sections to further sub-sections
- Opens and closes with the dropdown menu features for sections with multiple subsections

Final Prototype

Evaluation and Going Forward

Accessibility Considerations

During the design process, I made sure to take accessibility considerations into account. Three main ways accessibility was taken into account are:
‍
1. Interactive elements had clear labels that can be read by screen readers
2. Pages have landmarks to help users navigate the site, including users who rely on assistive technologies
3. There are headings with different sized text along with other visual elements for clear visual hierarchy

Takeaways

Impact

Users felt like Erudite has not only met their needs, but gone above and beyond.
One quote from user feedback: “At first I just felt like I needed an online grading system, but Erudite allows me to not only grade papers and assignments but also analyse results, message students, and coordinate tasks with the other prof and my TAs as well! I’ve never thought I could do so all using one platform.”

What I learned

While designing the 'Erudite' website, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs. As well, designing a responsive website that fit different screens means using different principles of design.

Next Steps

Though much has been done regarding this project and prototypes, there are always more room for growth and improvement to make the design the best that it can be. Below are three further steps that could be explored in the future.

1. Conduct follow-up usability testing on the responsive website across platforms
2. Identify any additional areas of need and ideate on new features
3. Test out the site on many other different screen sizes and devices to check that everything is working as it should

Want to work together?