toronto by bike
Type: Type: UX/UI Design, Information Architecture, Research
Role: Lead Designer, Researcher, Art Direction, Graphic Designer
The challenge
In what ways can we assist users in safely, efficiently, and accurately navigating Toronto via a bicycle?
Guiding our users to navigate Toronto with safety and efficiency in mind
Discovering a fresh city is an enjoyable and exhilarating experience, and with Toronto's well-developed road network, it becomes feasible to embark on this adventure using a bicycle. Our project aims to assist users throughout their exploration, ensuring both safety and efficiency. Cycling is an excellent choice for low-impact cardiovascular exercise and boasts the advantage of leaving behind fewer carbon footprints compared to cars.
User interviews
I have completed 4 interviews. These individuals are a combination of Toronto and international cyclists and tourists.
Tell me about a time you visited a new city or town. What transportation did you use?
How often do you visit other countries?
If you can do a walking or cycling tour, would you do it?
What would make your walking/cycling tour easier?
Is it important for you to stay active?
What can we do to make your journey better?
What were your biggest transportation problems as a tourist?
Interview insights
Before the interview process, the app was thought to be a walking tour app. During the interviews, it was clear that some of the sights are too far from each other to do a walking tour. While we may keep some sections for shorter tours, the app has pivoted into being a cycling tour app during the interview process.
User personas
Michael Hernandez
Age: 26 years old
Occupation: Computer science student
Nationality: Canadian
Desires: Wants people to be more aware of cycling tours
About
Michael is a computer science student at TMU in Toronto. He’s an avid cyclist and traveler. He rides his bike everywhere during Spring, Summer and Autumn.
Michael’s goals and motivations
Michael’s goal is to advocate for cycling tours in Toronto as he thinks the city is well-equipped with nice paved roads, landmarks in close proximity and great Summer weather.
Michael’s frustrations
Michael feels that while Toronto has a good potential to be a bike-friendly city but the people will need to make use of the roads for the trails to become permanent.
Quotes
“Cycling has been one of my favourite Summer activities - I think that it should be given more attention as it is one of the best ways to discover a city. If I want to see something, I don’t need to find parking I just get off my bike and experience it.”
“The Bloor St. West bike lane is great. It needs to be used to its full potential. We’ve got tons of things to discover on that street so it should be heavily advertised. ”
Abby Whitmore
Age: 28 years old
Occupation: Nurse
Nationality: Canadian
Desires: Wants tourists to discover the sights that are usually not on people’s itineraries during their visit to Toronto
About
Abby is a nurse who has worked in her position for 6 years. She loves Toronto and thinks that the city has a lot more to offer other than the usual landmarks that are recommended. On her free time, she likes to explore different neighbourhoods, try different cuisines, visit parks and drink craft beer.
Abby’s goals and motivations
Abby’s goals and motivations are to showcase Toronto as a city full of ‘hidden treasures.’ Abby thinks that by guiding our users through different paths, we can show them these ‘hole in the walls’ between landmarks.
Abby’s frustrations
There are a lot of amazing restaurants and bars in Toronto that close down due to lack of customers. She believes that we can help feature small businesses and help them gain more customers.
Quotes
“Toronto has such a unique and amazing cuisine and bar scene. I think we need to add them to the recommendations list because they can gain a lot from these new clients.”
“I love walking around different neighbourhoods just to try different restaurants and bakeries. I think a ‘heat map’ of such venues will help drive customers to the areas.”
The solution
The solution we are proposing is a mobile application that users can use while they are on a tour. With this app, they can select a tour based on their preference. A customizable tour is also available for people who want to add or subtract sights. We will also guide users so that they can have a safe, efficient and fun tour. What makes this app unique is that no other application has offered a service like this before. Toronto is in a unique position because of its BikeShare infrastructure.
Information architecture
Site map
User flow
Task 1: User 1 wants to customize Tour 1 and add a stop.
Task 2: User 2 wants to know the operating hours of the first stop of Tour 1 - the Royal Ontario Museum.
Lo-fi sketches
Here are some initial drafts I delved into for the homepage. It was important for me to come up with plenty of options as the project is very complex. I put an emphasis on smaller shapes so that more information can be displayed with features such as horizontal scrolling to make use of the space.
During the development process, I thoroughly examined various iterations of the route details, with the primary goal of providing users with a comprehensive step-by-step guide. To ensure an optimal user experience, I devised several options for displaying photo thumbnails, route information, and landmark details. My intention was to maximize the use of space while avoiding clutter and overwhelming the app with excessive information.
Hi-fi sketches
Presented here is the high-fidelity sketch of the design that I ultimately selected for the app. My vision for the page revolves around showcasing different tour types in a variety of organized ways. One approach involves using smaller thumbnails and employing a horizontal scroll, while another section features larger photos that users can view in intricate detail by simply clicking on them.
By incorporating diverse presentation styles, we can ensure that the app remains engaging and avoids monotony by steering clear of repetitive patterns. The prominent use of the horizontal scroll is a key feature, enabling us to efficiently present a wealth of information within a condensed space without overwhelming the user with an information overload.
I explored several versions of the trail details, aiming to offer users a comprehensive step-by-step guide. To enhance user experience, I plan to incorporate a collapse button that allows them to reveal additional details if desired.
Branding
The brand design draws inspiration from the serene and inviting Sky Blue shade found in the Blue Jays color scheme. This delightful hue conveys a sense of tranquility and joy. The wordmark showcases a timeless serif font with a touch of elegance in its italics. The design was carefully crafted to maintain simplicity and classic aesthetics, ensuring that it gracefully enhances the app's features without overpowering them. Altogether, it beautifully complements the app's overall appeal.
Logo
Icon
App button
Typeface
Color palette
#3ABFEF
R58 G191 B239
C63 M4 Y0 K0
#F2F2F2
R242 G242 B242
C4 M2 Y2 K0
#444444
R68 G68 B0
C67 M60 Y59 K44
#000000
R0 G0 B0
C75 M68 Y67 K90
#FFFFFF
R255 G255 B255
C0 M0 Y0 K0
The mobile application
The mobile app offers a diverse range of tour categories to cater to various preferences. The primary selection comprises main tours thoughtfully organized according to distance, time, and the number of sights to explore. Additionally, we've curated specialized tours under distinct categories, such as Architecture, Food, Nature, Heritage, Sports, and Shopping, providing users with a tailored experience.
For nature enthusiasts, there are scenic trails that span from lush parks to vibrant streets, each offering a unique perspective of Toronto's beauty. We've made sure that all tours and trails are customizable, empowering users to personalize their journey. Whether it's adding or skipping landmarks, users have the freedom to shape their adventure as they desire.
Moreover, for the convenience of those utilizing bikeshare services, we've carefully selected stops with Bikeshare stations, allowing bike renters to easily park their bicycles during the tour. This thoughtful feature ensures a seamless and enjoyable exploration of Toronto's wonders.
On the trail page, you'll find an intuitive layout that enhances user experience. It presents the stops in a horizontal scroll, accompanied by an interactive map and a comprehensive section dedicated to providing detailed information about each landmark.
This design enables users to plan their biking journey effectively by gauging the distance between stops using the map. Whether they're interested in a leisurely ride or a more brisk pace, the tour duration can be easily determined.
The Routes section further elaborates on these details, allowing users to gain a comprehensive understanding of the trail. The beauty of our system lies in its flexibility – users have the freedom to bypass any stop they prefer. The map will then seamlessly redirect them to the next landmark, using the safest and most tourist-friendly streets available. This ensures a secure and enjoyable exploration of the trail, tailored to each user's preferences and safety in mind.
Within the landmark section, we've incorporated a convenient collapse button that enhances user interaction. When users click on this button, the corresponding tab expands, revealing in-depth details about the landmark.
Through this expandable feature, users gain access to a concise summary of the landmark, along with direct links to TripAdvisor reviews and the official website. For added convenience, we've included buttons that allow users to take immediate action – whether it's making a phone call, sending an email, or purchasing tickets – without the need to visit the website separately.
This streamlined approach ensures that users can effortlessly explore and engage with each landmark, obtaining essential information and taking action with just a few clicks.
After the user visits a landmark, the corresponding tab will transform into a pleasing blue hue, adorned with a checkmark, signifying its completion.
At the bottom, we've included an 'Add Stop' button, empowering our users with route customization capabilities. The app proactively suggests nearby places, restaurants, and bars to enhance their journey. Alternatively, users have the flexibility to employ the search button, enabling them to add additional stops of their choice, ensuring a personalized and delightful exploration experience.
