top of page

Making an enjoyable cycling experience with Santander Cycles— a UX Case Study

Cover copy.jpg

Project Overview

 

Brief & Planning

​

Formerly known as "Boris Bikes", Santander Cycles (owned by Transport for London) was introduced in 2010 as London's first self-service cycle hire scheme. However in recent years, they have been facing stiff competition from disruptive companies such as Uber Jump, Lime, and Beryl.

 

My team and I saw an opportunity to improve their current stand-alone mobile app to redesign their onboarding experience for new users, whilst optimising the daily experience for existing users; such as commuters and tourists.

 

My role

​

  • User Interviews

  • Contextual Inquiry

  • Style Guide

  • Affinity Mapping

  • Low-Mid Fidelity Prototypes

  • Presentation

​

Key deliverables

​

The required deliverables for this project were:

 

  • User journeys, task analysis, and experience maps

  • User flows and scenarios

  • Wireframes

  • Clickable prototype(s)

  • Usability testing and results

  • High-level personas

 

Results

​

The new design of the mobile app now:

  • made easier to understand the service via onboarding process

  • allows users to hire available bikes

  • allows users to navigate while riding the bike

  • gives feedback on when the price of the bike journey goes up

  • reminds the user to dock the bike

PROJECT

Concept

WHAT

Mobile app

WHEN

Sept 2019

TIME

2-Week Sprint

split.png

Design Process

​

Process

​

In the 2-week sprint, we followed a step-by-step process and then incorporated the Lean UX cycle in ideation and prototyping phase. At first, we started making a project canvas which then led us to making a kanban. A project canvas is a visual tool that improves communication with the team and provides a simplistic project overview. Kanban is a lean method that allowed us to manage and improve our work.

process.jpg

Phase 1 - Research & Synthesis

Online Screener Survey

​

We were able to conduct 22 screener surveys to ensure that our user interviews were people who have cycled in London. From this I learnt:

 

  • The most bike hire: Santander

  • Most have used the bike for: Leisure

  • 72% of users say they would consider riding in London

  • 61% of users have said that cycling in London is dangerous, unsafe, scary and/deadly

  • Providing reassurance would help make cycling more appealing

screener.png

Contextual Inquiry

 

We went to a number of Santander bike stations across Shoreditch to observe and interview users in their environment. After collecting a substantial amount of information of our users, I have highlighted the following key findings that I noticed were common:

 

  • People not aware of the machine printing out receipts.

  • Locking the bike in and out of the station takes force.

  • One user parked the bike on the side instead of the station.

site.JPG

User Interviews

​

To not make any assumptions of what our users think about their cycling experience, we conducted 6 user interviews based around their experience of cycling in London.

 

Users have said:

  • “Been using the Santander app for one month and found it easy to use”

  • “30 minutes to cycle for one place to another is enough and £2 is very affordable for this

  • “The bikes are so heavy!”

  • “I had paid for two bikes but I can’t find the code!”

 

Other user’s comment on Uber Jump bikes:

  • “Jump is so fun!” - Less effort, no need to drop it off at a station as it can be done anywhere and no need for a machine.”

  • “They are not electric, they are stiff and clunky, it's a bit like riding a moped”

  • “It’s just like Uber. If you know how to use Uber then you can use Jump!”

userinterview.jpg

Affinity Mapping

​

The team and I were able to identify common trends of what our users have said by synthesising all different quotes and grouping them. This helped us find what problems we could focus on future design developments.

​

We found the following insights: 

​

  • Being able to ride anywhere from A-B gives users a positive feeling of “freedom.”

  • London has a fast traffic environment leaving users feeling, “left alone” and “dangerous.”

  • Difficult unlocking

  • The journey of the ride

  • Price transparency/communication

  • The app not updated in real-time

  • Difficult when using the app for sightseeing

  • The weather (mentioned in both categories as drawback)

 

Learning from the insights, it led us to design a new native mobile app with streamlined UX. We have considered the entire user’s journey from the physical and digital side.g

affinitymapping.jpg

Existing Mobile App

​

Learning from the insights, we decided to design a new native mobile app to help users with their cycling experience as the existing app had issues that needed to be addressed. The issues that the existing app had were: 

  • Finding leisure routes leads you outside the app

  • Shows you the route from A-B but when you use the “Navigation” button, it suggests you to use Citymapper or Google Maps

existingapp.jpg

Experience Map

​

Having analysed the insights from the Affinity Map, we decided to make an experience map to show what users felt during their journey of using Santander services. This also helped us identify at what point of the user’s journey that we should focus on. The main focus was the whole onboarding process of the service as users felt frustrated when they start using it.

experience map.png

Competitive Analysis

​

The brands that users have chosen to ride other than Santander were UberJump, Mobike and LimeBike. Users have mentioned that convenience and bike build quality was another factor that attracted them in using competitors brands. We learnt that areas of Onboarding & Unlocking, Riding & Navigating and Returning & Paying, were the main areas where we could improve Santander bike services.

competitiveanalysis.png

Phase 2 - Our User

User Persona

​

After gathering our insights from the Affinity Map, we were able to get an idea of who our main user would be. We then created a user persona to focus design efforts on solving the user’s problems.

userpersona.png

Through several alterations of our user personas, we were able to streamline our problem statement, hypothesis and scenario:

 

  • Problem statement

Anna needs a way to cycle in London, because she needs a low-risk and environmentally friendly alternative to the current options for getting from point A to B. 

 

  • Hypothesis

We believe that by making the Santander cycling experience in London safer, more transparent and more sustainable that Anna will hire our bikes more frequently. We will know this to be true when Anna begins to hire a Santander Cycle on a monthly basis. 

 

  • Scenario

Anna works in Farringdon and would like a time-efficient, sustainable, safe and inexpensive way of getting to and from Spitalfields Market for her hour-long lunch break.

Phase 3 - Ideation & Prototyping

Design Studio

​

This was an activity that involved everyone’s input in the team to quickly come up with solutions that would solve the user’s problem. We did this by sketching out several ideas and then categorised this by Must, Should, Could and Won’t. These were the following ideas that we organised:

designstudiocombo.png

From this result, our key focus was:

  • To communicate price in a transparent way

  • Provide greater safety while riding

  • Put the user in control of the navigation process

Paper Prototypes

​

A minimum viable product (MVP) was needed to be made so that our solutions could be implemented. I started to sketch out paper wireframes and made them into a prototype by using the app; ‘Marvel’. After making the paper prototype, we were able to test it on nine users to see if the usability of our app was understandable. We implemented the feedback we were given and made two further iterations from this. The key findings from them can be seen below.

 

Key findings of iteration-1:

 

Symbol language (QR, compass) on map was unclear

  • Reduce the map visualisation

 

Navigation process unclear and lacking

  • Refine and reduce

  • Include heavy traffic indication

  • Save vs. start confused users (optimize)

​

QR code not understood

  • Removed completely, replaced by mobile code

iteration1.png

Key findings of iteration-2:

 

Users expected to see a blue dot for current location, not a pin.

 

Navigation process unclear (bike symbols)

  • Suggested location should show bike spaces
    (E.g. Bike spaces should be 5/20 instead of a status bar)

 

Symbol for favourites was confusing

  • “Does it mean favourite’ or a popular place?”

 

Language on pricing was confusing

  • Reworded, moved to a different place

 

Users expected to have a countdown to know when it’s going to increase the cost.

iteration2.png

User Flow

​

I decided to make the User Flow after receiving feedback from the second iteration of the paper prototype. The reason for making the User Flow at this stage was because a visual representation was needed to show and check if the process of the whole app was getting users what they needed. In the diagram below, it shows our design of the Santander Bike app.

userflow.png

Mid-Fidelity Prototypes

​

Moving onwards from paper prototypes, we decided to digitise the paper prototypes to Mid-Fidelity with improvements. The digitised version allowed us to see how the sizes of text, logos and interfaces would look like if it was close to the live app. To not spend too much time making the final product, we needed to test if the improvements we made were viable. After testing 5 users, these were the findings and alterations we had to make:

 

The benefits based onboarding was not valued

  • Changed to focus clearly on functions/benefits, put pricing at the start

 

Navigation improvements weren't helpful

  • Refined through route categorisation

  • Brainstormed way to destress the process of receiving code then prompting to plan the journey

midfi.png

Style Guidelines

​

In order for users to be familiar with the app, we decided to use the existing style guides and branding of Transport for London.

styleguide.png

High-Fidelity Prototypes

​

The insights gained from previous iterations have showed that there were minor changes that had to be fixed which indicated to us that it was time to move on to High-Fidelity. Our final design has the following improvements that we made: 

 

  • Refined onboarding 

  • Hire process is no longer interrupted by the navigation process

  • Choosing a route is more intuitive

  • Included price/time transparency during ride

  • Included voice/vibrations commands during the ride

  • Automatic cost confirmation upon returning the bike

Next Steps & Key Learnings

Next steps

​

The High-Fidelity Prototype will need to be tested and iterated again to find any remaining or new problems. We believe that adding the following features would make the cycling experience more enjoyable to use making Santander Bikes a better competitor: 

 

  • Weather checker

  • Tourist routes

  • Group bookings

  • Incentives to ride

  • Safety education

 

​

Key Learnings

​

Overall, I have learnt a lot from this group project. Working with other people allowed me to see different perspectives and opinions on how to solve a problem. When working in group projects, sometimes there are situations that you can not control and predict, e.g. people and emotions. One of the biggest difficulties I had was working with a colleague with learning difficulties, as he had a hard time keeping up with the 2-week sprint. To help him, we always checked up on his progress and asked if he needed any assistant. Eventually, we helped each other out and was able to finish the deliverables successfully on time. 

 

When the project finished, we carried out a retrospective. A retrospective is an activity to reflect the team’s way of work, so that everyone knows how to become a better team for future group projects. We did this activity by writing down what we should keep, stop and start doing on Post-It notes. Afterwards, we voted on what we wanted to discuss and ultimately learn from it. 

 

In conclusion, I was happy with how we collaborated as a team, learning together and achieving a high level standard of work. Hopefully one day, I will be able to work with them again and I wish them good luck in their endeavours.

bottom of page