Amine's Design
Overview
StopAware is a sleek, minimalist mobile app designed for public transit riders who want a peace of mind. Whether you're tired, distracted, or in a new city, StopAware makes sure you're always alerted before your stop - so you can ride with confidence.
My role
As the sole designer, I led the entire UX process—from research and problem definition to wireframing and prototyping—crafting an intuitive experience
Two Weeks.
One Project.
One Designer.
Concept Planning
Problem:
Public transit riders often miss their stop due to distractions, fatigue, or unfamiliar routes, leading to stress, lost time, and inconvenience.
Solution:
StopAware is a smart mobile app that alerts users when their destination is approaching by using GPS and custom notifications - so they never miss a stop again.
Chris Williams
​Age: 27
​
Occupation: Grad Student & Part-Time Cook
​
Location: New York City
​
Pain Point: Often falls asleep or gets distracted during long commutes.
​
Need: A reliable alert system that ensures he gets off at the right stop - especially during early mornings or late nights.
​
Goal: Stay relaxed during commutes without the anxiety of missing his destination.
Branding & Assets
Design System Decisions & Rationale
​
Color Palette
-
Midnight Navy (#0D1B2A) was chosen as the primary background to convey trust, professionalism, and stability—ideal for a utility-based transit app.
-
Sunrise Yellow (#FFC300) is used for alerts and highlights. It draws attention without feeling urgent or aggressive, making it suitable for non-emergency notifications.
-
Dark Cool Gray (#717C8A) serves as the card background, offering enough contrast to support hierarchy without overpowering the primary or accent colors.
-
White & Black text ensures readability in all light conditions and maximizes accessibility.
​
​
Typography
-
Kanit Bold for headings reinforces hierarchy while its rounded forms bring a human, friendly tone—especially useful for stop names and key UI points.
-
Open Sans for body text keeps the experience readable, familiar, and low-effort—ideal for small screens and low-light use.
-
Nunito Sans Bold (All Caps) for buttons strikes a balance between urgency and friendliness, offering high visibility with a soft tone for user actions like “Stop” or “Start.”
​
​
Iconography
-
Minimal line icons improve quick recognition under stress, supporting cognitive ease during travel.
-
Rounded corners across elements add a sense of safety and approachability—backed by visual perception research and mobile UX best practices.
​
​
Logo Design
-
Used rapid AI prototyping to explore transit + alert metaphors. Final logo: a white train on navy with a sunrise yellow location pin—simple, readable, and instantly recognizable. It reflects the app’s core values of clarity, calm, and trust.
Midnight Navy
​
Sunrise Yellow
​
Cool Gray
​
White & Black
​
Kanit Bold
Headings
Open Sans
Body Text
Buttons
Nunito Sans Bold
Prototype Build
GPS tracking assists the app to help sync the progress
Splash Screen
Home Screen
The Home screen uses a bold progress bar to show stop progress at a glance, easing anxiety for distracted riders. Key actions are simple and prominent for quick use on the go. The clean, dark UI with bright accents creates a calm, trustworthy experience.
When the alert goes off, the screen remains minimal to let the user easily tap a prominent "Stop" button. Like a snooze feature, the design avoids any visual clutter or distractions. A live GPS map is shown to reassure the user of their exact location as they prepare to exit the train.
Key Alert Screen
UX/UI Flow
Design Rationale: A Minimalist, Moment-Focused Transit Experience
Cancel Ride Sync
Finish Destination
-
Streamlined Interaction Model: The interface reduces cognitive load by utilizing a single input field and a unified "Start" action button. This removes decision fatigue and supports rapid task completion, especially in high-stress or time-sensitive commuting contexts.
​
-
Ambient Wayfinding via Progress Indicator: A subtle, animated progress bar provides a glanceable sense of spatial progress, allowing users to remain contextually aware of their journey without needing to engage constantly with the app.
​
-
Clutter-Free Travel Mode: Once a route is active, the UI enters a focused state, displaying only the destination and a discreet "Cancel" option. This reduction in visual noise ensures clarity and keeps user attention on the essential task—knowing when to get off.
​
-
Passive Reliability through GPS-Based Alerts: By leveraging device geolocation, the app automatically triggers an arrival alert—removing the need for manual station tracking and reducing user anxiety about missing their stop.
​
-
Supportive Yet Non-Intrusive UI Elements: Secondary actions such as Settings, History, and Help are visually minimized through iconography and positioned peripherally. They remain easily accessible while never distracting from the primary user flow.
​
-
Focused Problem Solving Through Minimalism: This product addresses a widely shared commuter pain point—accidentally missing a stop—with a uniquely calm and intuitive approach. Its design philosophy centers around restraint: one input, one action, and a single visual tracker.
​
-
A Purpose-Built Alternative to Overloaded Transit Apps: Unlike traditional navigation tools, this app intentionally omits excess features. It delivers only what matters in the moment: location-aware alerts, clear visuals, and an interface that stays out of the way.
Target User Feedback
Usability Study Results
The usability testing focused on critical moments within the app where users need clarity, speed, and flexibility. Feedback revealed opportunities to enhance the key alert screen, loading screen, and home screen to improve overall usability and support real-world travel behavior.
​
Final Review
UX/UI Enhancements for Improved Wayfinding and Alarm Interaction
AFTER
BEFORE
-
Refined Search Input Language: Updated the placeholder text in the search field from “Enter train” to “Enter station” to better align with users’ mental models. This change simplifies journey planning by allowing users to input any station—regardless of train line—streamlining navigation from various entry points.
​
-
Added ETA Contextualization: Integrated an estimated time of arrival (ETA) directly within the search bar to enhance clarity and support quick decision-making during route selection.
​
-
Introduced Navigational Redundancy: Implemented a “Go to Home” CTA on the Key Alert screen, enabling users to silence the alarm while optionally remaining on the live GPS-tracking interface. This provides flexibility in how users manage alerts without interrupting their location awareness. The name of destination is on the Key Alert Screen as well for more clarity.
​
-
Improved Visual Hierarchy: Adjusted the visual styling of the “Stop” button by changing its font color to yellow. This contrast reduces potential cognitive friction and misclicks, particularly during abrupt transitions to the Key Alert screen.
​
-
Enhanced Feedback Through Visual Affordance: Applied a semi-transparent overlay to the Key Alert screen that fades out upon pressing the “Stop” button. This interaction mimics familiar UI patterns (notably iOS alarm dismissal), offering a visually intuitive confirmation that the alarm has been successfully deactivated.
​
Lesson Learned:
Usability testing showed that even small language and visual tweaks can greatly improve clarity and confidence. Aligning with user expectations—like updating labels or adding contextual cues—helped reduce friction and support faster decision-making. I also learned that providing flexible navigation and clear feedback reinforces trust and ease of use.
​
​