Design a management app for the hostels.

Context

Owners of hostels in India often have multiple properties they let out. Managing these properties and communicating with the warden usually happens over calls, emails, and chatting platforms in an unorganised fashion.

Task

Design full-fledged management that both wardens and students can use. The app can be used for multiple purposes, such as storing documents, tracking rent, and other expenses, sharing information etc.

2 different user groups: Wardens of hostels and residents of hostels.

Assumptions

Since I’ve lived in both Hostels and Paying Guest for a fair amount of time so I believe that my knowledge and experience are enough to skip most of the research work. Since there are many variations in the facilities provided in the hostels, and they vary based on location. Here are a few assumptions which had to pull off a good case study.

1. In a hostel, the owner of the hostel is the highest authority, but since the warden is the one who manages and deals with and resolves all the student's problems so, assuming that the warden is the highest position for this case study.
2. The hostel here is an independent and private company which means it allows students from any university or college.
3. Only one person lives in one room(Single sharing)
4. The mess bill is included in the rent.

How I fathomed the problem

• Personal experience
  I moved out in 2019, and I’ve experienced living in hostels as well as Paying Guests so far. So I’m entirely aware of the flaws that these properties have.
• My friends always complain about their hostel and PG experiences so I have an idea about the major pain points that can be fixed through this case study.

I had a call with my friends and the warden to talk about the hardships they face in the daily operations of the hostel.

According to the Student’s perspective, this was the inference I could make:

“I’ve to constantly remind my warden about repairing of the defected tubelight in my room.”

“If the laundry service will not be available on Sunday then there should be some way that hostel informs you about the same.”

“My warden is always confused about who has paid the fees or not and mostly ends up calling the wrong person to enquire.”

And according to the Warden’s perspective, this was the inference I could make:

“So many phone calls regarding the complains and other things makes very hard for me to keep a track of everything.”

“I tried maintaining a list of students who have paid their rent manually but its hard to update it time to time.”

Now when I know that there are three kinds of problems which must be fixed: keeping a record of the rent, an easy way of registering the complaints and keeping track of it and getting updates regarding the hostel- changes in mess menu, laundry services unavailable for a day etc.

Moving on, before making any low-fidelity diagrams, I thought of making information architecture which would help me provide a little context to my low-fidelity diagrams. Now, there are two phases of the story: One side is the Student’s side, and another one is the hostel’s warden.

Information Architecture for the Warden’s side

Information architecture for the student’s side

When I was done with Information Architecture, I had a clear picture of what to create and for whom to create it. With that said, I hopped on my Figma and started making the Wireframes.

Wireframes for the Warden’s and Student’s screen

As the design process progressed, I tried making the interfaces. Still, after completion, I realised it was missing the main agenda of the app, which was to register a problem because of the lack of a visual hierarchy and overloading the functions without enough distinction.

This was the first design made. It was discarded, and new ones were made.

Being not satisfied enough with the earlier design, I did more research on ‘How can I make my app look more organised and presentable’. After looking out for inspiration on the internet and a bit of reading design blogs, I finally came up with the idea of using ‘Top Navigation Bar’. I’ve seen many apps which use a top navigation bar like Facebook, Dominos and Twitter.

Now, after re-designing the app again, it looked much better.

This is the Student’s app.

This is the Warden’s side of the app.

This is the outcome of the problem.

There are many more additional features like including a laundry section for the students, sending reminders to the warden if any student’s problem is not resolved etc. can be added to it, but it could have become overwhelming to accomplish in the beginning hence they are left for the future.

Thanks for reading till the end; I hope you liked it. You can reach out to me on Twitter or Linkedin.