IMPROVING THE TRAVEL EXPERIENCE WITH MOZIO
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
- My role
- Redesigning an existing website
- 1. Getting started
- 2. Using user feedback to improve use cases
- 3. Developing the user interface (UI)
- 4. Working agile: overseeing Design-to-development
- 5. The outcome
- Working internal projects
- Designing a mobile app from the ground up
- 1. Getting started
- 2. Use cases to user flows: moving to mobile
- 3. Designing wireframes
- 4. Turning wireframes into mockups
- Closing thoughts
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.
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:
- Understanding our users
- Developing use cases
- Shaping them into user flows
- ...and finding different solutions for new features
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
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.
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:
- Complaint analysis (Customer support and Review websites)
- Email surveys on Post-purchase
- In-depth interviews
This was put together with further research:
- Qualitative questionnaires
- Booking flow through Google analytics
- Prototype usability testing
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:
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:
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.
I progressively adapted the new UI to all Mozio pages, designing new components and solutions where needed.
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.
- Styleguide specifications with sizes, colors, states, etc
- Documentation describing how UI components behaved to user interaction
- Providing solutions to unexpected use cases
- Adapting the design because of time or tech limitations
- Providing icons and visual assets
- Video mockups that could show how the app “moved”
Video mockups were used to showcase interaction examples.
Mozio platform increased it's booking conversions by ~90% over a period of 3 months.
It also achieved:
- A complete interface redesign
- A reusable front-end component library to be used for faster development
- Vastly improved how it handled use cases
- A base from which to begin designing for new use cases: train & bus bookings, hourly rides, schedule selection, etc
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.
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.
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
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:
The launch of App could be broken down into 3 phases :
- A tool for Mozio customers to manage their bookings
- Add on-demand and scheduled rides booking capabilities
- 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:
- Sign in/sign up
- Booking On-Demand rides (with & without destination)
- Choosing pick-up schedule
- Booking for the Airport express line
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.
With the user flows approved, we could begin designing the wireframes to start visualising the app. Developers also began building the environment and logic.
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.
The last use case we designed for before launch was for ‘ticketing purchase in the SEPTA airport line’, Philadelphia's public transit service.
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.
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 email@example.com
"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!”
"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."