Check-In
Changing the way teachers take attendance, and bringing it into the 21st century.
What is Check-In
Technology controls so much of our society in this day and age, yet teachers are still passing around a sheet of paper, or calling roll to take attendance. But not anymore, Check-In brings “taking attendance” into the twenty-first century. Simply scan the QR code associated with your class, and you’ve been marked present for the day. No more wasting sheets of paper day after day, or hoping students aren’t signing in people who are actually absent.
My Role
UX Designer, Front-end Developer
Responsibilities
UX research, wireframing, prototyping, interaction design, front end developing
Project Duration
5 months (Jan - May 2018)
The Problem
Passing around a piece of paper to take attendance is both distracting, and a waste of paper. This method also runs the risk of students having others sign in for them, without actually attending class.
The Solution
The app requires each student to scan a QR code to check into a specific course. To eliminate chances of students signing each other in, the professor has the ability to generate a new QR code for every class meeting. This keeps students from being able to take pictures of the QR code and keeping them for future use.
UNDERSTANDING THE USER
User Research
To determine what features would be most useful to users, we interviewed several students and professors about what they needed most when signing into class or when taking attendance for class.
Personas
After meeting with several potential users, we created user stories requirements that helped us prioritize features for the app. We created two personas, Robb the student, and Bill the instructor.
THE DESIGN PROCESS
Digital Mockups and Prototyping
While time constraints didn’t allow for a lot of paper wireframing, I did sketch out a few design ideas before moving on to use Balsamiq to quickly create digital mockups for the entire app. My goal was to focus on creating an interface that was easily understood and simple. Using Balsamiq, I was also able to connect these designs to later use as a prototype.
Accessibility Considerations
When designing this app, one concern was for students who forgot their phone or otherwise didn’t have a smartphone accessible to them. To ensure this system was accessible to all users, we wanted to include a way for the teacher to mark students present manually, in addition to scanning the QR code, though time did not allow for it to be added to this iteration.
Mockups
Demo Video
Takeaways
Impact
An app of this nature would cut down on paper usage, especially for large universities where class sizes can be as large as 100 or more.
What I Learned
During this process, I learned the importance of having a style guide for your developers to ensure that colors, buttons and other features are iterated correctly. It cuts back on confusion from either end, and makes the transition from design to development much smoother.
Next Steps
-
iPhone compatibility
-
Web application for instructor
-
Fixes QR check-in falsification
-
Overview of classes
-