#DailyCommute #Transportation #MobileApp

Shuttl B2B - Employee Transportation Solution


Every day more than 30,000 daily office goers rely on Shuttl for their daily commute need. Apart from the Shuttl bus ride, the app’s booking and boarding experience are very core to Shuttl. The goal is to make this experience as frictionless as possible our regular users.


Me - Product Designer

Zinal Patel - Product Designer

Vikas Kumar - Product Designer

Gaurav Jain - VP, Product


Why we wanted to create this

Design sprint

We started with a 3-day sprint. We went away from the office which helped the team to completely focus on this new challenge.

Snapshots from the the 3-day design sprint

What we found out in the brainstorming sessions is as follows


Main Roles/Users

We first identified the main roles/users that will be using this solution on a regular basis. These will majorly the people who are responsible for keeping the daily operations in check in any big organisation with lots of employees.

Main roles and target users

Goals and metrics

With the help of our B2B team, we got these key metrics and goals that each user group was responsible for. This gave us an understanding of their incentives and motivations.

Screenshot 2019-06-19 at 1.02.45 AM.png

Main goals and metrics


Content Direction

We decided early on what our target customers are for this website. They are mainly - employee transport admins and CFOs of big corporations. So, we thought that we should back our success statements and communicate them using numbers.

Numbers are something that gives them a clear picture of how Shuttl's enterprise solution has impacted other in the industry and how it can impact their organisation as well.

Wireframe of the landing/homepage

Opportunities discovered


For the visibility of multiple bookings done by a user, the home screen can serve as the place to show all the current and scheduled bookings. As currently, it is not displaying any new or actionable information for our regular user.


The time-slots screens were also showing some repeated information like origin and destination which is not required every day for a daily user.


On time-slots, we also wanted to inform the users about the booking status of the buses.


We wanted to give more controls to our users on this screen related to reschedule and cancellation. Also, just by glancing at the screen it was not very obvious as what is the primary Call To Action here.

A new home

The place to get quick information about all your bookings. Through the introduction of booking cards, we expanded the usage and relevance of the home screen. Now it is not just a place that users come for daily booking but it's serving a place they come after booking to get updates for all their upcoming bookings.

Cards - 01.jpg

Re-book cards

These cards appear on the home screen after the end of Shuttl trips to give one-tap access to daily bookings. Rather than searching for their regular stops a user and easily use these cards to start booking for the next trips.

Next trip card

Now with next trip card our user get a snapshot of their immediate next trip. Rather than keeping the information a step further, we worked on a system to bring the most important info upfront like bus arrival time, bus number and the pickup stop where the bus will come for boarding.

Cards - 04.jpg
Cards - 02.jpg

In this secondary state, the trip card when on an on-going trip gets smaller and changes the colour to differentiative it from the trip card. When there is an on-going trip the next trip card becomes white and only shows the most relevant info at this moment which is the time of that next booking.

Good times

Redesigned UI for timings while selecting a bus at the time of booking. By removing the redundant information of walking distance and origin-destination (not required on a daily basis), we gave more focus to the pickup and drop. We redesigned the time cell to make it more scalable so that we can include relevant info required for the user to make a better decision while selecting a bus.

timeslots single shot.jpg

Declutter to inform better

We started by removing the information which for a regular is just redundant like origin-destination, walking distance to their stops. This gave us the space to include info like cashback available on a particular bus or just informing the occupancy status of it.


Made the UI more focused on the timeslots and included the time the bus will reach their drop stop.

As most of our users travel with a Shutt ride pass. So, we gave the visibility of how many rides are remaining in their pass.

Into the dark side

We chose to reduce info on Google Maps like the places and landmarks to improve the visibility of our Shuttl route and make it easier to track the bus on the map. Also, gave the primary CTA the main focus and made it the hero of this screen.

track single shot.jpg

Redesigned Map

Use of a black and minimal map helped us visually highlighting the route, bus and the pickup stop clearly. For a user, it's just a glance and the attention gets quickly captured by the route and then finding the bus location becomes faster and easier.

Now the most important call to action here is boarding. So, it takes the centre stage and maximum attention.

Action sheet

We clubbed the options in a bottom sheet to declutter the main screen. This gave us the freedom to keep adding and trying different options and functions that are relevant to each state of the trip.

track - 2 single shot.jpg

🎯 Design Impact

😼 Business side

With the introduction of a better interface for timeslots, we were able to highlight incentives like cash-backs that helped us in distributing our demands well and increase the occupancy of our buses overall.

🥺 Consumer side

By making daily bookings faster and decluttering the UI for track Shuttl. We saw a significant reduction in 2 types of complaints to our customer care -

1. Not able to book my shuttl on time.

2. Having difficulty to track and board shuttl.