The delivery of passengers services on a bike. The coolest Amsterdam Taxi Bike ride — An E-commerce service Case Study.

Karen Kolb
13 min readMay 29, 2019

--

How we created a solution for booking a taxi bike ride online?

Introduction

This case study is the result of the work as a part of the 2 project of the UX/UI design part-time bootcamp at Ironhack Amsterdam where I have spent more than a month. Still 6 projects more to go and finish this 6 months amazing experience.

Well, for this project I worked together with the amazing brazilian and UX designer Tiago Neves. The purpose of this project was purely academical and fictional. We choose to do our project for the ‘Amsterdam fiets taxi’ local shop in Amsterdam. The word ‘fiets’ in dutch means ‘bike’. So, this is about a local shop that offers a taxi bike service. And that’s the coolest way to enjoy Amsterdam in a short ride!

Before: old logo

Amsterdam fiets taxi

Who they are? and What they do?

Amsterdam fiets taxi:

“We are a group of bicycle taxi drivers who have been driving for years in Amsterdam and who know the city through and through”.

Bicycle taxis have been driving in Amsterdam for a number of years.

This is one of the best ways to explore the city of Amsterdam.

A bicycle taxi can visit places where regular taxis, buses and tour boats cannot come.

This makes the bicycle taxi an ideal tool for transportation and at the same time having an unique tour experience. In one short ride we can already get you to experience the city vibe and the most common way the dutch goes everywhere around. By bike! We show you a part of the beautiful places in Amsterdam during a bike ride for a fair price.

Project Description

Create a solution for online users that provides delivery of passengers services on a bike in Amsterdam:

a taxi service for a trip from point A to point B with a bike driver.

this is the current outdated website for booking online.

Why?

  • Fun way to explore the city for tourists.
  • Create easy access for customers, more taxis available and favorable for customers.
  • Unique service to transport business events and conferences attendees.
  • Customers can benefit for fair prices, an environmental friendly and a fun way to explore the city of Amsterdam.
  • Cheap and efficient way to creative advertise one’s business on the bikes.
  • Alternative way for smart urban mobility, touring and commuting.
  • Easy option for young people to earn some extra income through an informal job.

Objetives

“To help a local Amsterdam taxi-bike shop to improve the service to their customers for booking a taxi bike online”.

The problem

How might we create an online booking experience to increase access for customers to more taxi bikes available while offering them a fair price and travel distance?

Design process

Step 1. Empathise:

In order to understand the problem we used the WHW technique to get to know what is this about.

Understanding what is this about? WHW technique.

Understanding the business

Goals:

  • Provide more quality services to the customers.
  • Change how the current website works for bookings.
  • Increase bookings for taxi bike rides online.
  • Improve positioning on the current market with competitors.

Challenges:

  • Most of the business come from each individual rider pitching the customers on the streets. No online exposure or customers cooming from online sources.
  • The website is not up to date.
  • Business owner and bike riders are not tech savvy.

Research

We got to know insights related to the goals and challenges from the business from doing research. The research process went like this: first we did a brainstorming session and putted together the questions and an interview guide to gather the most relevant information from the stakeholders.

canvas used for brainstorming
We managed to be helped by a pedicab business owner for the research part and these are the questions we did for the interview.
business insights

Business Analysis

Benchmarking:

In order to understand the business we did recognize the importance of benchmarking in the discovery phase. And in the image below you can see that we used a perceptual mapping technique to map the findings from research that were important for both business and users needs.

2x2 matrix

Competitors Analysis:

We created a Market Positioning Map, to understand where this service is located based on specific qualities in the market like being a more traditional or innovative company. Offer quality or less valued services.

2x2 matrix — The red spot indicates the place where we aim to be positioned and where we aim to take opportunities from.

The benefitis from doing this market positioning map are:

  • Identify where the service currently lies in the market versus where we want to be.
  • Identify gaps in the market that our service can take advantage of and turn into an opportunity.
  • From analysing the map, we can say that:

Amsterdam taxi bike aims to get a better positioning in the competitors map, from being a traditional local shop to offer more quality and innovative services to their customers.

Sunpower taxi is a competitor with a strong value proposition, unique and innovative offering a service with e-bikes powered with solar panels and branded as a taxi bike company with an environmental friendly proposition.

Another strong competitors are Abitaxi and the Eco-friendly fiets-taxi.

Sunpower, Abitaxi and Eco-friendly competiros have a strong online presence.

In general all the other competitors offer the same simmilar services, very traditional and the online presence and options for booking online taxi bike services are very poor. That is a very interesting insight for a city like Amsterdam. Where everything moves around in 2 wheels!

Step 2. Define:

We created an affinity diagram in order to overview and map out all possibilities and opportunities gathered from our research and identify possible pain points from the users and the business.

affinity map

So after this, we came out with different HMW’s and finally voted for the one we wanted to go further in this process. A mix of complementary ideas.

HMW technique

How might we create an online booking experience to increase access for customers to more taxi bikes available while offering them a fair price and travel distance?

For who are we designing for?

From the stakeholders feedback we came with this persona to become familiar with the user and uncover the behaviour patterns: Lia Chung.

Lia is a business analyst and lives in Singapore. She loves travelling a lot and often does it alone for business purposes.
She has a big love for fashion. Therefore, she likes to look feminine and wear her high heels. But often has to sacrifice her stylish business dress-code for comfort when travelling because during her trips she always ends-up walking long distances and also wasting time finding places. Therefore she gets moody and tired from being bad in navigation.

She likes to plan in advance every detail related to her trips. When being abroad she arranges specially transportation options, taxis, routes and easy rides to get fast to the business meetings and after be able to see the highlight spots of the city she is visiting, after business she does not have much time left for touring.

She is going to visit Amsterdam soon and loves the concept around urban mobility in the city, finds amazing the idea of going everywhere with the bike. She is curious to try this although cycling for her is not her best option to match with her poor navigation skills combined with wearing her high heels and trying to keep a business dress-code for the business convention she will be attending there for the next 3 days. Neither it is an option to go walking through the little cobblestones streets of the Amsterdam to sightsee the city if she gets some spare time left. Where even a little 5-minutes walk around wearing your heels would make you cry!

empathy map
persona

Step 3: Ideation

As a part of this step we did the:

Tasks Analysis

A task analysis is simply the documentation of the steps that a person takes to complete a task. We did tasks analysis to help us to identify ways to optimize the process of booking a taxi bike online and eliminate/mitigate the risks that are found in that process.

It helped us with developing our content strategy when studying the hierarchical tasks analysis, that means breaking tasks and subtasks in small steps. And also helped us later with the site structure when doing the cognitive tasks analysis, to understand the decision-making and problem-solving moments the user experiences. This in general was a practical way for gathering the website requirements.

What it takes to Lia to book the taxi bike online?

This is it! The Tasks Hierarchical Analysis; step by step sequence that would take Lia our persona to book a taxi bike online. We are going to focus on helping our persona to achieve the main task to book online a taxi bike service.

What we did before that?

This is more like a step by step sequence of the whole journey. Each column is a task and putted together show a kind of journey divided into tasks and subtasks. We went a bit the extra mile here, the hierarchical analysis is mean to be done to achieve one single task, not a whole journey. Anyway, we are in a learning process, and from doing that and this journey we learned that we needed to focus on that! only doing one task, and at the end this helped us to identify which task was that: to make the booking for a taxi bike service.
These are the current tasks that users perform on the old website when facing decision-making and problem-solving moments to use the taxi bike service

Card sorting

Card sorting is useful for knowing how users will expect to see content organized on your site and discover users mental models. So we did card sorting with users to help us to structure the information architecture of the website and it looked like this:

card sorting process
This is all the possible content structured during card sorting. For this project we aim to create a solution that helps users to book online a taxi bike ride service, so we are going to focus only on that part first for the website.
And this is the sitemap for the solution that we are creating

A Sitemap (also known as Organization Structure) is used to show the relationship between pages in a site.

For the solution that we are creating the website is going to work like the image above.

Here is an explanation of the site map:

User lands on ‘home page’, goes to ‘book now page’, from there then you can go next to process your order on ‘processing booking page’, there you can leave name and phone number before continuing and overview your booking details, then you can go ahead and do payment on ‘payment page’, and then you can finalise the booking process on ‘booking confirmation page’, where you would receive all your booking details information and the confirmation that you have successfully booked the taxi ride.

Use Case

The ‘use case’ is a written description of how users will perform tasks on your website and are useful in the stage of planning a system.

So let’s do this for our persona Lia to anticipate user behavior and get to know which features are necessary to build for our solution.

Case scenario:

Scenarios are used to lay out on what circumstances hold true when a user encounters your product or service. A real situation where users might be in when using your product. Let’s see the circumstances around when our persona Lia uses our service.

Happy flow

The flowchart is a happyflow, it describes how the user moves through the app, and how the app responds to user interactions in an ideal scenario where everything goes ok. This is the happy flow would take our persona Lia to book succesfully a taxi bike ride in Amsterdam to go the her business convention.

flowchart

Step 4: Prototype

we did some sketches before creating the wireframes.

a very raw version of features for the website

Wireframes

first prototype

Heuristics Evaluation:

In User Interface design, heuristics help us review our designs to ensure we won’t miss any important functions. We can use them as a “checklist” to make sure we are creating a great experience for our users.

From the wireframes we did a heuristic evaluation to inspect the various dialogue elements and to compare them with a list of recognised usability principles and laws (the heuristics), and to be able to identify possible usability problems in the design.

Usability issues and recommendations:

Here are the results of the evaluation of each screen page from the first wireframes prototype:

Heuristics evaluation

Wireframes improved after feedback:

wireframes second version

Step 5: Iterate

The iteration process

Usability Testing

Test report:

What we were testing?

  • Concept.
  • Interaction.

Why we ran the test?

  • To test if concept idea was clear to user.
  • To test usability. If the message and the information given by the navigation and interactive elements was usable, useful and understandable for user.

Participants: We did testing with 3 users, fully representative of the target population. Innovators and early adopters user types. They were screened based on this profile.

Type of testing: test was performed in person, we asked tester to think out loud while doing tasks. Then followed up with questions after the test was finished.

Research objectives:

  • What challenges can user encounter when going through the flow of booking our service?
  • What can stop user for completing tasks?
  • What can be a reason for not finalizing booking?
  • What are the biggest pain points user could experience when completing tasks?

Tasks:

  • Page 1: Home page: Book a taxi bike ride.
  • Page 2: Book now page: Set details and place an order. Contact a driver.
  • Page 3: Processing booking page: Leave personal details, overview your order before payment.
  • Page 4: Payment page: Go further with booking. Overview your order for payment and choose payment method. Do payment with cash to the driver.
  • Page 5: Payment page: Do payment with credit card.
  • Page 6: Booking confirmation page: Finish booking. Check your booking confirmation details and booking code. Share service with friends on social media.

Hi-Fi prototype

Mockup:

home page
Hi-Fi mockup flow

Feedback from iteration:

Key findings:

  • Concept is clear to user.
  • Website functionality is understandable, useful and usable.
  • Steps to complete subtasks and the main task for booking a taxi bike were successfully completed.
  • UI is appealing to user.

The old and the new:

The before & after of the website

New branding:

old logo
we created a new logo

Conclusions:

  • Receiving and implementing feedback is one of the hardest things to do when designing, but is the most rewarding path that you can follow!
  • Test before is gets too hard and expensive to fix it.
  • There is always room for improvement.
  • When UX marries UI, we can bring delightful experiences and meaningful solutions to the users.
  • We are learning, and there is always a learning curve that we can’t not avoid but to make it part of the process.
  • We had a great experience working together as a team. Here empathy was the key! It was amazing to see how strategy translated to visual so naturally.
  • We really loved this project!
  • To think about how we would get the design implemented for the business owner, we would like to get him interested on it.
Saturdays are the favorite days of the week. Because we do potluck!!! often homemade dish of food to be shared. Here our whole amazing class having lunch together @ Ironhack Amsterdam We still have 20 Saturdays more to enjoy!

Hasta la próxima! Até a próxima!

--

--

Karen Kolb

🎯 Forever curious! I’m a curious digital creator who loves a challenge and to run experiments. I share here on Medium my stories.