nocturnal
Role
UX/UI Designer
Project Overview
Working in a team of three designers for Rice University's three-day 2024 Designathon, we designed a mobile application that aimed to increase safety for undergraduate students when traveling at night.
Skills
Figma
Timeline
3 days
Prompt
"Design a digital application that addresses a challenge that undergraduate students may face."
As undergraduate students, you're no stranger to the challenges that can come with navigating college life. There's a wide net of opportunities to be explored and addressed, whether that's related to academics, relationships, well-beings, or, even more broadly, managing the everyday skills that come with adult life. We encourage you to think back to challenges that you have personally experienced or that you have seen others experience. Oftentimes as designers, great ideas and stories come from a place of empathy.
Brainstorm Process
Concluded to build upon the HMW statement of "How Might We increase student safety at night within college campuses?" during the brainstorm process of answering the prompt.
As UC Berkeley students, we saw it was relevant to tackle the safety issue we experience at night.
Research Stage
#1: Secondary Research #2: User Interviews
Reddit allows users to express their thoughts and experiences anonymously. Several Asking UC Berkeley students questions about their sense of safety on campus allowed us
posts portray the sense of feeling unsafe at night around campus. to gather data regarding undergraduate safety concerns and knowledge about local safety
resources.
Dangerous Personal Encounters from Reddit.com
Berkeley UCPD posts Daily Crime Logs, illustrating the consistent recording of crime
logs on campus.
Questions Asked
1) Gender?
2) Do you identify with any of these categories (female-identifying, person of color, LGBTQ+, disabled) or any other marginalized communities?
3) How many days on average do you go out at night during the week?
4) What time do you typically leave campus in the evening?
5) Reasons for going out at night? (social events, errands, meals, recreation, class/decal, clubs, other)
6) General feeling of outdoor safety in UC Berkeley when sun is up? (1: not safe at all, 5: very safe)
7) General feeling of outdoor safety in UC Berkeley when sun is down? (1: not safe at all, 5: very safe)
8) What is your most frequent method of transportation at night? (walking, bus, scooter/bike, uber/rideshare, car, don't go out at night, other)
9) What makes you feel safer at night? (traveling with others, having a safety item like pepper spray and taser, lit up areas, other)
10) Which UC Berkeley safety resources are you aware of? (Bearwalk, night shuttle, blue light emergency phones, UCPD (non-emergency/emergency))
11) What do you like about these resources? (features, availability, convenience, etc)
12) How often do you use these Berkeley student safety resources? (1: never, 5: of course)
Synthesizing Our Research
Key Takeaways
Utilizing the data from user interviews, we were able to visualize how to improve the safety concerns of undergraduate students.
increase in feeling safe when with groups of other college students, especially when walking
conditions students feel safe walking in
students are not aware of all avaliable safety resources
lack of efficiency deters use of safety resources
User Personas
Created our target audience for this mobile application by highlighting the issues UC Berkeley undergraduate students expressed through two user personas.
Yuna, 21
About
-
UC Berkeley Student
-
junior transfer, mechanical engineering major, woman, POC, 5' 2
-
lives in Southside, Berkeley
Personality
-
introvert
-
creative
-
organized
Needs
-
stays late on campus studying -- feels unsafe walking home
-
usually studies alone
-
does not know many people because she is a transfer student
Goals
-
safer commute home at night
-
meet other Berkeley students she feels comfortable around
Jeremiah, 19
About
-
UC Berkeley Student
-
sophomore, media studies major, non-binary, POC, 5' 8
-
lives in Downtown Berkeley, Berkeley
Personality
-
extrovert
-
creative
-
punctual
Needs
-
has class until 8 PM, club meetings until 10 PM
-
most of their friends live in another part of Berkeley
-
cost efficient and timely methods of transportation
Goals
-
find friends who also live on the same side of campus
-
has a strict schedule and likes to be on time
Ideation Stage
Brainstorming
Laid out various ways we can incorporate the concerns of students' night safety while taking inspiration from existing mobile applications.
2x2 Matrix
Measuring the reliability and efficiency of night transportation on college campus. --> How can we make walking more safe at night?
Higher Safety
Lower Safety
High Efficiency/Reliability
Low Efficiency/Reliability
Wireframe Brainstorm
Brainstorming
Planning the flow of the mobile screen designs and their functionalities.
group option
chats
connecting people in chat with same end/start destination
create separate chat when max people # is met
when met up, facial recognition for verification
walk starts
chat gets archived once trip ends
feedback/any inappropriate behavior gets reported
University login + ID scanning (info input with AI)
University ID + facial recognition
select tags
Bearwalk
night shuttle
option to report crime/unsafe behavior with emergency button
input location
input description of culprit/incident
AI face generation based on culprit description
input AI feedback/notes
sent to university/local police
Design System
Night Mode Theme
Incorporating the time and use of this application, the design system utilizes warm, dark colors to contrast with the bright, large typography.
Logo
Typography
Colors
Icons
Buttons
Low + Mid-Fidelity Design
nocturnal Screen Walkthrough
Due to the limited time of the Designathon, we combined both low and mid-fidelity designs during this stage. The screens flow from left to right on each row.
Report Incident Screen Walkthrough
These screens are shown when the alarm button on the top right corner is pressed.
High-Fidelity Design
nocturnal Screen Walkthrough
The screens flow from left to right on each row.
Report Incident Screen Walkthrough
These screens are shown when the alarm button on the top right corner is pressed.
Concluding Thoughts & Improvements
If More Time Was Given, Better Design Choices Would've Been Made
Taking a second glance at my Designathon submission, I would have explored other design choices:
1. This app holds a huge dependency on AI image generation to picture potential suspects. Currently, image-generating AI models are reported to be biased and inaccurate in many cases. I would explore other ways to effectively incorporate AI in a digital application.
2. During dangerous situations, users may find it difficult to accurately input descriptions and prompts into the text boxes. This furthers my previous statement on needing to better integrate AI in a digital application.
3. I do not think the sense of urgency is brought across from the small button in the top right corner. To catch the user's eye on this button, I would iterate several ways I can enhance its size, color, and position on the screen to visually display the important use of the button.
4. While I wanted to follow the night theme of the app within the color scheme, the dull colors do not invite the user to use this application. Therefore, I would explore more comforting, playful, and visually interesting color palettes to attract college students to use this app.