Ulert

Safe campus app for reporting emergencies ensures student safety.

Ulert

Safe campus app for reporting emergencies ensures student safety.

Ulert

Safe campus app for reporting emergencies ensures student safety.

Project

Responsive Mobile app UX/UI design

Duration

2 Nov 2022 - 11 Jan 2023 (10 weeks)

Course

Google UX Design Certificate

Category

Community-driven emergency reporting platform.

Project

Responsive Mobile app UX/UI design

Duration

2 Nov 2022 - 11 Jan 2023 (10 weeks)

Course

Google UX Design Certificate

Category

Community-driven emergency reporting platform.

Project

Responsive Mobile app UX/UI design

Duration

2 Nov 2022 - 11 Jan 2023 (10 weeks)

Course

Google UX Design Certificate

Category

Community-driven emergency reporting platform.

Skills

Researcher

Information Architect

Interaction Designer

Visual Designer

Prototyper

User Tester

Project Manager

Tools

Figma

Photoshop

Skills

Researcher

Information Architect

Interaction Designer

Visual Designer

Prototyper

User Tester

Project Manager

Tools

Figma

Photoshop

Skills

Researcher

Information Architect

Interaction Designer

Visual Designer

Prototyper

User Tester

Project Manager

Tools

Figma

Photoshop

Project Overview

Ulert, a blend of University and Alert, is designed to offer a seamless and user-friendly experience for university students to report emergencies swiftly. It ensures campus safety by providing an intuitive platform for quick and effective communication with authorities. With Ulert, universities can efficiently address incidents and emergencies, prioritizing the safety and security of their students.

"How might we enable students to report emergencies easily and stay informed?"

Problem

Problem

Problem

Campus Safety Dilemma: Navigating Emergencies and Weather Challenges for University Students

University students often encounter emergencies, ranging from fires to medical incidents, creating a need for a streamlined communication system to effectively convey these situations. Furthermore, adverse weather conditions, like severe storms and floods, pose challenges for students commuting to and from campus. These factors not only hinder students' daily activities but also underscore the necessity for a comprehensive solution that ensures prompt reporting of emergencies and provides vital information in real-time, fostering a secure campus environment. The multifaceted nature of these challenges emphasizes the significance of addressing them through the Ulert app, enhancing the safety and well-being of university students.

Research: Competitive & SWOT Analysis

Research: Competitive & SWOT Analysis

Research: Competitive & SWOT Analysis

I identified both direct and indirect competitors by analyzing the JS100, Police i lert u, Larnlao BU (ร้านเล่าบียู, a Facebook page), BU Mobile App, and other relevant platforms for emergency reporting. This evaluation focused on user experience aspects, such as user interface, navigation, reporting functionality, emergency information, and user feedback. By conducting this analysis, I gained valuable insights into areas of improvement for Ulert and a better understanding of how competitors approach emergency reporting in a university setting.

JS100 (จส.100)

JS100 is a popular emergency reporting service in Thailand, offering real-time updates on traffic, accidents, and emergencies. Its strengths lie in its widespread usage and timely information delivery. However, it faces challenges with user interface and features, lacking a comprehensive solution for university-specific emergency reporting. Addressing these concerns could enhance JS100's position in the university safety app landscape.

Police i lert u

Police i lert u is another emergency reporting app with a focus on safety alerts. Its strengths include a user-friendly interface and efficient reporting features. However, it faces weaknesses in limited user engagement and potential gaps in comprehensive emergency information coverage. Improving user engagement and expanding the breadth of emergency information could elevate Police i lert u's effectiveness.

Larnlao BU (ร้านเล่า ม.กรุงเทพ)

Larnlao BU operates as a Facebook page, providing information about incidents and events around Bangkok University. While it leverages social media for dissemination, it lacks a dedicated platform for emergency reporting. Enhancing its features, including a more structured reporting system, could increase its utility for the university community.

BU Mobile App

BU Mobile App serves as the official mobile application for Bangkok University. Its strengths include comprehensive campus information and features. However, it lacks a dedicated focus on emergency reporting, making it less effective in urgent situations. Integrating a robust emergency reporting feature could significantly enhance BU Mobile App's value for student safety.

User Interviews

User Interviews

User Interviews

I engaged with recent graduates (23-25 years old) through social media like Twitter, Facebook groups, and Line chat rooms. This highlighted challenges like unreliable campus information on Twitter due to unrelated content. Ulert aims to address these issues by providing a tailored campus communication solution.

The interviews also reveal that campus communities face challenges in curating reliable and relevant information on social media platforms like Twitter, where unrelated content can hinder information retrieval and compromise safety and security.

  • Staying informed on Twitter can be a real challenge. The search results are often flooded with unrelated content, making it hard to find reliable updates about our campus.

    Kaew

    Female, 24

  • I rely on Facebook groups for information, but it's a bit overwhelming with the variety of posts. A dedicated platform would be so much easier to navigate and find what's important.

    Gryce

    Male, 23

  • The Thai emergency report system has so many different numbers, and it's confusing to know who to call in different situations. Having a clear and straightforward way to report emergencies would make me feel safer and more empowered.

    Cream

    Female, 24

I then use the insights I gathered to helped me develop two personas:

"Yim - The Commuter"

"Pang - The Dorm Resident"

Yim - The Commuter

  • Age: 21

  • Location: Samut Prakan, Thailand

  • Occupation: Full-time student

Background

Yim, a dedicated university student, faces daily challenges in his commute between home and university due to traffic jams caused by road floods and accidents. He wishes for a solution such as an app to help him avoid these delays and get to campus efficiently.

Challenges

  • Dealing with daily traffic congestion and road floods during his commute.

  • Struggling to predict and navigate around accidents that cause delays.

  • Wasting valuable time and energy in unpredictable and prolonged commutes.

Pain points

  • Lack of real-time information about traffic conditions and accidents.

  • Inability to proactively plan alternative routes to avoid delays.

  • Frustration caused by unexpected disruptions in his daily routine.

Opportunities for service

  • Real-time Traffic Updates: Ulert can provide Yim with up-to-date information about traffic conditions, accidents, and road floods in his area.

  • Alternative Routes: The app can suggest alternative routes for Yim to take in case of traffic congestion or accidents.

  • Efficient Commute Planning: Ulert can help Yim plan his daily commute more effectively, reducing the stress and frustration associated with unexpected delays.

Yim's User Journey

Pang - The Dorm Resident

  • Age: 19

  • Location: Pathum Thani, Thailand

  • Occupation: Full-time student

Background

Pang, a freshman at Bangkok University and a dorm resident, faces challenges with staying informed about crime and emergency situations around her campus. She resides deep inside Soi Rangsitpirom, an alley with no direct access to the university. After her evening classes, Pang commutes by using the university shuttle bus and walking to reach the alley entry, where she relies on motorcycle taxis for the final leg of her journey to her dorm. Additionally, she often travels to nearby condominium complexes for group projects, which involves navigating the dangerous highway, Phahonyothin, using motorcycle taxis.

Challenges

  • Navigating potential safety concerns and emergency situations while commuting through multiple modes of transportation.

  • Dealing with limited access and exit points to and from her dormitory in Soi Rangsitpirom.

  • Struggling to find timely and accurate information about crime and emergency incidents that may affect her commute.

Pain points

  • Feeling vulnerable during her multi-step commute, with limited options for safety.

  • Wasting time and energy on a complex journey only to discover unforeseen safety risks.

  • Lack of reliable sources for real-time updates on potential dangers along her route.

Opportunities for service

  • Real-time Commute Alerts: Ulert can provide Pang with instant alerts about crime and emergency incidents along her commuting route, allowing her to make informed decisions about her safety.

  • Specific Route Safety Information: The app can offer safety recommendations based on the different segments of her commute, assisting her in assessing potential risks.

  • Comprehensive Safety Planning: Ulert empowers Pang to plan her complex commute more effectively, reducing stress and enhancing her overall safety throughout her journey.

Pang's User Journey

Based on the personas, I defined the target users for Ulert; a diverse group of university students, faculty, and staff members seeking enhanced campus safety and integration. They value secure environments, quick access to essential resources, and streamlined communication. Convenience, real-time information, and community engagement are crucial to them, as they prioritize both safety and a seamless university experience.

Roles

  • University Students: Enrolled students who want to explore their campus confidently, form connections, and have a reliable safety net in emergencies.

  • Faculty and Staff: University employees who need efficient ways to communicate emergencies and support students' safety.

Demographics

  • Age: The audience ranges from 18 to mature adults, encompassing traditional-age college students and various faculty and staff members.

  • Gender: Inclusive of all genders, reflecting the diverse university community.

  • Education: Students pursuing undergraduate and graduate degrees, along with faculty and staff members with varying levels of education.

Psychographics

  • Safety-Conscious: Members of this audience prioritize their personal safety and the safety of others on campus.

  • Tech-Savvy: Users are comfortable using smartphones and apps for daily tasks, including safety-related communication.

  • Busy Schedules: Students, faculty, and staff have tight schedules, seeking efficient ways to connect and engage.

Content Map

With a comprehensive grasp of the users' requirements, I meticulously constructed a logically organized content framework for the Ulert app. My focal point was to streamline the process of reporting emergencies, ensuring its simplicity and effectiveness. Attentively encompassing crucial elements, I orchestrated a comprehensive content strategy, embedding all essential components required for optimal functionality. By synergizing user insights with strategic content arrangement, our aspiration revolves around crafting an app that embodies an effortless and intuitive emergency reporting process, adeptly addressing the multifaceted needs of our campus community.

Ideation

I orchestrated a dynamic ideation process, employing the well-known UX/UI practice known as the Crazy 8. This exercise was aimed at generating innovative solutions to address the gaps identified during the competitive audit, with a specific emphasis on enhancing the emergency report feature. I engaged in rapid brainstorming, cultivating a variety of potential solutions and meticulously assessed them on criteria such as their potential impact, feasibility, and user experience.

Some of the inventive ideas that emerged from this ideation session encompassed:

  1. Streamlined Emergency Reporting Button: A user-friendly emergency report button placed prominently on the app's home screen, facilitating swift and straightforward reporting of emergencies.

  2. Location-Driven Efficiency: Integration of a location-based functionality that would automatically detect the user's whereabouts and auto-fill the emergency report form with essential details. This approach aims to expedite the process and diminish the likelihood of errors.

The concepts generated from the Crazy 8 session were translated into digital wireframes with a strong emphasis on user-friendly emergency reporting. I fine-tuned layouts, labels, and accessibility, all while addressing user pain points.

Low-Fidelity Prototype

The Ulert low-fidelity prototype replicated the essential user journey for reporting emergencies, serving as a key tool for authentic usability tests. It aimed to simulate real user interactions, providing a realistic environment for comprehensive usability assessments. With a close alignment to the critical emergency reporting flow, the prototype enabled thorough testing of the user interface and overall experience, yielding valuable insights for refining the final product's design and user experience.

View Prototype

Usability study

Two rounds of usability studies were conducted. The initial study guided design progression from wireframes to mockups, while the second study, utilizing a high-fidelity prototype, identified areas in need of refinement in the mockups.

Research Questions

  1. How easy was it to find the emergency reporting feature on the prototype?

  2. Did you encounter any difficulties while navigating through the emergency reporting process?

  3. Were the labels and instructions clear and straightforward during the usability test?

  4. Did the prototype effectively guide you through the steps required to report an emergency?

  5. Were there any aspects of the emergency reporting feature that you found confusing or challenging to use?

Participants

5 participants 

  • Participants aged 20-22 who are active university students.

  • 2 male participants, 2 female participants, 1 participant from the LGBTQIA+ community.

  • Participants are familiar with campus community channels.

Methodology

15-30 minutes

  • Thailand, remote

  • Moderated usability study

  • Users were asked to report an emergency on a low-fidelity prototype.

Usability Study Findings

Utilizing the input gathered from participants, I proceeded to construct the affinity map, commencing with the process of digitally grouping related feedback and observations using FigJam. This digital approach allowed for seamless organization and manipulation of insights, akin to the tactile experience of arranging physical sticky notes. These insights were then meticulously sorted and classified into three distinct categories: confusion, discontent, and satisfaction. With the affinity map in place, I transitioned to the subsequent step, delving into the findings that emerged from this usability study.

Schedule Skimming Challenge

Participants had difficulty skimming through the class schedule quickly and efficiently. They reported that the layout and design of the schedule made it hard to quickly identify the information they were looking for, such as the day, and time.

Preferable Emergency Options

We found that users preferred to choose from a pre-defined list of emergencies rather than typing in their own report. Participants reported that they were unsure of what to report when given the option to type in a free-form description of the emergency. 

Dark Mode Suggestion

Users who typically use dark mode on their mobile devices found the user interface to be too bright. Participants reported that the bright color scheme and high contrast made it difficult for them to use the interface for extended periods of time, particularly in low-light settings. 

High-Fidelity Mockups

I enhanced the design based on usability research, improving user experience with clear class schedules, personalization options, and a direct chat feature. The transition from low-fidelity to high-fidelity prototypes involved integrating user-centered improvements and introducing dark mode for enhanced visual comfort.

Dark mode in Ulert caters to diverse scenarios, offering a visually soothing experience in low-light environments like late-night study sessions or emergencies. This modern design aligns with user preferences, ensuring readability and intuitive actions. Ulert's commitment to adaptability is evident, enhancing usability for seamless engagement.

High-Fidelity Prototype

Subsequently, I proceeded to develop a high-fidelity prototype utilizing this design for the second round of usability studies.

View Prototype

I designed potential responsive versions for the three different platforms – mobile, tablet, and desktop, by tailoring the designs to meet the distinct requirements across the three screen sizes.

What Ulert Taught Me

"Transforming Complexity into User-Centric Simplicity, One Solution at a Time."

Embarking on the journey of designing Ulert, I discovered the profound impact of adhering to each phase of the design process while intricately focusing on the user's needs. It was a tale of unraveling complexity and transforming it into solutions that not only functioned effectively but also brought tangible benefits to the end user. Navigating through the intricacies of the problem at hand, I found that a user-centric approach not only streamlined the design process but also enhanced the overall user experience. This narrative is a testament to the power of empathy in design, a force that empowers designers to craft solutions that resonate with users and achieve the desired results. It's more than a process; it's a journey of understanding, innovation, and creating meaningful impact.

Design Guides

Logo

Colors

Light Mode

#FE142D

#34C759

#FFFFFF

#ECECEC

#D9D9D9

#757575

#000000

Dark Mode

#BF0000

#0BA484

#FFFFFF

#A8A8A8

#282828

#1E1E1E

#000000

Decoration

#B2CCE5

#FF8A65

#FFE665

#FF8C8C

Texts

Heading 1

AaBbCc

32px · Rubik Bold

Heading 2

AaBbCc

24px · Rubik Bold

Heading 3

AaBbCc

16px · Rubik Bold

Body 1

AaBbCc

16px · Rubik

Body 2

AaBbCc

14px · Rubik

Buttons

Big

BUTTON

BUTTON

BUTTON

Small

BUTTON

BUTTON

© 2024 Shawn Chinnanon