Digitizing Bhawans | A UX case study
Bhawan App is a pre-existing application on Channeli. Channeli is the official intranet portal of IIT Roorkee, which holds a number of applications like noticeboard, lectures and tutorials and many more, all built specially to help the students as well as all the people living in the campus throughout their stay.
Why Redesign?
Now that the Channeli has been replaced by Omniport, its design requirements have changed. Numerous bugs, poor navigation, and various usability issues called for a revamp of the Bhawan App. Being a member of IMG, I took up this challenge of designing the app from scratch for better usability.
Current system
Hostel Registration Process
At IITR, students need to shift their rooms at the end of each year. And every year, they need to get themselves registered by writing their names on a register, which is maintained by the supervisor. Also, students are not considered as registered unless they stick their passport size photo in that register.
Complaint Registration Process
Students need to go to the reception and find a complaint register amidst various other almost identical registers, write their complaint and fill out all the necessary details such as their room number, contact number, etc.
Guest Room Booking
Guest rooms are booked by going to the reception with the required documents and standing there till the admin verifies and approves their request. The payment is then made afterward.
Pain Points with the current System
The process of registration and complaints are being carried out for many years, but they need to change as the users have had several issues.
Problems students face
- Need for carrying a passport size photo to the supervisor’s office during registration.
- Filling out every single detail in the registers manually.
- Finding a particular register is a tedious process
- Carrying documents to the reception while booking rooms
Problems admins face
- Maintaining too many registers
- Finding unresolved complaints amongst many complaints
Defining the Problem
To help the students residing in the hostels at IITR, reduce paperwork (for example, registration, registering complaints and filling applications) and get all the Bhawan related information on a single platform.
Understanding the users
Various interviews and surveys were conducted to get a better understanding of the student necessities and their goals and tasks.
I obtained the following insights with the help of the surveys:
- The need for the Bhawan App is evident as maintaining so many registers is a trouble for the authorities, while finding the respective registers among them is a struggle for the students as well.
- By interviewing several authorities like the supervisor and the Bhawan council members, I concluded that a simple UI to cater to the needs of all the people is required as they were not very comfortable with using complex computer applications.
Bhawan app will be used by all the students as well as the wardens, supervisors and the chief wardens.
These users can be divided into two major groups:
- Students (B.Tech, M.Tech and Ph.D.’s)
- Admins (wardens, supervisors and chief wardens)
Other Existing Solutions on campus
- Appetizer for mess related issues
- Noticeboard for notices
- Using registers for writing complaints and registration
- Separate Bhawan websites
Problems in existing solutions
- One can only see the mess menu of their own Bhawan
- Bhawan related notices are not categorized
- Standing in queues for registration
- In a register, it is difficult to find out what complaints have been addressed and which are pending
- Scattered information
Project Scope
Since it is the first time The Bhawan app is being launched for omniport, it had to be a minimum viable product to understand the user behavior efficiently and for this, we defined the scope of the project:
- To improve navigation
- To increase usage by the students as well as the admins
- To make the admin site simple and easy to use
User Flow
Based on the previous data, I proposed the following user flow which helped me get through the wireframe making stage with ease while keeping track of all the important features and steps that I could’ve missed.
Here the user flow for the students and admins are different because they had entirely different priorities and goals.
Wireframes and Iterations
Design is a highly iterative process and any design can never be flawless. We at IMG believe in discussing our thought process at every stage of designing so that any flaw in one’s thinking can be spotted at very early stages itself. Taking feedback on the initial wireframes from the entire design team and the developers, I moved forward with the following mockups:
The Student Side
It was the constant iterative process, continuous discussion, and suggestions that transformed the landing page.
A lot of changes were made which led to:
- Improved Hierarchy
- Better UI
- Easy accessibility of important actions
- More functionalities like registering students online and details of Bhawan facilities.
One of the problems was to decide the card layout. I listed out two options keeping in mind the contents of the card from which the second option was chosen
How will the students get to know about Ongoing Events?
Previously, all the notices about Bhawan events were pinned on a Bhawan noticeboard.
In the Bhawan App, the events section will lead to a page containing a calendar where they can see all the Bhawan related events added by Bhawan authorities corresponding to any day.
The Admin Side
The major factor to keep in mind while designing the admin side was to keep simple navigation so that non-tech-savvy people can easily use it.
Resolving Complaints: Students will majorly be using the App to register complaints so the main feature of the admin side app will be complaints section hence it will be the landing page. It will have all the student details and an option to mark complaints as resolved.
Guest room booking: The admin will first approve the request after verifying the documents and an auto-generated Email will be sent to the student asking him to make the payment. The admin will confirm the booking once the payment is made. Guest room booking requests for the admins so that they can approve by verifying the documents and checking the availability of rooms. After the request is approved the student will get a mail notifying him/ her that the request has been approved and he can go pay the concerned reception to confirm the booking. The booking will be confirmed by the admin after the payment is made and confirm after the payment is made. The booking once confirmed cannot be canceled.
What I learned
Bhawan App, being my first UX project taught me a lot.
How working collaboratively do wonders: Collaborating with developers as well as taking suggestions from the other teammates is a good practice.
Importance of feedback: Feedback plays a crucial role in user experience design. Taking feedback from users as well as other teammates helps a lot in keeping track of technical feasibility as well as user comfort.
Maintaining iterations: Over the design iterations, keeping track of the old wireframes and decisions enables keeping track of when and why the decisions were made.
Thank you for reading this far:)