(Prompt #1) Your school wants to improve the upkeep of campus facilities by creating a new system for reporting any facilities that may need maintenance or repair. Design an experience that allows students to report building or equipment issues on campus. Consider the process of those filing the report and of those receiving and taking action on the issues.
​
Tools & Methods
Duration
User Interviews
User Flows
User Experience Iteration
Adobe XD
Adobe Illustrator
Adobe After Effects
​
5 Days
​
Why I chose 1st
prompt
Reading through the design exercise that google sent me, I found prompt 1 more attractive because it is more challenging than prompt 2 (designing an app to connect mentors and mentees of your school). The second prompt was more of a social media kind of project and also more direct. I have seen a complaint box in my school which most of the students don't even know about. So I concluded to go on with prompt 1.
My process
Prompt
What problem am I trying to solve?
First of all, I was really excited when I received a mail from google with a design exercise, I read the brief and started breaking down the brief (prompt #1) to understand what problem I should really solve. I started researching about how maintenance/repair is done at my school. What I could understand from the research was that there is no such system in existence on the campus that allows the students to report a maintenance or a repair but there is a Report Box in front of the campus which is not even used anymore by the students. I started thinking about this scenario and “How can I make a system that is very easy to use, less time consuming to report and which keeps the emotions of a report box” keeping this as the main statement I started ideating.
About my school
I'm studying at the National Institute of Fashion Technology, Chennai, India. My school is a design school that has about 2200 students in total, about 50-70 non-teaching staff (cleaners, plumbers, electricians, etc.) and more than 60 faculties. The campus consists of the main building which has 3 floors and an Annex building). The whole repair, maintenance, and cleaning are taken over by departments who are assigned by the campus management.
What is the current system of this problem-solving?
Currently, there are no systems that help students to report maintenance/repair. If there is a maintenance or repair in the campus students have to either contact the related department (electrical, cleaning, plumbing, etc.) or contact the Director of the college but only if the problem is so serious. Even though we contact the heads of the related department, we have to assist them to know where the problem is, what is the problem, etc.
Birth of an idea
After long ideations, I came up with two ideas which I think will match the scenario. The first one is a simple mobile app and the second one is an Interactive notice board where the college map is can be visualized and the students can mark points where they want to report an issue with a description. But giving another thought, it's always better to do things that we think now than walking to the notice board every time when we want to report an issue. So, I chose to go with a user-friendly app that can solve the problem.
Developing concept from the idea
I conceptualized the design of the system to understand how this product will help the users. Thinking about how this system will help to solve the problem I reached to a pre-research brief.
Local
The application that I am planning to develop is for a niche audience (Students of NIFT and Non-teaching staff). The students of the college are having institution mail Ids and roll numbers for onboarding and the other staff can also have the same system of mail Ids and employment Ids for onboarding.
The connection
Myself as a student of the school, I have never seen a student talking to any repair/maintenance department. Using this app, I can also solve this problem by bringing a link with the students and the repair/maintenance department.
Play with emotions
A report box is always a kind of emotion, when we feel something is bad and should be solved, we use the complaint box to write a letter hoping that the problem will be once solved. Taking this HOPE into account I can create a system that can make the user think “OK, a problem of my campus got solved by my help” and when they get a notification that the problem is solved, he gets happier.
Quick Research
I conducted quick research on the campus and the repair/maintenance department for better clarifications. I used interviews and surveys as research methodologies:
Divya N
Assnt. Prof
​
Our college is having a dedicated repair and maintenance crew, but it is not possible for them to walk around the whole college and figure out where all they have to work on. An application like ReportBox might help them to solve this problem. As this application shows the complaint in a map, it is easier for them to find where the problem is.
​
Ann Mary Davis
Student
​
We find a lot of repair and maintenance works in our campus but don't know where should we contact to fix them and we don't have communication with the teams. ReportBox helps to clear this big gap between the teams and students.
Interviews
Shereef
Technician
This college is in about 3-5 acres we try to fix maximum problems every day. The main problem we have is to look around each and every corners to find problems. An application can help us to find all the problems and fix it asap.
Synthesis of the research and identifying product requirements
After the survey and Interviews, I sat down to find what all I should include in the app and how it should be made. From the survey, I could see that the majority of the students on the campus has not used the complaint box at all, so I wanted to build the product so people will feel like to use it
Play with emotions
This is because making a student feel that a problem was fixed by his report makes him happier which may make him use the app for the second time and so on.
Easy to use
The student's side app should be designed in a pattern of booking a cab. The repair team app should be designed with fewer complications and also should show the exact location of the repair/maintenance to be done.
Not so urgent
Even though I'm trying to follow a cab booking pattern, repairing or maintenance is not an urgent task so I tried to reduce status level notifications that distract students from uninstalling the app.
But in the repair team app, I tried to bring in more notifications so that they can solve the issue as soon as possible.
Type less click more
The main reason that students are not using the complaint/report box is that they have to spend time in writing a letter and putting it to the complaint box. This app helps the user to report an issue with their phone at the same time he/she sees the issue.
Preliminary product architecture
Interactions & design framework
Interactions & design framework
Wireframing Initial Ideas
Story Board
Iterated
wireframes
Onboarding (Student)
National Institute of Fashion Technology has its own CMS System and also the institution provides educational email Ids for students. This can be used as the credentials for logging in.
Landing Page
The landing page for students is designed in a way so that, the students can mark a point in the indoor map and tell what happened.
Reporting an issue
Onboarding (Staff)
The same system of institution mail Id can be used as credentials for the staff to sign in.
Landing page
This landing page act as a visualization of where all the report markers have come up.
Reading a report/complaint and taking action
This page helps the staff to understand what is the repair/maintenance about and action can be taken by respected departments. The marker in the indoor map helps the staff to find where the repair has to be done and with the images that the student uploaded the job gets easier.
User Flow
Wireframe
Student
Employee
Identity and colour
pallete
For the identity of this project I wanted to show the users what the app is about from the logo itself and also give the touch of a complaint box
Colour Palette
#F3AC3D
#404040
High Fidelity
Wireframes
Onboarding (Student)
National Institute of Fashion Technology has its own CMS System and also the institution provides educational email Ids for students. This can be used as the credentials for logging in.
Landing Page
The landing page for students is designed in a way that the students can understand the campus premises quickly and mark a complaint.
Reporting an issue
The reporting issue flow is simplified maximum by adding clickable button icons for what kind of repair is required and also uploading images makes the process easier for the technician. I also changed the icons for a cleaner look.
Reporting an issue
Rating helps to make a connection between the students and the repair/maintenance departments. Also, who doesn't like to get appreciated?
Onboarding (Staff)
The same system of institution mail Id can be used as credentials for the staff to sign in.
Landing Page
A much-simplified design is given to the staff landing page, so they can easily keep a check on different floors of the campus for complaints. Clicking on a complaint pin guides them to the next steps.
Reviewing a complaint
The first drawer shows the details of the complaint and if the worker is skilled in that particular job, he/she can take up the work. Image upload gives a better clarity that the complaint is solved and can be also kept as a record for the future.
Prototyping for better understanding
Try interacting with the
live application
Scenario: You found out that the air condition system outdoor unit in the passage near the Resource Centre is leaking. Report this issue via the app. Location is set already and the images of the same are in your gallery
User Testing
Megha D Nayar
"It will be great if we have a real application like this, It will be nice for us and the college," says Megha. After using the app she told that the app looks visually appealing as well as it is very simple to use. The best part of this app is that we can mark a point on the map so that the employee can easily figure out where the problem is.
Arjun B Raj
Arjun B Raj is a student of National Institute of Fashion Technology also he was the fastest in using the prototype. He really liked the simplicity, colour and also the image adding feature of the app.
_gif.gif)
_gif.gif)