top of page
.png)
Research
2020 Design Exercise
Individual Project
Duration: One week
Overview
An system for improving the upkeep of campus facilities, that allows students to report building or equipment issues on campus, and maintenance staff to follow up.
Research
I started with walking around campus, talked with students and maintenance staff in different academic buildings, tried to figured out the current maintenance process. From the research, I found out the current maintenance report process is extremely blurred, mainly depends on oral words, sometimes emails. It comes out to be easy for the information flow to break.
Finding the Problems
Students are Lack of Motivation
Before working on the design of the system, I tried to discover the key point of the problem.
The coffee machine in our academic building happened to broken for a week. Every student was complaining that the coffee machine was broken, but no one took action. Use this chance, I interview students to gather how do they think about the coffee machine problem and other facilities need repair in the building.
"I don't know whom to report, how to report."
"I told to someone who seems like the person in charge of building, but it didn't work."
"I'm not sure is that broken or I'm too dumb for using it."
"This is really inconvenient, I hope someone can help to fix it."
After the interview, I seem to gain a lot of students' opinions, most are about they don't know what they can do to help. But from the interviews I found out something they didn't say directly, they were lack of responsibility for the maintenance of the campus, in another words:
"None of my business."
It's not hard to establish the system of the maintenance system, but I think besides that, letting students establish the initiative awareness of maintaining the campus and academic building is the core to solve this problem, the system should be able to raise students' motivation for reporting.
Frome the feedback of maintenance staff:
Information flow is esay to break
The system is not just for students, so at the same time, I also asked the maintenance staff in our building, Kevin. He said that most of the time he could not know what was broken immediately, or many people repeatedly told him the same message in a short time.
After he completed the repair, he couldn't notify everyone effectively. The students could only find out by themselves, which actually made him feel a little frustrated sometimes.
Goals
Goals
Keep these in mind, I set up my goals for the design:
#1. Let students positively promote the process of facility maintenance.
#2. Make it easy for maintenance staff to get information and follow up.
Ideation
Ideation
In my first version of the sketch, I used storyboard combined with the user journey, to go through the necessary user flow of this process.
feelings
storyboard
process
StIcker for myself (keep in mind in later design):
It's necessery to let matenance staff give final repair feedback, great increace to student's feeling.
After the process flow, I started working on Information Architecture, to sort out all the basic components.
Make the report flow more attractive
For goal #1:
It's not hard to found out the process was bland, and it is no wonder that students would be less interested in the reporting process.
After brainstorming for a couple of ideas, I decided to use story-telling to solve the problem, instead of student report damage to facilities, why don't we tell this story in a different way:
Once upon a time, there were a bunch of monsters.
They invaded our campus, take it as their own home.
The monsters take destroying as fun, they are making trouble everywhere.
Every student with justice, could use the iron device to freeze them.
Heros of trial will get the messeage.
They kick the trouble makers' ass, defend campus every single day.
1. AR could allow digital objects to realistically reality, present information in a digital way -- blend story in the process.
2. It's a good way to create moments of delight, make a more exciting experience.
3. AR understand world through the camera, which fits the take picture step of the report flow well. It could be easy to conduct with mobile phone.
When thinking about how to conduct this, I thought AR could present a story in the context of the real world, blend virtual with reality. It's definitely a good way to bring interesting experience to the process. But before I go deep to this, I must ask my self the question: Why is this better with AR? There should be intrinsical support.
Why AR?
Sketches & Wireframe
Sketches & Wireframe
The needed features, actions and pieces of information were already pretty clear after the phases above, so I could jump straight into a quick sketch to map out the user flow. After a couple of iterations, I got the first version of interfaces, especially on the AR interaction part as follow.
After that, I started to work on more details of wireframe on Adobe XD, where it’s easier to quickly adjust and compare design versions.
After a couple of iterations:
At the same time, I started to working on the 2D art design of monsters.
2D art is the concept of story and characters, if not limited by time, I could model the 3D monsters with MAYA. As in an AR environment, 3D models with vivid animations can conduct a better immersive experience.
2D Art
Go for Design Details
Design details
Main Page
I struggled a lot when I designed the home page. This page contains the information of All Reports, My Reports, Report Entrance (catch monster) and Profile. I really liked the Bottom Bar version because it could make the report entrance super powerful, I also combined My reports in the profile tab.
But think about: All reports and My reports are 2 groups of information related and at the same level of hierarchy. I decided to choose the Top Tabs as the Main page navigation method, which makes it easier for users to understand the app structure.
For the Report Entrance Button, I change it into Floating Action Button, it could represent the primary action of a screen. Take Twitter as an example.
Why Top Tabs but not Bottom Navigation Bar?
AR interaction part
Tap damaged location
Assess damage
Freeze the monster
Send report
Tap damage location at first step for 3 reasons:
1. To show clear about where the damage is to the maintenance staff, because they need a clear lead to which part is damaged, and the "monsters" may not be shown on their side.
2. In the next step, the monster could have an interactive animation with the damaged place.
3. Based on AR, the student could tell from the first step is the damage has already been reported, which means will be monsters reported by others detected in the camera.
1. The location information has been collected at the 2 location choose steps at the beginning of the report process, so it solves the problem that hard to chooses a location in such a compact report page.
2/
1/
2. About the picture uploaded part, students could add detail pictures to show the damage more clear. And I chose design version from two.
The 1/ could contain more pictures, but compared to 2/, each picture has less show area. And I also assumed that the number of plus pictures will not be so much. For better visualization of pictures, I chose 2/.
AR interaction design: How to freeze the monster
When thinking about the AR interaction design, I come out with 3 interaction ways for students to freeze the monster in this step. Why freeze not kill? Students are freezing the monsters and report to the superheroes - maintenance staff to solve them.
I made paper prototypes and did user testing to find out which solution fits better.
Prototype & User test
1. Throw an ice ball to freeze it
(like Pokemon Go)
2. Use finger to adjust the angle of the laser to freeze it
3. Hold the freeze button for 3 seconds, the frost will spread all screen to freeze it
With the paper prototype, it's more easy to understand and feel the interaction. I found 7 testers to test each of them, each of them has two stickers to choose their most and the second favorite, and talked about their feelings.
+ Like Pokemon Go, familiar mechanism
+ More fun and harder compared to the others
- If failure more than 3 times, I will lose patience
+ Have the feeling of a game, excited
- The play method seems mindless
+ Easy to complete, no failure
+ The visual effect is vivid, it's a step of submit the report. wish it go smooth.
- Less gameplay feeling
- Wish to have some sound or other feedback when it's frozen
After collecting and analyzing the feedback, I think the #3 interaction is better in this step, reasons are as follows:
To achieve my goal #1, the design should keep a balance between complete the job of report and delight moments. It's okay to be cool, but before it goes too far to gameplay, I'd like to strike the balance. The #3 interaction gives the delight moment and make sure could be done by broader users.
High fidelity
Main page
AR detection
AR interaction
The All Report page lists the reports of the whole campus, but it could make the list better with some rules:
-
Show the building marked by the students (could be set in profile) at the top of the list, these are buildings students spend most of their time and care more.
-
Follow high to low damage levels.
-
Follow by reported times from high to low.
-
Students can also search with keywords.
If the same damage has already been reported a couple of times, students can detect monsters in the damage location.
More monsters mean this report needs to be paid more attention, it could influence more students. The report will also be marked with a higher priority on the report list.
Although it's a simple interaction, this part needs a combination of visual, animation, effects, sound to make an attractive experience.
Besides, as I got feedback from the tester, that want some feedback when the monster is conquered, to give a joy feeling.
I decided to use the phone itself to give a vibration feedback when the monster is frozen and turn blue.
High fidelity
Clear repair flow and status checking
For goal #2:
For the staff part, I came up with Wireframe after sketches.
Again:
Why Top Tabs but not Bottom Navigation Bar?
Main Page
To conduct a clear repair flow, there are New reports, On-going repair, and Completed repair.
1. These three should be clearly shown in the main page, it's 3 groups of information related and at the same level of the hierarchy. Therefore, in this case, Top Tabs also works better.
2. Although staff and students are different entrances, maintaining the same structure of the two main pages can help save development resources, give higher code reuse rates, and reduce maintenance pressure in a real development environment.
From the tech part, this design means when students take a picture from their end, an original version of picture should be saved too. This brings additional work to the technical department.
Different target different strategy:
More clear information for damage level
Compared to
the student main page, the monsters (damage level) have been shown with monsters pictures, maintenance staff needs a higher hierarchy for damage level.
I decided to hide the monsters, and add a mark to demonstrate damage levels.
2 other design version of damage levels marks:
The left one: color blocks have a conflict with location tags.
The right one: text is less obvious than color block.
Thank you for reading :D
This may not be the easiest solution for the maintenance report system, but it contributes to my goals well.
bottom of page