Google Design Challenge 2020
Overview
A case that I have compiled as a part of my Google Design Challenge 2020
Project Info
Objective - User Research, UI/UX Design
Tech - Figma, Adobe CC
Duration - 7 days
The Challenge
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.
The Solution
Interpreting the prompt
An experience which will allow any student, faculty or staff member of the university to report any facility requirement for maintenance, repair or cleaning.
This is for the students, faculty and staff members of the university community. Also, for the Facilities management team in order to provide a better experience.
The members of the university community will be able to report any campus facilities related assistance without any hassle and will not have to struggle looking for the appointed person for the job.
Process
Discovery
Target User
Reviewing the existing process
The goal of this stage was to understand the existing process for requesting a work order and identifying the challenges faced by the patrons of the university community. To understand the process I researched about the service, and tried to make a dummy request. I also conducted a contextual interview with a university building manager to get a deeper insight of the process.
Existing work order report process
Contextual Interviews
After understanding the existing process I listed all kinds of information and insights I would require from the target users and the facilities management team. The goal of the interviews was to understand some of the the following points.
- Awareness of the existing ARCHIBUS system
- Challenges faced with the current system
- Frequency of the requirement of the work orders
- Types of services provided by the management services
- Fulfillment of the work order request
Based on the information I wanted to gather, I created a list of questions and reached out to some of my peers at the university and presented them the questions. It allowed me to test if my questions are directed towards gathering the right kind of information.
Once I was assured that my research was going in the right direction. I interviewed 2 students, 1 faculty and 1 building staff form the university community.
Insights from the user study
- Unawareness of the ARCHIBUS system
- Not able to locate the building official when needed
- Ambiguity regarding the process
- No Immediate assistance for technical support
- Wastage of class time finding the building operations official
- Cumbersome process to track the status of the work order request
- The team manager informs the operations team about the work order request
- Manual receipt of the work order for the service
- Incomplete information regarding the work order request
Competitors Analysis
I conducted a study to learn the existing solutions used by some other universities.
- An easy accessible work order request portal for the university community patrons
- Request form focuses gathering information on location, personal information, request type and priority
- Facilities Customer Service helpline for immediate or emergency assistance
- Portal accessible to only for the members of the university community using the university ID.
- Facilities Customer Service helpline for immediate or emergency assistance
Analysis
User Persona
Condensing the insights from the study, I created users personas focusing the context and goals of the users. This helped me to further validate my assumptions and answers to my questions further in my design process.
User Journey Map
I created journey map breaking down the task into smaller fragments to learn more about the user goals, feelings, experience, emotions and pain points , it allowed me to find opportunities for refinement.
(click here to view full size image)
Understanding the User
I recorded users stories to understand the context for the use case scenario.
Paint Points
- Reporting a request
- Long application form for reporting a request
- Cumbersome process to select the right input from long list of drop down menu
- Loss of interest while filling the work order request application form.
- Drop down list includes specific codes inducing a high learning curve confusing for the users.
Storyboarding
I created storyboard presenting the possible use case scenarios for the service. This helped to me put myself in the shoes of the users and think of possible outcomes at each stages allowing me to completely understand the scope and widening ideation scope.
Ideation and Design
Based on my study and findings I decided to a mobile centric solution inclined more the student user scenarios
Information Architecture
Initiating the ideation of the solution I started mapping the flow of the solution and plotting requirements
Proposed solution User Flow
Exploring initial design concepts
Initiating the ideation of the solution I started mapping the flow of the solution and plotting requirements
Screenshot of the exploration sketches
Low-Fidelity Prototype
After sketching out initial design ideas targeting different problems faced by the user at different stages, I wanted to test my design and so I mocked up the sketched out screens and performed a early stage testing.
Initial Design Paper Prototypes
Initial Feedback
- Users felt the filing the report was still a long process with too many steps. They were feeling infuriated because of the unnecessary steps.
- User didn’t see the need for alerts at every point of the process and unnecessarily diverting them from the actual task.
- It was cumbersome process to track the status of their request.
- Users liked the progress bar for reporting process.
- They liked the option of having technical assistance at the home page.
Mid-Fidelity Prototypes
Based on the initial user flow, wireframes and initial testing feedback for the paper prototype. I started with creating digital prototype using figma this time focusing more towards the design principles and trying to incorporate all the required features to elevate the experience.
(Click on the widow to preview the prototype designs)
Evaluation
Heuristic Evaluation
- Users felt the filing the report was still a long process with too many steps. They were feeling infuriated because of the unnecessary steps.
- User didn’t see the need for alerts at every point of the process and unnecessarily diverting them from the actual task.
- It was cumbersome process to track the status of their request.
- Users liked the progress bar for reporting process.
- They liked the option of having technical assistance at the home page.
Prototyping
Design Guide
I created a design guide to maintain consistency throughout the design. I created a mood board to attain the feel of the university community. I also conducted a accessibility check for making the design WCGA compliance ready.
Final Design
Onboarding
- To address the pain points. I designed an onboarding experience allowing the user to focus on the primary goal of requesting a work order
- It also features a demo video posing as a wizard/manual and not letting a new user feel overwhelmed
- I chose to include descriptive icons for each action to present as signifiers to lower the learning curve
- I design the home screen focusing on making the emergency assistance easily available to serve the emergency situation suitably
Alerts and Activity
- Based on the user schedule, and preferred location in the university campus the application displays alert
- The alerts are not only restricted to just specific to the application but also displays on the lockscreen
- I designed an activity window catering to the user requirements to present essential information of the previous posted work orders and at the same time displaying the fulfillment status
Work Order Request Form
- To keep the user motivated and involved while completing the task I design the request form to be short and easy
- The design present use of small indicators
- The collapsing window helping the user to complete the task with ease and quickly
- The Confirmation window with a greeting illustration, email notice and required CTA.
Emergency Assistance
- The emergency assistance can be accessed directly from the home screen of the application
- This gives immediate assistance for the community members
- A button for directing to the emergency aid team or the number to reach the team
Reflections and Takeaways
Some of the key takeaways through this project
- Enforcing iterative design based on the feedback for the design at different a stages allowing me to think thoroughly on every design decisions.
- Managing time, I had tough time to design the entire visual design system since I did spend a lot of time on research and synthesis so I had to rush with the visual designs
- Given the time constraints, I was only able to work on mobile specific user application, in future I would want to extend to the business front of the application.
Additional Discussion
Points which are not covered in this case study but could be worth discussing in person:
- Comprehensive visual design process
- Alternate design ideas and iterative design process
- User Study and Journey Map
- User Testing proceedings
