TigerSafe - Public Safety Application

Goal - To Make the Campus Safety application intuitive and user-friendly.

Redesign the existing RIT Tigersafe application for optimization of key functionalities and accessibility to key features with an intuitive UI.

About the existing application - 

TigerSafe is Public Safety’s official campus safety app. TigerSafe's features include Mobile BlueLight, Emergency Contacts, Friend Walk, Chat with security & multiple campus safety resources.

What is the purpose of the redesign?

This UX/UI Redesign is my attempt to improve the existing experience of the mobile application of Tigersafe. This case study focuses more on enhancing the safety experience by challenging the design decisions and also addressing the target users' insights.

Concept

UI/UX

Role

User Research,
Visual Design, UI/UX

Duration

12 Weeks (Spring 2021)

Problem - 

Cluttered UI with multiple navigation options does not provide any visual hierarchy for the user.

Solution -

Using a card-based system to define primary, secondary and tertiary functionalities of the application for easier navigation for all the resources.

Speaking the Users Language

Every card is associated with different functionality and is labeled according to the task it is expected to perform.

Established Hierarchy

Primary - Secondary And Tertiary functionalities organized. Easier Menu and Sub Menu navigation through a tab bar for quick access.

Feature Set

Google Maps Integration

Integrated Google Maps for convenient route planning and pattern-based prediction for easier access to the application.

Triple Tap Public Safety Request

Based on the identified travel patterns, use the application to triple-tap the power button to call Public Safety in case of emergency.

Research

The thoughts and user inputs that resulted in the above presented solution.

Heuristic Evaluation

On February 2nd, 2021, I started planning out the project management, the product versions to be tested, and where this document should be located. I finalized to test the mobile application existing on Google Play Store. I conducted heuristic evaluations based on 13 principles noted below and the redesign was primarily based on the insights acquired through the evaluation.

The heuristics evaluated by me are listed below - 

External consistency

Widgets and labels near targets

Group like widgets/functions

Frequently used functions optimized

Perceptibility of Feedback

Speak the User’s Language

Perceptibility of System State

Internal consistency

Appropriate Selection of Design Patterns

Minimize Knowledge In The Head

User Control and Freedom

Error Prevention

Error Recovery

Novel interactions easily learned and recalled

Interviews

The interviews I conducted were aimed at understanding the situations and the user's motivations and hurdles while using this application. Focusing on how they think the app works and if anything needs to be amended to make it more user-friendly.

Key Interview Takeaways

Cluttered Information.
The information presented in the application currently tries to communicate multiple points of information in a manner on a single screen which results in the inability of the user to focus and execute any particular action. This also includes the visual hierarchy currently being executed in the application.

Lack of Understable Language
While the application relies on terminologies being used in the safety applications for a long time, the new user is unaware of terms like "Bluelight" & "Say Something". This can be amended to make sure any new user is able to interpret the function in an understandable way.

Unclear to relate functions to situations.
With multiple options like Emergency or Non-Emergency Contact, it is difficult for the user to determine which functionalities to use in which situations.

Developing the Desired Solution

From the interviews, I envisioned that the users would need help in determining which functions to be used in which situation, clarity of language, and an overhaul in the visual aesthetic of the application to make it more user-friendly.

Card-based Hierarchy
Help organize all the functionalities of the application into cards with prompts related to which function to use in which situation.

Onboarding
Help users maximize the potential of their use of the application by providing an onboarding process that introduces them to the overview of the application.

Clear Language
Using terminologies for options which the users have an easier recall to.

Google Maps Integration (Added Feature)
Integrated Google Maps for convenient routes and pattern-based prediction for easy functionality.

Redesigning the Information Architecture

Post conducting the user interviews, I decided to reimagine the navigation of the entire application to make sure the information hierarchy is primarily divided into Primary, Secondary & Tertiary navigations.

Primary Navigation

• Call Public Safety
• Emergency Request
• Non-Emergency Request

Primary Navigation Prototype

• Call Public Safety
• Emergency Request
• Non-Emergency Request

Secondary Navigation

• Share Location with friends.
• Detailed campus map for user's convenience.

Secondary Navigation Prototype

• Share Location with friends.
• Detailed Campus Map for users' convenience.

Tertiary Navigation

• Student Health Center Contact
• Counseling Services
• Spiritual Life
• Title IX
• Account Settings & Privacy
• Incident History
• Privacy
• Help & Documentation

Wireframing

Wireframing was an important step in the process which helped me to visualize the solution as a rough sketch. The most important thing which it led me to was the UX writing for the scenario which was much easier to translate for the real experience the app would provide.

Visual Design

Moodboard -

Confidence/Strength/Friendly/Companion/Safety

Style Board -

Clean/Bold/Accessible/Easy to Use

UI Color Palette

Orange is the primary color that is associated with RIT. Using the same color palette as the university would bring in additional trust for new users while using the application and also help keep in line with the brand language. Additionally in the application, I used dark grey for the text and included a great deal of white to give a calm and clean appearance along with good contrast for the visual elements.

Typography

Inter

Light

Text

Bold

Inter is an open-source sans-serif typeface designed by Swedish designer/programmer Rasmus Andersson. It was designed to work well on screens as a UI font and features a large x-height. The family is available in nine weights with matching italics, as well as a variable font version.

Design Components

Use Cards to represent important features such as Call Public Safety, Emergency/Non-Emergency Support, Friend Walk & Campus Map, and their following sub-navigation options.

Public Safety Assistance

Situation Reports/Friend Walk

Report Incidents

Final Designs

Reflect

The amount of time spent on developing screens that were secondary utilized the time frame a lot more than I would have wished. Understanding more of what is important/not important could have been a bit more for me to think upon.

If provided more time, I would like to expand the user stories to encapsulate the entire journey and bind it in a more seamless manner to support the problem statement even further.

A problem that almost everyone faces required a lot of user interviews/card sorting which posed a challenge of focusing on a particular demographic which resulted in more than one problem inputs and hence followed multiple solutions, which could've been narrowed earlier itself.