This App will help you bunk classes, MORE INTELLIGENTLY

Attrack-Attendance tracking application

Students love to bunk their classes, don’t they? Well, being an engineering student, I know how we like to skip lectures for the subjects that don’t spike our interest, and utilize time in other ways. But this habit soon becomes problematic when our attendance nears the threshold and we pray not to be in the list of debarred students. So, I tried solving it and thus devised a solution which can help us in meeting the minimum attendance criteria.

In order to get an insight, I started looking for similar applications over the Internet and started assessing the features that they might be lacking, some of them were:

1. Update the absent count in each subject.
2. Time table creation, to let users mark their attendance on a day to day basis instead of entering a count once and for all.
3. Get recommendations on minimum number of attendance required to meet the attendance criteria in any particular subject.

Personas

Having studied the present solutions, now was the time to talk to students to get to know what they really wanted and their expectations from an attendance tracking application. Being a student myself, it would have been easy for me to pen down expectations and goals all by myself, but I preferred to have a conversation with my peers because —

Being a part of the target audience doesn’t guarantee that we’ll pursue the problem same way

I was able to classify them under 3 personas, details of which are as follows

I realized that the users wanted something more than just maintaining their absent counts. Also, as all of them had different personalities, thus devising a way that would motivate all of them to mark their attendance seemed to be challenging. This led me to defining the product goals:

Product Goals

• Allow the user to keep a track of their attendance in lectures/tutorials/practicals separately for every semester as each of these three have different contribution in calculating the overall attendance.
• Warn the user for the subjects they are falling short of in attendance, and allow to set alarms or reminders for such classes.
• Provide a familiar interface to create time-table and make it as easy as possible while simultaneously maintaining the count of steps to as low as possible
• Make time-table shareable so that not everyone needs to indulge in creating timetables.
• Make attendance filling fast and easy.
• Predict the minimum number of classes the user is supposed to attend to meet the attendance criteria.

Information Architecture

I laid down the IA based on 5 major features which I found to be of similar hierarchy under which other functionalities would fall.

• Subjects
• Time table
• Attendance Updates
• Notifications
• Account Management

Information Architecture

Wireframes

Once I had a decent understanding of user goals and behaviors, I shaped the elements in the information architecture into visual entities, with the knowledge of the content and features, I was able to reach mid-fi (medium-fidelity) wireframes for different screens.

mid-fidelity wireframes (final)

And thus came the step of designing the User interface.

UI Design

What could be better than a one-stop solution to keep a track of your attendance history every semester without deleting your record? Well, I allowed the user to look back the details of any semester by changing the semester from account settings.

The reason why I opted for a lower navigation bar instead of a hamburger menu was to give the same hierarchical importance to other features like timetable and subject, which did not seem plausible with the latter.

What’s the point in giving a pool of features if user cannot even realize that they exist

Home Screen

What will be the first thing a regular user of application would want? To get brief details of today’s classes and to mark attendance of the subject of that day. In my initial design for the home screen, I thought of including the following details in a card:

1. Subject Name
2. Type of Class (Lecture/Tutorial/Practical)
3. Time
4. Number of classes attended before out of the total number of classes and
5. Mark attendance manually for the classes which were either over or ongoing at that point of time, I avoided allowing update of attendance for the upcoming classes later in that day, as it is not certain whether the user will be attending the classes or not.

Different design for cards on the home screen

Above image shows the changes in the class card over time, I rejected designs 1, 2 and 3 considering the following facts :

1. It was more relevant to acknowledge the % attendance they have in a class than the actual figure of classes attended.
2. The Present/Absent/Off mark in 1st was difficult to interact, how the buttons would disappear once we choose 1 of 3 options
3. Indicating choice with “P”, “A” and “O” was not a common way of showing things in mobile design, instead, iconography such as tick, cross have better reach and gives a more better feeling to the user
4. It was easy to remove the action buttons once we have received the response from user by collapsing the card to look like any ordinary one, with upper progress bar showing that class has over and you have successfully marked your response.

Time Table

This section was meant to give an insight to the timetable of a particular semester allowing the users to manually set the reminder for some classes which they miss because either they were not aware of the schedule, or they did not wake up on time and miss it.

Evolution of timetable screen

I rejected the initial design(left one)for timetable because

1. If a user is visiting the timetable section, their primary objective is to get an overview of classes scheduled on a particular day, so showing attendance % figure is of little use.
2. Size of cards in the first design is comparatively large to that in second, which forces the user to scroll unnecessarily.
3. It is the time which is needed to be highlighted more prominently, but it was not in the first one.

It was important to allow a share feature for the timetable, as people do not want to put effort and look for ways to get things done in the easiest way possible. Generation of a shareable link, which can then be sent to others via messaging platforms like WhatsApp and Facebook increase its accessibility. Users can also update the timetable from the same screen.

Time Table Creation

This was the most challenging part I faced while working on this application since it involves a repetitive process of adding classes one by one which most people give up before completion and hence demeaning the purpose of the app.

So, In order to make it usable and for people to actually get their way through this, it was important to make the addition of classes look familiar to something what people are used to and for this I made use of “Google calendar Add event” in day view as it is similar to creating an event.

Procedure for creating a class in time table

Therefore the procedure of filling the timetable is :

1. Enter subjects, it is not necessary to add all at once, you can add subject any time later either from edit menu or by using add button in the subject section.
2. Assign color identity to them by choosing from a set of choices.
3. Next is the Day view where we will fill the classes. Simply tap on the screen, or simply swipe up and down to select your desired start time. (You are allowed to select a time separated by 15 min duration, if your class time doesn’t match from this screen, don’t worry I got you covered)
4. Fill all the relevant details, first is the subject name, you will get recent subject added to timetable up to 2 in numbers, select from Lecture/Tutorial/Practical and adjust start time and end-time as required.
5. User can always opt for optional attendance for that particular class, which will not count the attendance for the class.
6. User can choose alternate classes in that time slot as well, which will be adjusted on the timetable accordingly.

Subjects

This is the section where a user can see the overall statistics of their attendance, subject, and class wise. It was fair to give the user information of their overall attendance in a particular subject. Clicking on any one of the subjects will lead to the details screen where users can separately look at when the Lecture/Practical/Tutorial classes were off, or if they missed it themselves. Based upon the last semester dates, it displays the minimum number of classes you should attend to meet the attendance criteria.

Subject and analysis screen

Notification

Even if all the things are placed at the location they are supposed to be, they are insignificant if the users don’t update their attendance. Sooner or later, they will start getting tired of all this stuff, and will eventually stop using the app.

It is our duty to get them covered by presenting a better way to fill in their attendance with very little efforts.

Hence the frequency of notifications is significant for this idea to meet its goal.

In the user study, I found out that there are two types of user, one who uses the phone a lot even during lectures or at the end of it, while some don’t use it at all. So the feature of updating attendance from the app itself for that day after completion of the class seemed good for the first type of user, but no one would like to mark one by one all classes at the end of the day even if they have attended all.

So, the notification for marking attendance in the notification panel of device can be generated either:

1. Soon after the class ends, with an option to mark present or absent directly without even opening the app, or
2. Asking the users, at what time of the day they want to receive a notification to mark attendance in the notification settings of the app and then generate a single notification to mark as all attended at the end of the day.

But a lot of notifications in a day from the same app would be hard to manage and causes irritation too. There is a good chance that the user might skip the notifications. So I created a notification center in the app itself which is accessible from all of the major screens.

If you have made this far, thank you very much for all your time, I hope I did justice with my writing. Your feedback would be much appreciated.

Big thanks to Ashwini Soni for guiding me throughout the project and giving me valuable feedback on every design decision I made during this project. I would also like to thank Vineet Arora and Ajay Rahul for helping me with the blog.

See the full project on

Behance:https://www.behance.net/gallery/59483203/ATTrack-Attendance-Tracking-Application