Guro is a mobile app that helps teachers to perform the attendance check. It replaces the old way with pen and paper with an app that supports QR code reading and generates analytics on the students' attendance rate. From the app, teachers are able to log the number of attendances, absences and late arrival for each student. The app is currently being developed together with my friend Lawrence Marcelino.
We started on a whiteboard where we sketched out the navigation flow and preliminary ideas on what functionalities to have on the app. Prior to that, Lawrence conducted an interview with a teacher to understand what are their day-to-day activities in the classroom, what are the data they need for a class and students, and most importantly, how does the attendance is conducted.
Sketches on navigation flow and attendance interaction
Wireframes
Once me and Lawrence had a clear picture of what we wanted in terms of capabilities of the app based on the feedback we had from the teacher, I created wireframes to get the ideas to be more concrete. Here, we could start discussions on how interactions would be and get more specific on what to display and where.
Mockups
After several iterations on the wireframes, I started to focus on the aesthetics of the app. Colors, typography and visual style were defined in this phase. While the elements were created, a pattern library was being maintained to group and organize all the interface elements into a single place.
Pattern library with colors, spacing and typography sizes, text field and button styles
Prototype
The attendance functionality is the one that we consider the most important in the application, therefore a working prototype was done to facilitate the understanding on how it should work. Having high fidelity prototypes help significantly to bridge designers and developers to create a common understanding on what needs to be done. It was way easier to explain Lawrence in this way instead of having only static screens.
Prototype for the attendance funcionality
Next Steps…
We need to make user testings to evaluate how easy it is for the user to use the app. I believe that no solution is ready from the time is released, it is a continuous cycle on learning what works and what not with the users.
