small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

What Is the Open Web?

From Design System to ‘NFT Design System’: Creating TinyFaces

<p>Published on <a href="https://blog.prototypr.io/attendance-app-case-study-7ab7bb7f97f5?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Kunal Satpal </p>
<h4>Descriptive guide of how I designed attendance app for professors and students</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6WGZmeW7qiBUHkFO9LfViA.png"></p>
<p>Attendance is one of the important factors to check the regularity of students and employees in most of the institutes. The record helps to assess their sincerity towards work and accordingly reflects their performance.</p>
<p>Most of the institutes use conventional method of marking attendance in a register by calling out name of each student.</p>
<p>While some use biometric system (A biometric system is a technological system that uses bio-information to identify a person). Biometric system is an effective method for taking attendance as it helps in proper utilization of the lecture time.</p>
<p>I am a sophomore in Indian Institute of Technology, Roorkee. I have observed and analysed both the attendance systems thoroughly. Both of the methods have their own pros and cons.</p>
<h3>The Problem</h3>
<h4>For Professors</h4>
<p>The biometric system is difficult to set up, since registration of bio-information ( example-fingerprint ) of thousands of students is not an easy task and it is quite expensive also which every institute might not afford. On the other hand, marking attendance on a register is an easy task with no such requirement of heavy setups but it does not provide any digital data that can be easily exported for further use.</p>
<h4>For Students</h4>
<p>Most of the educational institutes have some minimum attendance rule and without this minimum attendance, students are not allowed to sit in examination and will experience an attendance back in that particular course. For IIT Roorkee, this minimum attendance is 75%.</p>
<blockquote><p>Having proper knowledge of one’s attendance can help them in avoiding a semester back.</p></blockquote>
<p>The basic idea was to create a link between students and professors for the betterment of both.</p>
<h3>Goals</h3>
<ol>
<li>To design a <strong>new method </strong>of taking attendance which will ease professors in taking attendance and also provide a digital record of the attendance.</li>
<li>To provide a<strong> digital record</strong> easily accessible to the students which will help in increasing awareness and also help them to take accountable decisions.</li>
</ol>
<h3>The Solution</h3>
<blockquote><p>A mobile application for both professors and students that will make the process of attendance more clear, simple and better.</p></blockquote>
<ol>
<li>Digital attendance can be recorded by using a mobile application which will be used by the professors.</li>
<li>A similar application would help students to have a proper track of their attendance.</li>
</ol>
<h3>Attendance App for Professors</h3>
<h4>Basic Sketches</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*7Tdsl5J6j3RqQrFd."></p>
<p>I usually prefer wireframing on pen and paper and then on illustrator and did the same for this app. Main goal of the professor app is to make it easier for professors to take attendance in minimum number of steps.</p>
<p>During the design process, my goal was to create a familiar look and feel as of the conventional method. I never wanted to create a completely new method of attendance, just digitize the conventional pen and register method.</p>
<h4><strong>Wireframes</strong></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*9hbApoZJ5MSmw88N."></p>
<h4>Branding</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*SqylfjLYsexn9KY1VXeMbQ.png"></p>
<blockquote><p>Most of the users are professors in the age of 35–65 years. They are not used to bright colors and gradients. So subtle colors on white base are used.</p></blockquote>
<h4>Designs</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*Rt2709oogyF2JHXdnvdF2g.gif">Dribbble Shot</p>
<p>I focused on creating a quick and simple interaction which also resembles conventional pen and paper method. Selecting a few absent students is always an easy task and that’s what professors generally practice in conventional method and thats why I designed the app on a similar framework.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LWdIyRIF76ZWSlH_luzMrA.png"></p>
<h3>Attendance Manager for students</h3>
<h4>Overview</h4>
<p>The main aim of the application is to provide a proper detailed view of one’s attendance and information about days they were present and absent. It also calculates and displays the number of leaves a student can afford before facing a back.</p>
<h4>Basic Sketches</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pX-asa6-XB87fpxVEXbotA.jpeg"></p>
<h4>Wireframes</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*EpGBcAluPdWU_N0ZrG_TpQ.png"></p>
<p>App for students although seemed like a simple task but finding out ways to increase the engagement of the students was challenging. I imagined the app to have an easy to use and fast interface like that of a dashboard showing attendance records of various courses and displaying the detailed information on touch.</p>
<h4>Branding</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Dj9qNLE1bTzP0q289XxR1w.png"></p>
<blockquote><p>Most of the users are teenage students so energetic and warm colors are used.</p></blockquote>
<h4>Logo</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/0*MOhwHERKle-kuXrC."><img alt="" src="https://cdn-images-1.medium.com/max/800/0*ox9ijzoW7F5mP7J_."></p>
<h4>Designs</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/0*eRxM4rAS7qGHr9HF."><strong>For the Students App, I used vibrant gradients to enhance the UI and make it more appealing to students</strong></p>
<h3><strong>Summing Up</strong></h3>
<p>It took me about a month to design both the apps, starting from research to final screens. Designing this app was really fun and it also helped me in improving my UX flow, UI and Interaction design skills.</p>
<p>If you have any project we can work on, mail me at<br /><strong>kunalsatpal1@gmail.com</strong></p>
<p>Follow me on <a href="https://dribbble.com/kunalsatpal1">dribbble</a> for more such works.</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=7ab7bb7f97f5" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/attendance-app-case-study-7ab7bb7f97f5">Simplifying Attendance process through UX Design</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Simplifying Attendance process through UX Design

Simplifying Attendance process through UX Design

Descriptive guide of how I designed attendance app for professors and students

Top Stories