top of page

maintenance system


A new system for reporting any facilities that may need maintenance or repair for CCA campus. 


Design Exercise for Google. 

I believe many people have experienced that water tap in the restroom is broken but no one comes to fix it for a long time or the printer in the library does not work well but you could know come to who for help. The maintenance system may not be necessary for a school but it is quite important for the studying environment. Consequently, I designed this maintenance system to help facilities in school being fixed as soon as possible. 


Time. 2020

Tools. Adobe Illustrator, Adobe Photoshop, Sketch, Axure
Process. User Research, Ideation, Conceptual Testing, Iteration, Usability Testing

Category. UI/UX Design, Eco-System Design, Prototyping, Wireframing, Branding

Background and Design Principles

As one of the best art and design schools in the United States, CCA always attracts outstanding artists and designers from all over the world. With the expansion of the campus and the growth of the number of students, many facilities in campus are unavailable. However, up to now, the school has no repair and maintenance system, so I decided to design this maintenance system. Then I chose 3 keywords to guide my design work: 

maintenance ui_画板 1 副本 8.png

Get in touch with the users

I have experienced and analyzed some maintenance systems, including apartments, home appliances, bike-sharing, and online shopping after-sales service. I want to explore the problems of the existing maintenance system and what inspiration it can give me.


I also interviewed students and asked some questions. For example, "tell me your experience of equipment failure in school", "how do you report equipment failure", "what problems do you encounter in the process of reporting maintenance", "what kind of repair system do you expect".

Combining my personal research findings with the existing user research data, I focused on the user experience of users and maintenance personnel. I identified several behavioral variables to create the following main roles:

persona_画板 1 副本.png

Reporters' Persona

persona_画板 1 副本 2.png

Staff's Persona

Pain Points


1) CCA does not have a maintenance reporting system right now.

Students do not know how to report a facility problem.

2) According to my research, all the available maintenance reporting systems are difficult to use. Users may quit reporting during the complex process.

3) Due to the low maintenance reporting rate, many facilities remain unusable. 


1) Maintenance staff receives reports from limited sources. 

2) Staff cannot manage priority and emergency levels in an organized way.

3) Reporting information is wrong sometimes resulting in difficulties in maintaining.

未命名作品 6.png
未命名作品 6.png

Design Goal

How might we help users apply for repair as simply and quickly as possible? 

How might we make maintenance stuff organize maintenance tasks efficiently?



Simple operation can increase the report rate and drive engagement.

Idea 1: Fill in information manually

未命名作品 2.png
未命名作品 2.png

Users need to fill in all the repair application forms, including the name, location, fault content and so on. The administrator will repair the equipment after receiving the email

Why did I not choose it?

It is hard for the user to describe the location because the equipment name cannot be managed uniformly, which makes the equipment maintenance difficult

Idea 2: Select from device menu

未命名作品 2.png

Sort out a menu of all the equipment on the campus and list them by category. Users need to find the equipment in the menu and then submit the repair application.

Why did I not choose it?

It takes a long time for users to search in the menu and submenu, which greatly increases the difficulty of repair application and makes users lose patience, so they give up repairing it.

Idea 3: QR code auto fill in information

未命名作品 1.png
未命名作品 1.png
未命名作品 2.png

The user can scan the QR code on the facility or input the code on the computer, and then the name and location are automatically filled in the repair service interface. 

Why I choose this option?

1) Simple application operation reduces learning cost and greatly increases repair application rate

2) Convenient for the stuff to manage and filter the equipment


Besides fulfilling users' needs, it also helps maintenance stuffs better manage tasks and improve maintenance efficiency.

flow_画板 1.png


Usability tests show the concept is clear. But users were confused about creating and viewing details. Some iterations included:

​Request Service

​During the Usability test, users do not know the meanings of the progress bar under the emergency level. Therefore, the design of the emergency level has been changed. The sliding bar was replaced by multiple choices. Three different emergency level is placed after the buttons. Then, it is easier for users to understand how to operate.

maintenance ui_画板 1.png
maintenance ui_画板 1 副本 9.png

Maintenance History

For the maintenance history mode, I found the preview of uploaded pictures is not necessary as not everyone uploads pictures describing the issues. Some people uploads pictures while others do not. Therefore, in the following designs, I deleted the preview of pictures in order to make the layout clear and universe.

maintenance ui_画板 1 副本.png
maintenance ui_画板 1 副本 10.png

Maintenance Interface in Computer

This interface is designed for users to report online. Users can search "maintenance reporting" through The design of reporting through computers is the same as that through mobile phones. Similar to the mobile interface, I changed the sliding bar for emergency levels to three buttons. I also moved the submit button further from the reporting sheet to make the layout less crowded.

maintenance ui_画板 1 副本 11.png
maintenance ui_画板 1 副本 5.png

Maintenance Backend Interface

This computer interface is designed for maintenance staff. It is convenient for students to use mobile phones for reporting. However, it is more convenient for maintenance staff to use computers to deal with tasks because using computers is easier to organize and manage all tasks.


I used different colors to divide three emergency levels. At first, I put the bar that represents the emergency level left side of the task card. However, I found that big blocks of three different colors in the same interface make the vision chaos. Consequently, I substitute the bars with small squares laying on the upper left corner.

At the same time, it is not aesthetic and crowded to set the font size of name and address the same, thus in the modified design versions, I split the name and address into two lines, and change the font sizes. 

maintenance ui_画板 1 副本 12.png
maintenance ui_画板 1 副本 4.png

Final Design


Maintenance History

Maintenance process is under control!

Slide rightward from request to view maintenance history. In this interface, all the previous maintenance history can be viewed including time, name, failure cause, and maintenance process. The finished step will turn from grey to green. Users can contact the maintenance staff with any other questions. 

​Request Service

One scan, that's all.

Scanning the QR code attached to each facility and this website will automatically show up. Facility information included in the QR code will be automatically filled once being scanned. It is easier for users to operate and can avoid wrong facility information. Two more clicks to complete the report.

Also, some frequent failure causes are preset. Users only need to choose the failure cause. An emergency level has to be chosen to set the maintenance priority which is convenient for maintenance staff to manage. It is optional for users to describe the issue in more detail and attach pictures. 

Only 5 seconds to report!


Request Service Interface in Computer

Computers can also request easily!

If users cannot scan QR code through mobile phones, computers can be utilized to request easily. Searching "maintenance reporting" through, and the website will show up. Users only need to enter code next to the QR code, then the location will be automatically filled. Other operations are the same as that in the mobile phones. 

maintenance ui_画板 1 副本 7.png

Maintenance Backend Interface

Staff can manage all the tasks easily!

The computer interface is more convenient for maintenance staff to organize and manage. In this layout, different categories are divided into different columns to make it easier for staff to check tasks. Maintenance staff can easily tell the emergency level and process state of each task and at the same time, facility information including name and address are shown in the task card. Failure causes can be easily seen in the green blocks. By entering keywords, maintenance staff can immediately find the task they are looking for. 

maintenance ui_画板 1 副本 6.png

Thanks for watching!

bottom of page