Pedal | Jason Fernandes | UI/UX Designer

Insight:

This project was part of my program - To design a solution which can solve a user need in the city. As an avid biker, I always felt the city lacked options for cyclists. The current option felt lackluster and there was a need for a better user interface and experience. My project tries to improve it and add options that would enhance the users journey while adding opportunities to fill gaps

Solution:

I designed a mobile app, where the user had more options of bikes to choose from, with features like reserving in advance, navigation on the go and health statistics to improve the experience of renting a bike in Toronto.

Note:

This is redesign of a project I worked back in 2020 while at Humber, during the peak of Covid when people started taking up biking as a alternate mode of transport. Since then, there has been an app introduced (3rd party), I felt that there was still room for improvement for potential users. I've updated the app both from a UI and UX perspective as well as refreshed research and competitive analysis based on similar newer products from other cities.

Research

To understand the needs and pain points of the potential users better, I conducted surveys on local forum websites as well as at local city bike docks. I surveyed 50 people some of which were currently using the product and some who would consider using it. What I found was:

60% said they would consider using it if they were biking to work around the core downtown area
40% of users of the current product felt the bikes were too clunky
78% preferred using an app rather than having to go to a browser application
65% would like to use it more often to travel around the city in a exploring capacity
86% would like to know beforehand where their end destination would be to complete their ride

I also conducted user interviews before starting work on my concept.

I interviewed 12 individuals in the age range of 20-35
who are either current users of a bike rental product
who would use it for a primary mode of transportation in the city
Bike actively as a form of exercise and health conscious

Ideation & strategy phase

The next step was to compile all the data and feedback and start working on the project. I created:

An empathy map
User personas based on an ideal user for the app
Journey map & user flow which was the blue print for wireframe process
Competitive analysis of the direct competition as well as similar services used by people to travel across the city and similar biking services in other cities which included:
- Uber, Toronto Bike Share, Bixi (Montreal Bike share), Mobi (Vancouver bike share), SoBi (Hamilton Bike Share), Google maps (for navigation concep
Figuring out how the navigation step would work once the user starts the trip. (My idea was that the rider would be able to mount their phone which is preinstalled on the bike!)

Userflow

User Journey

Wireframing and executing design

Armed with data from the research, I moved onto creating low fidelity sketches, and created wireframes that were prototyped to conduct user testing. These wireframes were barebones with crucial information the user would need to complete their journey on the app.While working on the wireframes, I also started work on the branding phase. I designed the logo and created the brand name (i found pedal to be a cool name but also that it is essentially a very integral part to identify a bike). How many screens I would be using and based on the initial use flow created all the screens that were crucial to the app.

Breathing life into the design

Using the logo and name, I then moved onto the UI phase, trying out different fonts, icons and colours that would fit the nature of this app best. Some of the designing included 

Custom map illustration and navigation screen
Booking screen where the users can reserve the bike in advance or choose to physically book it at the kiosk by providing directions
Customized icons based on Human Centred Interface guidelines
Design system based on previous iterations
Creating high fidelity prototype which bought my ideas to life which included finding a book to booking it and biking to the destination with a navigation system to the end of the journey
Interactive components to use in the prototype

One of the difficult phases was trying to figure out how a user could successfully reserve a bike on their phone, while there is an existing competitor that does provide reserving, it is locked behind a subscription service which is something a casual user in a tourist friendly city might not want to purchase. I therefore based it on various products like Uber and purchases made using barcodes and Apple Pay.

Splash Screen & Login

When the app is opened, the user is greeted by a unique animation of the splash screen followed by login.
To make the process of renting a bike easier, I added options to be able to sign in via apple or google accounts.
Alternatively, a “Skip for now” button, if a user wants to see how the product functions before committing to signing up for the product.

Bike station map & bike selection

Here the user has the freedom of scrolling across the map to choose a bike station of their choice on the map, use the search functionality to find one or locate icon to populate nearby location and simply pick a dock station from the nearby list.
Once they have chosen their preferred bike station, their selection is highlighted on the map as well as on the list with the location and the available bikes populate along, with the quantity and cost for each type of bike.
For the design of this screen, I changed the card from scrollable grid to list view as it was able to populate all the 3 types of bikes, rather than having to perform an additional action of scrolling which was noted during the initial testing stage using low fidelity wireframes

Route confirmation & reservation info

On the route confirmation screen, the user enters their destination, and has a visual confirmation via the map and the route they can take.
Based on their entry, the user is shown their bike trip details, including pickup, drop off, estimated trip fare and time they might take to arrive.
An edge case would be where the user can also choose to use the directions option and directly rent the bike from the bike docking station. This option would show they directions.

Reservation confirmation & scan to begin

These screens once again show the user the details before they confirm the payment.
Once they reach the bike station and can confirm their ride, scan the QR code to start the trip with details that will help them locate which dock their bike is on along with other useful details.

Phone mounting & Trip in progress

A unique feature which would be helpful was the ability to navigate to the destination without having to periodically stop to check the route on an external map application.
Each of the bikes are equipped with a mobile holder that can scale to fit any mobile device. There is a visual indicator to help the user understand the step in this journey better.
Trip in progress screen presents the user with the route they are taking, with options to zoom out to see the entire route, pause it or stop it if they need to.
I was inspired by the way Uber shows their users the journey and took some UI inspiration from google maps which most users are familiar with. 80% of user testers found this an extremely useful feature.

Arrival screen & optional Health statistics

Once the user reaches the bike station they were routed to, the user is imitated to dock the bike to complete the trip and presented with a final summary of their trip.
Optionally, they can see their health stats during the trip. Data for the trip can be viewed later from the activity tab at the bottom. I felt this was a nice touch to the biking experience as many people use their bikes for workouts.

What did I learn?

Design Perspective:

- Creating something that is environmentally friendly but also adding a spin of health and fitness into the concept.
- Performing research and applying the feedback and data in the form of design.
- Understanding users' pain points and truly how much difference a software application can make to something otherwise considered hardware
‍

Business Perspective:

From a business goal, this app could further improve the experience for a user renting a bike in the city, while there is an existing product, there is room for improvement on it and several gaps that could be filed with features that help them achieve the goals of the user better.

Challenges & future ideas:

- Picking up a problem and trying to find a solution which can fill gaps in an existing product.
- Designing an engaging experience and not complicating the process.
‍
- Integrate app with existing fitness applications in iOS & Android.
- Integrate on the go payment options such as Apple Pay or Google pay similar to a credit card tap/
- Features that help user know if the bike dock at end destination is full and offer alternate solutions to enhance their experience.