Events Calendar

A portal that addresses event-related needs in college

Events Calendar

A portal that addresses event-related needs in college


Sardar Patel Institute of Technology

Sardar Patel Institute of Technology

Client: Sardar Patel Institute of Technology

Timeframe: August 2016 - December 2016

Teammates: Bhavesh Patel, myself

My role: UX designer

Platform: Web application


We were looking to solve the following problems faced by three groups in college -

Students - They do not have a platform to view all events organized by the different committees in college. They rely on platforms like Whatsapp or Facebook to become aware of such events. These platforms are unreliable as they increase the chance of one missing out on an event. Why? They might receive several messages on Whatsapp. Facebook has too much content (especially if connected to many people and pages). Attending events that are useful ensures a better learning experience in college. An absence of a portal for events makes that questionable.

Event Organizers - They have to go to a guard every time to get a document they need to book a room for an event. They have to fill it with all the event details. Then they have to get it signed by the head of their department and the vice-principal. Now, HODs (Head of Department) and vice-principal are very busy people. They aren’t always available at their office; even if they are, organizers have to wait for their turn to meet them. Also, lab availability can only be found out by asking the lab assistant. To find out the schedule of events by other organizers, they have to be contacted. This is essential for organizers to know as they do not want to miss out on any potential audience for their event. The entire process of scheduling an event is time-consuming and very inefficient.

HODs(Head of Department)/admins - They have to make monthly reports of events in their department. They share these reports with the principal. This involves collecting details of events (can have an inconsistent format) from organizers. Using those details, they have to generate a single report. Thus, making reports is a time-consuming process.



Design a portal that ensures students never miss out on an event as well as saves valuable time for organizers and admins by making scheduling an event, getting it approved and generating reports streamlined.

My contributions

Being the only UX designer on the team, I was responsible for understanding user needs, finalizing functional requirements as well as designing and developing the user interface of the portal.

My learnings

Even though I had been a student and an event organizer myself, I wouldn’t necessarily know the needs of all students and event organizers. In hindsight, I would have preferred interviewing the two user groups to identify and incorporate any needs I might have failed to articulate. Also, we were fixated on the solution before we had even understood the problem well. This severely limited our creativity. Brainstorming other ideas and validating those with users could have been a good idea before fixating on a solution.


User needs

Having been a student and an event organizer* myself, I had some insight into their needs. I interviewed my project manager to understand the needs of an admin (as he himself would serve as one).
*During my junior year, I was the Chairperson of Computer Society of India’s branch in my college. 

User needs in a nutshell


User flow diagrams

I finalized the functional requirements to map the steps a user would have to take to reach a goal. I did that by making user flow diagrams. 

User flow diagrams


Paper Prototype

I sketched a paper prototype of the portal to conceptualize the UI.

Paper prototype

Working Prototype

To set up a working prototype, I coded the front-end in Brackets. I used the Material UI framework based on Google Material Design. Screens from the final design have been shown below. Main functionality includes viewing upcoming events and their details. Also, scheduling and approving events as well as generating reports for them. Access to functionality is provided based on the user type.

NOTE - On the Dashboard, Reports tab is only visible to admins. In the Approvals tab, organizers can check the status of their approvals. The option to approve an event is only visible to admins. Events and Account (details not shown) tabs are visible to all users.

Final design.png

Interactive prototype

NOTE - For the sake of presentation, I've used an interactive prototype.


Next steps

I didn’t have an opportunity to test the portal with students and thus, would definitely like to do that. Testing would reveal potential design issues. It would also reveal opportunities for including functionality I might have missed out.