Bike Locker: iOS mobile app design for bicycle safety (UX case study)
An app that shows free and more secure bicycle parking locations
The current bike parking landscape in Vancouver is appalling since it’s very prone to consistent bike theft. Hence, Vancouver cyclists have little confidence in securing, what is for many, their primary mode of transportation. Bike Locker is a burgeoning community service in Vancouver, BC that helps people find secure short-term bicycle parking locations around the city, in order to reduce the risk of theft and/or vandalism. Bike Locker (the “clients”) came to us to help them create the Minimum Viable Product (“MVP”) of this app, which they also referred to as Phase 1, in order to get the iOS app kickstarted. The clients’ plan was to develop the app into various phases until it reached its final form.
Our objective was first to design the app as a crowd-sourced based app that is integrated with Google Maps, allows navigation, shows public and free bicycle parking spots, and allows the user to provide ratings and feedback. This product had to have the capacity of becoming a scalable product that would lead to its final vision, which was ultimately quite different from the MVP’s form. The app’s future final phase would allow cyclists to reserve a protected bicycle parking spot ahead of time through private accounts, thus decreasing bicycle theft in Vancouver. However, our clients acknowledged that they still had much work to do in order to deliver this final product to the cyclist community.
Our group consisted of 3 UX designers and 3 UI designers –my role was UX designer. This job took 3 weeks and our key tools were Sketch and Invision.
Objectives
1. Research
Domain research
We first started by doing domain research in order to discover the potential reach that our clients’ app could have (i.e. what’s the bike theft situation in Vancouver? How many secure and paid bike parking locations are currently available?). It became very clear from the beginning that bicycle theft in Vancouver is a huge problem, and that the secure bike parking landscape is lacking, to say the least.
When looking at other bike-friendly cities such as Amsterdam or Toronto, bike theft also runs rampant. However, these cities have started to implement solutions for secure bike parking, such as Amsterdam City Council’s guarded bike parking facilities, or Toronto’s Bicycle Parking Strategy. Compared to these cities, Vancouver is pretty behind in addressing secure bicycle parking locations. This meant that our clients' app final version would truly seek to address and alleviate a significant issue that Vancouver cyclists face on a day-to-day basis.
Competitive and comparative analysis
We then proceeded to make a competitive analysis of the available bike parking locations out there, and a comparative analysis of apps that have similar elements to our clients’ app.
In the chart above, the first seven are Vancouver bike services, while the last two are solely US-based apps that involve bike parking but do not seem to have high user engagement. As per the comparative analysis, Car2Go and Evo came closest to what the app could ultimately look like as they both offer map views of available cars and parking spots, navigation tools, and reserve features. On PayByPhone, we were interested in the pay-for-a-spot and extend stay features. On SpotHero we looked at their parking reservation services. On Strava we looked into mapping, receiving kudos, collecting badges, follows, and stats sharing. Finally, we took a very close look at Google Maps’ characteristics.
Survey and Interviews
We wanted to learn more about cyclists’ impressions of bike safety and parking in Vancouver, thus we interviewed 7 cyclists and launched a survey from which we obtained 141 responses within 24 hrs –the majority of respondents were Vancouver cyclists.
This data visualization shows the most important findings from our user research and interviews. They point out that 1) Bike security was a cyclist’s primary concern, 2) The great majority of respondents have had their bikes stolen or vandalized in the past, and 3) The majority of respondents would be interested in contributing content to an app that serves to the local cyclist community. People wanted to stop guessing where to park, and mentioned that a map with suggested bike parking locations would come quite handy.
The challenges
1. How do we provide value in a crowd-sourced app that shows free bike parking locations (aka. bike racks)?
2. How do we display and quantify security levels?
3. How do we give the MVP the capacity to become scalable from a free crowd-sourced based app into a digital parking reservation service app?
4. How do we motivate users to contribute to the crowd-sourced based app?
The solutions
1. We decided that the MVP would bring value if it had the potential to become a database compilation for users. A database that would show the most up-to-date information in regards to all the free bike parking spots in the city, hotspots that indicated areas that were more prone to theft and vandalism, and areas that seem safer as per the community’s experience.
2. At the MVP stage, we could not guarantee to the users that their bicycles would not get stolen. However, we could advise the users in advance whether certain places did not have adequate bike parking situations, or were more or less secure than other areas in the city. In that way, users could plan in advance their bike parking plans accordingly. We decided we needed to come up with a visual way for people to intuitively know the security level in the area at a glance.
3. The clients had asked us for the crowd-sourced app to request users to register. We opted for the registration feature to allow users to book parking spots in future phases. Paid locations would be added to the app in addition to the already established free parking locations — the app would show both free and paid locations in its final phase.
4. The last challenge to address was potentially the hardest of them all: How to motivate users to willingly contribute information to the app? We combed the research’s results and found the answer to our question. People largely mentioned that they would contribute to the app because:
A) It was the right thing to do for the cyclist community (altruism)
B) They knew they would get something in return (reward)
These findings allowed us to create our User personas.
Although the common practice is to create just one User persona or a primary and secondary one, in our case we had two primary User personas. What differentiated them was their primary motivations to willingly provide content to the app: User persona 1 — Brian spoke for those users who wanted to receive rewards for their time and participation, while User persona 2 — Emma spoke for those users who wished to contribute in order to support the cyclist community. Both personas had the same primary goals: Finding secure bike parking and locating convenient locations to park their bikes.
2. Planning
Storyboards
I created for the team these storyboards for Emma and Brian, which visually represented their pain points in regard to bike parking and security:
Affinity diagram — feature prioritization
Through the affinity diagram, we gathered that the app should be easy to use, have a minimal design, show a map of bike parking spots that would be integrated with Google Maps, allow navigation to a location, provide security levels/ratings of parking spots, user reviews, photos, and allow users to add a free bike parking spot that is not showing up in the map. We also secured the participation of one bicycle-related vendor in order to commence the app’s rewards system.
User Flows and Sitemap
We later depicted the User personas following five User flows in the app. The main User flows are indicated by the (*):
1. Find the most convenient and secure bike parking location. *
2. Follow directions to arrive at a destination (user is taken outside of the app to use the Turn-by-turn navigation of either Google maps or Apple maps).
3. Provide information on an existing location. *
4. Add a new location on the map. *
5. Build a profile.
Once the User flows were done we moved into planning the app’s sitemap, which allowed us to organize and visualize how the individual app pages and sections would relate to each other:
3. Design and testing
Paper prototyping
In order to get our ideas flowing, we did a “design studio” and compared our ideas. This led to the sketching of the paper prototypes. These low-fidelity (“lo-fi”) prototypes facilitated testing and iteration.
Displaying and quantifying security levels
Since the app was integrated with Google maps, the easiest way to show the city’s bicycle rack locations was to represent them as pins. During our research phase, we managed to find Vancouver’s bicycle racks locations information from the City of Vancouver public domain documents, in the form of a CSV file. We met with the clients’ app development team to verify whether that information could be ingested into the app in order to originate the pins. The developers reviewed the CSV file and confirmed it was feasible.
We next decided to have those map pins color-coded. This would allow users to get a quick security-level overview. Our theory was that with time, accurate theft hotspots would gradually appear in the app as users contributed. We had also come across a 2017 Vancouver bike theft hotspot report generated by the Police and considered using these locations to kickstart the app with the first known theft hotspots in the city. After discussing with the UI team about the pins’ color coding, we decided that there would be five colors that range from red (less secure spot) to green (more secure spot). Charcoal pins would represent that no information was available about that location yet.
Subsequently, we discussed the rating system for the locations. Giving them the typical star system seemed odd for a bicycle city rack. After throwing some ideas, we set upon the padlocks rating system. 1 padlock represented that location was not secure, going all the way to 5 padlocks, which represented the location was located in a secure area. Users would give a visual rating of the location’s security as per their experience at that location and area. Our hypothesis was that padlocks were intuitive enough for people to understand they meant security.
Testing
We then proceeded to extensively user test our prototypes with multiple users. We gave them the following tasks: 1) Find secure bike parking close to a place you’re going (type Whole Foods at Cambie St.); 2) Add a new bike parking spot that doesn’t exist on the map; and 3) Provide feedback about an existing bike parking spot. Overall, the users interacted smoothly with the app and were capable to complete the tasks. We gathered the following key points from the users’ feedback and our observations:
1. User testing confirmed our hypothesis that the filled padlocks were easily understood as reflecting security levels.
2. Our ‘Add Spot’ button, which is one of the key functionalities in the app, needed to be bigger and located at a more prominent place in the app. Moreover, the ‘Add spot’ screen would look better if it came upon a different screen.
3. There was some user confusion over the labels for comments -we tried ‘Leave location feedback’, ‘Review Location’, ‘Comments’, etc.
We ended up doing a differentiation of what ‘Review’ vs ‘Leave a comment’ meant. The former consisted of the location review as a whole (security rating, picture, and comment), while the latter solely referred to a user’s written comment.
4. We kept a close eye that the functionality of both the small and expanded information trays was clear for the user. We noted any hesitation or clear gestures that the user portrayed while reviewing these information trays. Users understood the information within the trays — the only exception was the aforementioned comments and reviews section.
Users suggested we use an upwards chevron instead of a line in order to expand the tray, as the expanded tray already showed a downward chevron. Visual consistency was important.
Mid-fidelity (“mid-fi”) prototypes
The testing and iteration of lo-fi prototypes informed the design of the mid-fi prototypes. We proceeded to test these further, in order to ensure that their functionality was clear and smooth for the user.
High-fidelity (“hi-fi”) prototypes
Once all testing was concluded our UI team proceeded to create the high-fidelity (hi-fi) wireframes. These advocated for simplicity and functionality. The image below shows the ‘Add Spot’ screen evolution to its final wireframe version.
The client had already come up with a logo, a name, and a color brand. We used those elements throughout the app to promote their branding.
Final prototype
The app demo below is showing the following tasks: 1) Find secure bike parking close to a place you’re going (type Whole Foods at Cambie St.); 2) Add a new bike parking spot that doesn’t exist on the map; 3) Review an existing location:
Future considerations
As we only had 3 weeks to execute the UX/UI process, this app will certainly have future enhancements to go through such as:
- Integrate the app with 529 Garage and Bicycle Valet’s calendar of events
- Expand the existing rewards system as per the discretion of the clients (we suggested they look into Biko as they handle their rewards system quite well)
- The consideration for new pins validation to be reviewed and approved by a backend moderator
- Add the addition of map pins representing Translink paid parking (blue pin below) and other paid secure parking (green pin below) — these pins will ensure the app is easily scalable.
Closing remarks
The clients were very happy with the MVP. This MVP is a bicycle parking app looking to support the bicycle parking landscape in Vancouver, thus promoting sustainability through cycling. This is Phase 1, and it balances out what the clients requested from our team and the basic bike parking needs of our User personas. It displays a minimal appearance with functions that are easy to use. The goal is that users will start using the app in its crowd-sourced base form, in order to communicate with other cyclists the security level of a location and area. In that way, they can plan in advance how to park their bikes. The app’s long-term goal is to become a trustworthy database of the most up-to-date bicycle parking locations (free and paid) and bike theft hot spots in Vancouver.
