The city bike rental app for SPBIKE

Understanding the challenge
In Europe, many cities have incorporated a bike rental service and Saint-Petersburg was not an exception. So the client of mine decided to open service with several pick-up/drop-off stations around the town and requested me to create an app to help users locate, reserve, pick up, and return bikes.
Research Methods
The Survey
Being limited in resources to collect data, I have decided to use surveys as the main source of info. Thus I prepared a survey by Google Forms and distributed among multiple groups of bike lovers through Facebook and VKontakte (Russian analog of Facebook). Main purposes were to identify basic needs, pain-points and desires of our potential clients. Current acknowledge has been considered as a useful way to identify the root of the problem and appropriate solvation way.
Quotes Directly from Users:
“ I would like to try to go to work on a bicycle, but it is inconvenient and long to get to the pick up station.”
“ I want to ride a bike more often, but I don`t have enough free time because of work.”
“ Once I wanted to rent a bicycle but there was no way to pay by card.”
“ When renting a bike I’m worried about a large amount of pledge and the lack of parking space when you return the bike.”
“ When I`m using the application, I’m worried that it will suddenly withdraw more money from the card.”
Personas
Accumulation of different insights and common patterns that came from the survey helped me to create two personas more likely to use our service. One of them was represented certain needs of some of the participants. Therefore I focused on the more common persona.

Design Sprint
In addition to surveys, I have decided to use design sprint to have an extra view on our service and app. In a team with potential clients, developers and stakeholders we had a deep immersion to business area (vision of client, customer research they had, how things work, and previous efforts), created long-term goals and define main business questions using How Might We technique.

Second steps of our sprint were a map of interactions, to understand how potential users could find our service (and app) and what steps they will go through.

User Journey
Base on “Using” steps from the previous map we created a User Journey to have the best understanding of the process of using our app, determine questions and “pain-points” which use might have on each step and reframe all of them as opportunities.

Having completed the research I revealed the main questions for the customer and for stakeholders:
The questions to be solved for the user:
- How to make renting bikes simple and convenient?
- How to make rent bike stations “closer” to each customer?
The main questions and challenges to the stakeholder (business):
- How might we solve issues around inconvenience and unpopularity of using bikes to go to work?
- How might we care about the safeness of our clients?
- How might we explain to people how to use our service (app)?
Relied on the above questions and all data which we received from surveys and design sprint I created user flowchart.
User Flowchart
Mapping the flow of the app is the best way to structure thoughts, ideas and solutions to see the whole picture of the app. I first sketched it on paper and then digitally rendered it.

Sketches
Next, I detailed every step of the flowchart and drew sketches.


Visualisation
Color Palette
Because we made our app to the specific city — Saint-Petersburg, I decide to choose the same colors which you are surrounded by on the city streets. It is
- Yellow: main color of buildings in the city centre
- Green: a color of trees and flowerbeds
- Blue: a color of rivers and sky
Additionally, I used grey for the text and a great deal of white to give a clean appearance.

Typography
In my work, I prefer to use Google fonts which are universal. For that project I choose Ubuntu. It is a well-balanced and simple typeface superfamily that seems to complement the interface.

Logo
When it was time to come up with a logo, I turned my thoughts to the city again. One of the symbols of Saint-Petersburg is Peter The Greatest`s monument who founded the city. I decide to use it as a reference and create a logo which will associate our service and app with the city. So I used simple lines and shapes to illustrate this idea.

Testing
After visualisation, I built a realistic prototype using InVision and had several customers test it. This was to ensure that the whole structure, all pages and solutions which we implemented were intuitive and responded to consumer needs.
Final Design

Enter to app
User Journey insights indicated that users can be annoyed by the ‘Sign Up’ process on first steps of interaction with the app so I designed a simple form of ‘Sign Up’ but with an opportunity to skip it. So the user can explore the application and then when he chooses to ride a bike he will be prompted again to sign up/log in.

Main elements
Designing app based on the main question for consumers and stakeholders I implemented several solutions:
- Create “welcome screens” for each of three purposes (go to work, fun, sport) which customer can use our bikes. It was developed to push forward stakeholders challenge for increasing popularity bikes as transport to go to work.
- Developed three buttons (work, fun, sport) for the same purpose and also for more convenience of finding stations with a suitable bicycle for the chosen purpose of the ride. So depend on purpose (color of button and station respectively will be different), map show stations with required bikes.
- Answering the third business question: “How might we explain to people how to use our service (app)?” I designed button “Getting Started” with instruction how to use our service.
- After choose and tab on station user can see how many bikes are available there and how many parking spaces there are available to (thus solving one of the “pain-point” of the customer from the survey). For extra convenience for the customer on each station, the user can get directions to it.

Ride steps
To unlock a bike and start ride user need to scan QR-code. Following User Journey some users may be stacked by this task. To solve this problem I put the detailed description of what is QR-code, where to find it and what to do. In case that QR-code is not working an opportunity to enter the code manually has been created or turn on a flashlight on your phone.
After scan QR-code there is a confirmation that ride has started. And also there is a two button option:
- Traffic rules for cyclist (as a solution for stakeholders question “How might we care about the safeness of our clients?”)
- Best directions (for more convenience of clients)
When the ride is finished user receive a notification with information about total time, cost and that his bike is locked (solution for one of “pain-points” of the user; to make a person do not worry that he will be charged for bike who seemed not be a return)
Future improvements
Numerous of improvement could occur during the time for the current app. For example, seems possible to create multi-access (opportunity to unlock several bikes from the same app account). Also, app enhancement could lay in creating more convenient family plans of use such as family bikes stations (with kids bikes) and family trips directions should be added. Anyway, for now, and first of all, we need to continue to observe and analyze existing user experience and try to improve it.
