Introduction
UpKeep is an app designed to allow students at the University of Limerick to report issues that arise around campus and assist with the upkeep of the college. Students can also suggest improvements that could be made on campus. Staff can also log in and access their accounts, where they can view new and ongoing jobs and keep students up to date on job progress.
The Design Process
Research & Ideation
I began by examining the brief that was given, which was:
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.
I noted the key points laid out in the brief and brainstormed possible solutions and what features to include.
The main inspiration for this project came from experiences that I have had with facilities services in the past. When you would call to get an issue fixed, you would be told that the issue had been logged and that it would be fixed. You were not told when the issue would be fixed or how long it would take. I have also spoken to other students who have had similar issues. So I wanted to ensure that the app I designed had a feature that allowed the user to track the issue. I also had to take into account the staff who would be inputting the information and what their needs would be.
An essential part of design is accessibility. I wanted to ensure that the app would be usable for all. I researched current and up-to-date information about accessibility on W3S's Web Accessibility Initiative website. I also learned that developers at Android, Apple and elsewhere had added the option to allow developers to take full advantage of their user accessibility settings. It is key to the design of the app that all users would be able to access it.
I first drafted the steps a user would need to go through to use the app. I then drew up a simple wireframe on paper to get an idea of what the app would look like and how it would function. This included the student and staff interface of the application.
Wireframe mockup of student and staff interface.
Once I had decided on the functionality and overall design of the app, I began to mock it up in Adobe XD. I chose to use the University of Limerick as my sample university as it is where I am currently studying, so I am particularly familiar with it.
The application is designed to allow the administrator of the app to add their brand colours, images and logos, which creates a personalised experience for their users.
App Walkthrough
Student Interface
The user begins by logging in on the home page. There is also an option for an urgent request which rings the facilities services.
The students would log in using their student credentials (i.e. Student email and password).
Home screen
Student Login
Student Home
They are then brought to the student homepage where they have the option to report issues, suggest improvements, make urgent requests or check their reports.
The interface is kept simple, with only the relevant options being provided. Also, buttons with different functions are separated by colour.
I have included a suggestion option as it is important for the students to be able to suggest improvements as they are the core users of the space and would have insight into what could be done to improve the university. These suggestions would be sent to a separate team from the issue reports where they would log and evaluate the suggestions.
When the user selects to report an issue, they are brought to a page where they input the information about the issue. By filling in these fields, it ensures that when the staff get the report, they have enough information to act on the report.
They must first give the issue a title. Then upload a photo; which would link to the phone's photos to upload the photo. Add a location; which requests the phone's location. Finally, they must add a short description of the issue.
When all the required information is added, the report can be submitted.
Report an Issue
Report an Issue - Filled
Report Submitted
Track Job
Once the report has been submitted, the user is given a report ID which is used to track the report. They now have the option to track the report to keep up to date on its status. They can also view the information that they submitted.
Tracking reports can also be accessed from the homepage.
When the issue has been resolved the user will receive a notification.
Staff Interface
The user begins by logging in using their credentials and then are brought to the staff account homepage.
This page has all the information required for the staff to carry out their work. The jobs are broken up into new, ongoing and completed so that at a glance, the user can get an overview of what is happening.
The staff have a profile so that when they accept a task, the student knows who will be working on the report. This can reassure the student as it puts a face to the staff member, and they will know who to expect.
Staff Login
Staff Home
New Jobs
Viewing New Job
When the user enters the new jobs section, they are provided with all the new jobs in chronological order. This page has a simple overview of the issue with the title, location, date and time. They can select a job and view more information.
If they feel they can attend to the report, they can accept it.
Once they have accepted the job, it is added to their ongoing jobs, and they have the options to set an ETA for the job or mark it as completed. Once they update the job, the student gets a notification keeping them up to date.
The staff member can also view the exact location and get directions to the job.
New Job Accepted
Job Location
An iPhone template was used for the Adobe XD mockup, however the application is intended to be released on all platforms.
Accessibility
As I stated in the Research & Ideation section, accessibility for all is an essential consideration when designing. If this application were to be released, I would integrate the accessibility options that developers on platforms like Google and Apple are offering. For example, the text would be scaleable, meaning that the text size could be adjusted for people who might find it difficult to read small text. All objects would be readable by users who use text-to-speech programmes by including tags that identify them.
The app is designed to be accessible to all in that there is not too much information, and operation is uncomplicated, meaning that users who may not be familiar with using applications can navigate it. This is important in any setting, as users of all ages and abilities will be using the application.
The application is intended to be perceivable, operable, understandable and robust.
What else can be done?
This application is beneficial for schools allowing them to improve and track the upkeep of the campus, but there are also other uses for this type of application. This particular mockup was built around the University of Limerick, but could be used by any institution.
It could also be set up for a city council, allowing them to receive information from their constituents. For example, if a local notices a pothole that needs to be fixed, they could use the app to inform their local authority. Similarly, in a workplace, this app could be used to allow employees to report issues with the workspace, such as IT issues.
There would also be a web application that can be set up on a computer to enable users who may not have access to a mobile to report issues, ensuring access to the service for all. The web application would also include an option for staff to track issues via a computer.
The button below leads to an interactive version of the application.
Attributions:
Font Awesome (Icons used in XD mockup)
Material Design (Icons used in XD mockup)
University of Limerick (Logo & App Background Image)