Lucas Toledo

Product Designer & UX Consultant

I help transform your ideas into websites, apps and interfaces that people really want to use.


Get In Touch

IMPROVING THE TRAVEL EXPERIENCE WITH MOZIO

INTRODUCTION

I worked remotely with Mozio for over 1 year.

Mozio is a Search & Compare app that lets you find all types of ground transportation, and book the one that makes the most sense for your wallet and schedule.

During this time, I helped redesign their website user experience and interface. This lead to an increase in booking conversions by 90%+ over a 3-month period after launch.

In parallel, we designed and developed their iOS and Android apps from concept to launch, within 6 months, with an average rating of 4 stars.

A WYSIWYG whitelabel creation tool was also developed. This helped close Travel & Hotel partnerships faster, free developer resources, and improved setup time from ~3.5 hours to ~10 minutes.

TABLE OF CONTENTS

The travelers journey Mozio believe the travel experience should be simple and enjoyable. They place the user experience above all else.

GOALS

Mozio wanted to improve booking conversions and increase the types of use cases they could serve. They decided to re-design the user experience and interface of the main website.

They also wanted to increase their direct bookings with users; so they began to design and develop an iOS and Android app that could get them closer to travelers.

MY ROLE

I first joined Mozio as an UX/UI designer, making up a 2-man team together with my Lead Designer. My role was focused on:

Because it was such a small team, my role was fluid, and would adapt with the work at hand. This included interface design and some front-end coding.

Over the course of 1 year, this role evolved from support to overseeing Mozio’s website redesign and other internal tools.

REDESIGNING AN EXISTING WEBSITE

GETTING STARTED

The lead designer had already started with the design of a new user interface (UI), and there was already several well understood use cases with feedback to work with.

I began by reviewing use cases to improve and collaborating with the new UI design.

Over time we formalised our users into personas. This meant we could prioritise which features to design first, based on how well they helped the users achieve their goals.

In turn, this meant we could ensure a design that would improve conversions.

Mozio user personas User personas (simplified)

USING USER FEEDBACK TO IMPROVE USE CASES

Research and insights about our users often came from the Customer Support, Sales and Partnership teams. They were in a position to identify problems and opportunities, with:

This was put together with further research:

Because research was not exclusive to designers, this meant some advantages: We could understand our users faster and cheaper, in a greater range of use cases, and in real situations.

When it came to improving Mozio bookings and making a better product for our users, this available research became our single most important asset.

Some of the user issues found included:

unclear pricing
Unclear pricing & Ride time Search results did not show ride time and if price was per person or per group. Users had a hard time deciding which ride to take.
pickup time confusion
Confusion about pickup times When booking To/From airport rides, users would suddenly realise they didn’t know what were the appropriate times for pickup.
Driver realiability
Uncertainty about driver reliability Because there were not enough assurances, first time users would be uncertain if the driver was going to arrive on time.

Having a clear view of our users and their issues, we could prioritise which features to design. Together with the product managers, these were laid out in a task complexity vs. business/user impact:

Complexity of execution vs. User impact

Many of these features and more were designed for, resulting in several improvements that made easier for users to book rides in Mozio’s website.

REDESIGNING THE UI: CHANGING TO MOZIO 2.0

Redesigning Mozio’s website UI was an incremental process.

We split the design mockups into components that could be assigned to individual developers.

This was done so the designs could be reusable and put together in a React.js component library. This meant future development would be easier, faster and cheaper.

Mozio UI components UI components: Result cards
Mozio UI components UI components: Language, Date & Currency selectors
Mozio UI components UI components: Inline notifications

I progressively adapted the new UI to all Mozio pages, designing new components and solutions where needed.

Schedule and Class selection for National Express Schedule & class selector — Iteration 1 of 4

WORKING AGILE: OVERSEEING DESIGN-TO-DEVELOPMENT

Being an UX/UI designer in a company where most co-workers are developers means being able to speak both 'designer' & 'developer' languages.

Product managers assigned features and UI components to developers, and I would review and support their implementation.

This included:

Specification sheets Component guidelines for developers

Video mockups were used to showcase interaction examples.

Roundtrip upsell (via After Effects)

THE OUTCOME

Mozio platform increased it's booking conversions by ~90% over a period of 3 months.

It also achieved:

Mozio went on to successfully close a new Series B round.

WORKING INTERNAL PROJECTS

Improvements were also done internally.

Mozio also operates by integrating their booking tool with Travel and Hotel booking websites, so these can upsell transportation services.

This is done with Mozio whitelabels that can be styled to be similar to the brand of each new partnership.

Mozio Whitelabels How Whitelabel will look like for Mozio partners

This required both designers and developers. This meant that sales & partnership teams would often have to wait for availability, making it more difficult to pitch for potential clients.

Also, developers or designers could not focus with Mozio’s main products. In total, the whitelabels required an average of 3.5~ hours to go live.

DESIGNING A NEW TOOL

Tasked with the design of an internal tool that could improve this, I began by interviewing our departments on how they worked and how we could make it easier for them.

Together with the Product owner, a tool was devised that would allow the sales teams to create and publish whitelabels by changing 5 different parameters.

Whitelabel creation tool Whitelabel tool dashboard

This improved Whitelabel creation times from ~3.5 hours to ~10 minutes/each and free’d valuable developer & designer resources.

DESIGNING A MOBILE APP FROM THE GROUND UP

GETTING STARTED

For the mobile app, my role was developing the user experience. I helped define use cases, design user flows for the use cases and make sure we provided a smooth user experience.

We began to discuss the use cases we could design for. Some of these included:

Cross Web-Mobile Reservation Management
Cross Web-Mobile Reservation Management Allow the users to manage their reservations across platforms and have access to a single account
Train Bookings
Train & Tram Bookings Allow the users to book rides with different train systems — timed vs open rides, start/end stop, etc.
Destination/No Destination Use Cases
Destination/No Destination Use Cases Allow the user to book car rides without a destination set

The launch of App could be broken down into 3 phases :

  1. A tool for Mozio customers to manage their bookings
  2. Add on-demand and scheduled rides booking capabilities
  3. Add Airport express line booking — focus on Heathrow Express (London, UK) and SEPTA (Philadelphia, US)

This made for quicker release cycles, and allowed immediate testing. We began to design for iOS first, and later adapted for Android.

USE CASES TO USER FLOWS: MOVING TO MOBILE

While the booking funnel was essentially the same, what the user needs and expects from his mobile apps is very different.

We began by adapting Mozio’s website user flows to the mobile experience and creating new ones specific to mobile:

Bus & Train mobile user flows Sign In/Sign Up mobile user flows User flows examples — Bus & Train conditional, Sign in/Sign up

To make sure the website-to-mobile experience was seamless, a lot of focus was placed in getting the onboarding experience and reservation management right.

DESIGNING WIREFRAMES

With the user flows approved, we could begin designing the wireframes to start visualising the app. Developers also began building the environment and logic.

Wireframe user flow maps On-Demand to Pre-booked: Selecting time and day of ride

The wireframes helped us improve the user flows, in a back-and-forth process.

During this time, our lead designer explored visual styles for the mobile app — how it could look like.

TURNING WIREFRAMES INTO MOCKUPS

With the visual style approved, UI design began. The design was iterative and done in parallel to user flow, wireframing and development.

Working tasks & projects in parallel sprints was a common theme. We had to make developers would not be waiting for design, so nobody would be a bottleneck.

As mockups were finalised, we began testing for their usability and affordance.

We did this by creating fast prototypes with InVision/Proto.io and running usability tests with Mozio co-workers, as well as on the streets of San Francisco.

This would give the feedback we needed to continously improve the design.

On-Demand Wireframes On-Demand Mockups On Demand Mockups
Heathrow Express Wireframes Heathrow Express Mockups Heathrow Express Mockups

The last use case we designed for before launch was for ‘ticketing purchase in the SEPTA airport line’, Philadelphia's public transit service.

SEPTA Mozio ticketing app

Mozio’s mobile app launch happened first in Philadelphia, US, a week before the NFL Drafts of April 2017.

The app acquired ~19,000 users in 2 days, with an average rating of 4.7 stars in the iOS app store for the first months.

You can visit Mozio here, and download the mobile app here: iOS or Android.

CLOSING THOUGHTS

Mozio was a fast-paced startup environment. Working remotely was pragmatic and based on result delivered. It meant working in many different roles, with all teams.

Over 1 year, I had the chance to research and design multiple features and cross-platform projects to conclusion, and see Mozio grow and double their daily revenue.

The design process was iterative and constantly moved back-and-forth, and I would jump back to different stages at any given time. Because of the new challenges every day, this case study is only a superficial explanation of all the work done.

If you’d like to discuss this project, I’d be happy to have a chat. Reach me out at hello@lucastoledo.co

"Quick to pick up on all new product features we needed design, translate them into beautiful UI. And would see them through until the end, often working with 12+ developers at once. Got along with everyone and was a pleasure to work with!”

Emre Mangir, COO Mozio
Emre Mangir

"I hired Lucas as my first UX/UI designer at Mozio, Inc. and from the start he proved to be an excellent choice in a competitive field. Lucas helped me out on various complex web and application issues (...) and always strived for the very best result. I would hire him again for any web/app project, if the future allowed me to do so. Lucas is highly recommended by me."

Steve Ladanyi, Lead Designer
Steve Ladanyi