CHAMIRA PERERA
VANCITY CYCLYING
OVERVIEW
VanCity Cycling is an Android mobile app designed to facilitate travel for novice cyclists in Vancouver. Developed as an academic project in collaboration with CityStudios, our two-person team aimed to promote cycling as an alternative mode of transportation for Vancouver residents.
PROBLEM STATEMENT
.png)
CityStudio Vancouver is an innovation hub that fosters collaboration among city staff, students, faculty, and the community to create experimental projects that enhance Vancouver's sustainability, equity, joy, and inclusivity. In our mobile development class, CityStudio representatives presented a challenge: to develop a mobile application that would offer an interactive, virtual cycling map to help people plan and explore routes in Vancouver.
IDEATION
My teammate and I were intrigued by CityStudio's challenge, and we utilized the provided data to tackle the issue at hand. Our idea centered around creating an app that encourages bike riding as a transportation option. The main feature of the app was providing navigation for cyclists along their chosen routes. To cater to novice riders, we incorporated additional features like a cycling checklist, city bike laws and safety information, temperature readings, and more. We visualized each idea through a layout to gain a comprehensive understanding of the app's structure.
Vancity Cycling Interface Map
RESEARCH
Our research focused on implementing the features conceived we ideated. We explored methods for setting up cycling route navigation, a checklist system, account preferences for favouriting routes, and a resource interface offering cyclist friendly data and features such as bike safety, weather information, and dark mode.
Navigation
​Sign-up/Accounts
Checklist feature
.png)
Resources page
DESIGN
FIGMA
I designed the interface for each page in Figma, starting with wireframes and exploring various colour palettes. Eventually, we decided to use Vancouver's colour palette to align the app with the city's identity. After completing the interface design, we proceeded to code the layout in Android Studios using XML .
ANDROID STUDIOS
MAP
The main map activity utilizes the Maps API to display a built-in map, with the default location set to Vancouver, BC.
Map Main Page
Create routes to landmarks
Find routes with two locations
Cycle popular routes in Vancouver
CHECKLIST
The checklist enables users to create checklists with to-do items, aiding them in planning their cycling trips. The data is stored in an SQLite database, and users can update the checklist's name, description, and individual to-do items.
Create Checklist
Fill in checklist details
Create multiple checklist
Add items to checklist
RESOURCES
In our application, the resource activity provides data such as Vancouver's temperature and weather, accessed through web services and JSON data. We include a speedometer to display the rider's speed using GPS. Additionally, air pressure sensor data is displayed allowing cyclists to monitor changes in altitude during their trips.
Resources page
BC cycling laws page
Cycling safety in BC
Weather warnings before trips
ACCOUNT
When launching VanCity Cycling, users can log in or create an account. The account activity displays user information retrieved from SharedPreferences, including favourite routes. Users can manage favourites, start routes, and customize preferences for dark/light mode and cycling alerts.
Edit user profile
Access different app settings
Favourite routes saved here
Dark mode available
RESULTS
Our app addresses CityStudio's task of providing an interactive cycling map for Vancouver. Future development ideas include a route rating system. Our group also got the opportunity by City Studios to present a demonstration of the VanCity Cycling app to Vancouver's transportation division.
Check out a run through of the app:
LESSONS LEARNED
During the project, we explored Android app development, implementing various features like intents, shared preferences, SQLite databases, GPS functionality, maps API, and sensor integration. We also integrated Vancouver's weather by accessing a weather API to retrieve the data. Lastly, we utilize device sensors such as air pressure, light, and temperature sensors to gather relevant data and provide safety updates.
.png)
Retrieving user data in app was a learning experience for this project
Check Out My Other Projects
FH Call Center Redesign
Shoe Addiction
Valorant
Pom & Chi
Recur
Styler