Get In Touch
RED Academy
Create The Future You Desire
Date: May 2018 - June 2018
Role: UX/UI Designer
Type: School Project
Skills: UI, UX Design & Interaction
Deliverables: Web app design
Team: 4 UX/UI designers
UX Research/ UX Design/ Web App/ Client Project
RED Academy Attendance Tracking + Student Information System
To solve this challenge, we performed a series of user research and apply brand guideline into a MVP of a student information system (SIS) for RED academy stakeholders. The system aims to tackle the issue of lack of transparency between attendance and project completion rate.
Attendance Tracking.
How we helped RED Academy to develop a customized student information system.
Brief
How might we help RED Academy to be more efficient in tracking student attendance ?
According to Private Training Institutions Branch (PTIB*), it is mandatory for schools like RED to track student attendance and project completion. The students can only receive the graduation certificate if they achieve 90% attendance and project submission rate. However, the process of performing relevant administrative duties has been time-consuming and could be better utilized for both the instructors and the students. Hence, RED came to us asking us to design a prototype of a Student Information System web app.
Current Problem
We decided to rip the brief and careful analyze the current problems. We spent a few days performing contextual inquiries, and observed on how the instructors take attendance and check for project submission.
1.Taking Attendance
A standard class size at RED could range from 12 to 20 people. Class can only begin once the instructors have taken attendance. Before class, the instructors usually walk around to make sure if the student has arrived or not.
Hard to Read: The existing template list the student in no particular order, and does not have a picture associated with the name.
Time-consuming: If looking around and recognizing a student takes around 20 seconds, and inputing the attendance record on the excel is another 20 seconds. Instructors have to take attendance twice a day, we can assume that on average, 40 seconds *2 times* 12 students= 16 minutes of class time is wasted on taking attendance alone.
Inconsistent Timing: The admission team has received complaints in that the instructors have different standards for tardiness. Some might give 30 minutes leniency window whereas some might be strict in terms on being late.
DOMAIN RESEARCH
Taking Attendance is a tedious process
We interviewed the school admission to see what are some other methods the school has tried, and aimed to analyze the pros and cons.
Self Attendance: The orginal method, however, sudents often time forget to check attendance for themselves
Assigning A Student: The students are often too lenient in terms of the the tardiness from their classmates, thus won't have accurate attendance record.
Tracking MAC Address of laptops: It would simply be too costly to implement such system, and the ROI is low as student will only be attending the school at most for 6 months.
It seemed like, the current method of letting the instructors take the attendance is the best feasible method.
Comparative Analysis
Current Student Information System
A SIS is primarily used for storing demographics and assessment information, and not for content delivery (like a learning information system). Through conducting competitive research, we found out that the SIS for:
Pre-Schools: The students are often too lenient in terms of the the tardiness from their classmates, thus have bias
Universities: It would simply be too costly to implement such system, and the ROI is low as student will only be attending the school at most for 6 months.We realized there are no applicable SIS out there that suits the need of RED, and has to come up with a tailored solution.
Problem Space
Exploring all the
In order to understand what the research should focus on, I led the team to explore the problem space by drawing a mindmap to determine the direction of the project. This helps us to come up with the questions for the user interview and surveys.
Surveys
The objective was to identify the general trends and patterns of organizing student information — from students, instructors and the admission team. We asked questions such as what's the importance of tracking attendance, project feedbacks.
Gathering the Data
We synthesized data from 33 user interviews, 14 survey responses, from instructors, admin staffs and students from the Vancouver location.
Key Insights
- Attendance taking is needed - as much as both the instructors and students hate it.
- Instructors have to take attendance of the students. The process may be very tedious as instructors have to find the correct box to tick.
- Students felt that they are being babysitter like elementary children.
- Users want to be able to meet other people with similar interests
Persona
Struggling with taking attendance
To ensure that we are designing with the right users in mind, we created the personas, Drained David. We included his background and characteristics, which allow us to think from his mental model and empathize with his situations better.
User Stories/ Requirement
By writing user stories/ requirements to meet the needs of the users because...
“The requirement definition phase determines the what of the design: what information and capabilities our personas require to accomplish their goals. It is critical to define and agree on the what before we move on to the next question: how the product looks, behaves, operates, and fees. Conflating these two questions can be one of the biggest pitfalls in the design on an interactive product.” (About Face, 115)
As an Instructor at RED Academy, I want to...
- "Be able to save time spent on taking attendance"
- "Focus on the student's learning and reduce time on performing miscellaneous duties - such as give them attendance warnings, project submission, etc"
- "To view student's attendance and project submission record in one place"
- "To view student's attendance and project submission record in one place"
Iterate
Prototyping & wireframes
After rapid paper prototyping and design studio, we proceeded on to design the low-fidelity wireframes.
Style Guide - Red, Grey & minimalistic
We wanted to honour the color of RED Academy. We closely followed the brand guideline and referred at the website.
Prototype
View Attendance Record at a glance
At the home page, the instructor would be able to take attendance at a glance, with students photo and name.
Easy to Understand Color Cues
- Green: 100- 95% (pretty good, keep it up)
- Orange: 94–90% (on the lower end, don’t miss any more classes)
- Red: below 89% (Warnings and reminders will be sent)
The attendance rate is determined on a rolling basis, where it's calculated based on (days missed /total days attended). As long as the percentage is above 90% at the end of the 25 or 60 days program, students can pass and get the certificate. To present information in a clear and visual manner, we used three different colors to indicate the student’s attendance record.
Designing for Accessibility
We've adjusted the color in different saturation and hues as during the interview process, some students are color blind, and cannot differentiate between bright green and yellow. We used the Stark sketch plugin to access the readibility and change the color accordingly.
Protanopia
Deuteranopia
Let time take attendance for you
The presence of the student will be determined by the time. The instructors still have to click on the card of the student to take attendance.
Microinteraction
As I was designing the UI wireframe and components, I realized that the most important function of this app lies on the transitional interaction of interacting with the student card. Using Principle, I tested out different types of transitions. With some external and internal design critique, we settled on an interaction which animates the different incident of taking attendance.
Mark attendance
The AM indicates morning presence and the PM means afternoon. The instructor will be able to mark the student as present by just clicking on the card.
Edit attendance status
Likewise, the instructor can change the status of the student by clicking on the presence bar again.
Add A note
The Instructor is able to write a short note on the student’s card by clicking on the icon at the top left side.
Summary
How might we help RED Academy to be more efficient in tracking student attendance and project submission?
We performed a series of user and market research to create a prototype of a customized student information system.
To create consistencies between the programs and locations, student attendance is determined by time and projects could be viewed in one place.
The prototype is used as a guide in the annual general meeting.
Future Considerations
There were many features that could be included, but we were not able to include due to the time constraints. We included a series of features for RED Academy to consider:
Administrative purpose: tax forms, scholarships, delivery of program certificate, upcoming events/workshops, referral
RED Academy Policies
Alumni Network
Integration of xAPI framework
Learning + TakeAways
DESIGNING FOR A TWO-SIDE USER MODEL:
Due to the time constraint, we were not able to design the interface on the student's side. However, this project has taught me how to balance the needs and desires of two sets of users. This meant being able to evaluate trade-offs and understand how to use the motivations of both sets of users to create a product that would benefit the two parties.
BUILD A DESIGN SYSTEM FROM THE START:
During the designing the mid-fidelity prototype, I found that all the group members have different wireframes. We ended up spending additional time making the wireframes consistent, and lost out on time creating a better UI. It is then I realized the importance of setting up a design system within the team.
