Nova Harbour Transit
Where transit is all about you!
Timeline: 4 months
Design Manager Responsibilities: Research, Ideation, Wire-framing, Prototyping, Visual Design, Animation
Tools: Figma, Illustrator, After Effects, Photoshop
Mentor: Josh Skinner
Designers: Savannah Baraniuk, Sofiia Sanzharovska, Marina Walsworth
This was part of the RGD Project Based Mentorship Program 2025.
You can find the project linked on the RGD’s website here.
Background
Nova Harbour, a fictional Canadian city bordering Lake Ontario, has experienced a significant population surge over the last decade. In response, the city's transit system has rapidly evolved to support the growing number of residents and increased tourism.
Current state
Transit updates have historically been provided through third-party apps, TV screens at transit stations, and physical transit maps. However, the city's demographics are shifting towards a predominantly millennial population, who prefer receiving updates directly on their mobile devices.
Objective
To develop a comprehensive and user-friendly transit app that caters to the tech-savvy millennial residents of Nova Harbour, ensuring they receive real-time updates and information through their preferred digital channels, and to provide a space for tourists to discover points of interest in the city.
Goals
Positive user feedback on ease of use.
Reduction in user-reported transit-related issues.
Users are able to discover points of interest in the city.
Real Time Information: ensure that real-time transit updates, including bus/train locations and arrival times, are prominently displayed.
Intuitive Journey Planning: implement a user-friendly journey planner that provides the most efficient routes.
Design with Accessibility in Mind: the app will be used by a diverse general population with varying technological backgrounds.
Archetypes
-
Problem statement
How might we design a transit app that helps millennials navigate inconsistent bus schedules and crowded transit options to enhance their commuting experience?
AttributesFrequent user of popular ride-sharing apps.
MotivationsConvenience
Punctuality
Seamless transportation experiences.
Pains
Inconsistent bus schedules
Crowded buses
Long wait times
Difficulty planning routes in advance and while on the go.
-
Problem statement
How might we design a transit app that helps tourists navigate a city they aren't familiar with while on the go, and introduce them to potential points of interest in the city?
Attributes
Goal is to efficiently navigate a city they are unfamiliar with while discovering interesting tourist attractions and landmarks.
Prioritize user-friendly interfaces, offer seamless navigation, and provide personalized recommendations for travellers.
Motivations
Motivated by the thrill of discovering new places and experiencing different cultures.
Values convenience and accessibility in tools that can help them explore a city.
Pains
Finds it frustrating when they get lost in an unfamiliar city or misses out on must-see attractions due to lack of information or guidance.
-
Problem statement
How might we build a transit app that provides reliable real-time updates to help students get to class on time, and meet up with their friends
Attributes
Wants to make the most of their post-secondary experience by exploring the city and building lasting friendships.
Motivations
Motivated by personal growth and academic success.
Values efficiency and convenience in their daily routine to make the most of their time.
Pains
Struggles navigating the city's public transit system, especially during rush hours when delays are common.
She finds it stressful to coordinate meeting up with friends when schedules are tight.
-
Problem statement
How might we build a transit app that is simple, straightforward, and reliable for the Elderly to use to get around the city?
Attributes
Is familiar with popular tech brands but prefers brands that are known for their user-friendly interfaces and reliability.
Motivations
Desires to stay connected with their community and friends.
Values social relationships.
Wants to remain active and engaged despite mobility limitations.
Pains
Struggles with using complex technology and prefers simplicity and ease of use.
Finds it frustrating when they are unable to understand how to use new apps or devices.
Worries about getting lost or missing appointments due to unreliable transportation options.
Workshop: Crazy 8s
We started off with the “Crazy 8s” ideating activity. We “sketched” out 8 ideas in 8 minutes of what the ideal experience would look like to us. This was not for fully fleshed out ideas. We were encouraged to be a bit “out there” instead.
Workshop: User Stories
From the eight ideas, we now create one. We could build on a previous idea or combine elements from several ideas from the previous round.
This is where we start to think about the practicality of our ideas. The question we wanted to answer was “How might people actually use this?”
User Flow Charts
As a senior I want to look up a commuting route and share it so that my daughter knows I made it to my destination.
As a tourist I want to purchase my day pass ticket in-app so that I don’t have to struggle at machines or with drivers.
As a tourist visiting the city I want augmented reality (AR) to show me where my stop is so that I do not go to the wrong place during my travels.
As a tourist visiting Nova Harbour, I want to generate itineraries based on my preferences so that I can easily explore the city without planning every detail myself.
App Structure
Wireframe Development
The map had a few important elements that needed to be included. First off, the map itself. It is mainly achromatic, but the natural areas of grass and water use colours from our brand kit. Nearby bus stops show: the bus route number, route colour, and next two bus arrival times. Small coloured dots (green, amber, red) indicate whether the bus arrival times are on time, delayed, or significantly late. There are three features accessible from the NHT homepage map: Explore, AR, and Report. They all have icons as well as written descriptions as users may not be familiar with them. The buttons are larger than standard (70 x 70px) and have a drop shadow to differentiate them from the map under them.
Hot spots allows users to save key locations including home or work to help personalize trip suggestions and make their navigation experience as efficient as possible. The basic structure had labeled input fields in a simple, linear layout. The goal was to map out a clear input flow and show how users could easily add and manage multiple hot spots. The visual hierarchy was strengthened through padding, label styling, and reducing visual clutter, making it easier for users to scan and fill in information. This can be especially seen in the bottom of the screen where “Add another location” and “Next” are. Text fields were updated to include more intuitive placeholder copy (e.g. “enter your home address”).
Tried different numbers of buttons per row, as well as options for how the button icons and labels would be contained. Once the design system was more established, a Text + Icon button was created which was used instead. The buttons being brightly coloured was overwhelming. Using buttons with our brand colour as backgrounds was very minimal throughout the application, so we switched to our simpler light grey.
The augmented reality (AR) feature of NHT helps users to walk on the correct route and/or find the correct bus stop for their route. If not actively on a trip, NHT shows the closest bus stop that the user is walking towards (within a 1km/10 minute walking distance). When actively on a trip, NHT shows whichever step of the route the user is currently on. All instructions appear in black text on a white bubble to maximize readability. High contrast colours are used for the navigation lines to improve visibility against varying backgrounds. The application automatically changes from its day or night views accordingly. Users can take pictures of their current view in NHT to save to their camera roll. This could be to remember for later if their data connection is unstable, or to send to someone else.
We first tried indicating time through more generalized time blocks based on the time of day (morning, afternoon, evening). We also had an option to type in specific times. We decided the vague blocks were ineffective and unnecessary if we were going to included the specific time field, so we removed it.
This screen focused on the start of the “Hop-On-Hop-Off” and “Itinerary” flows, when NHT generates plans for the user based on their preferences. Designs first focused on laying out the basic card structure, helping visualize how trips would be listed and selected. The navigation bar was removed to minimize distractions while choosing a trip. Visual hierarchy was improved using shadows and consistent spacing to better separate each itinerary and draw attention to key content. Icons and visual cues were added to reinforce interactions and help users understand the function of each element.
We tested various ways to display search and filter options, ensuring they were clear but didn’t take too much space. Started with a darker features (like buttons and navigation) for contrast, but later moved to a lighter, cleaner interface for better consistency with the rest of the app. Location cards were refined using more structured spacing, rounded corners, and subtle shadows to improve visual appeal and readability.
Large, engaging photos with rounded edges make the screen visually appealing, match other design elements in the system, and help users get a quick understanding of a location. There are two main buttons: one opens the location on the in-app map, while the other directs users to the venue’s own external website, where they can find more information. The expanded review section was removed as the design needed to be scaled down for the MVP.
This screen shows ticket details, purchased tickets, activated tickets, as well as links to discounts and the user’s digital wallet. We moved Ticket History to the Account section as it is accessed less frequently. Colours and status labels were refined to highlight what’s in use and what’s ready to start. For example, a simple “Start” button for unused passes, and their active state in red. The main navigation and header evolved from dark to light themes to better match the rest of NHT’s design system. The final design is clean and spacious: with rounded buttons, consistent accent colours, and subtle shadows which make it easy to quickly see ticket details and actions.
This screen shows tickets for purchase, as well as links to discounts and the user’s digital wallet. The name and price of each ticket is shown by default. Each ticket can then be expanded for additional information including duration and transfer conditions, ensuring they make the correct ticket purchase for their needs. The final design is lighter and more user-friendly and keeps everything easy to use.
The confirmation screens help users make their ticket purchase. An itemized list shows ticket type, price, and quantity. Increase (+), decrease (-), and remove (x) buttons were added if a user wants to make last minute changes. The total cost was added to help users check the final amount before proceeding to payment.
Adding a credit card or other payment method on NHT is simple. Payment options like Stripe, Visa, PayPal, and GPay are shown with an information input form below. Spacing and layout were adjusted to keep all payment options easy to tap, while the card entry fields were made clearer and more readable. Hints and input labels help users enter details correctly, with sections for card number, expiry date, CVV, and cardholder name.
Design System & Components
High Fidelity Wireframes
