Customer Mobile 4.0

The most advanced mobile ticketing app for transit.
A reactive design framework


Customer Mobile 4.0 is the 4th version of the consumer application of Bytemark Inc. It’s a mobile application that allows users to buy their tickets in their smartphones. Each mobile application is rebranded to every single client, with a set of features chosen by the client according to the organization needs.

This project displays the design framework that was created in order to be reactive to the needs of every transit organization. This meant having to understand all the patterns associated to transit organizations, map every single element of the mobile applications into a logical and ruled theming configuration file. Besides having to tackle this extremely complex problems we needed to re-design and update the UI from the current version at that time, the version 2.0, which was dated from iOS 6 and was not designed with a UCD approach.

All the designs that were done, regarding how the UI and the UX should be built, was based on a user base of hundreds of thousands of active users. Extensive user testing, interviews and prototypes were created to reach the goal.

The Customer Mobile 4.0 currently has +120 different UI states.

The Challenge

The initial challenge was to update the UI and UX regarding the version 2.0 of the customer mobile application. As we started digging more into the process of updating we started to realize that this would involve solving way more complex problems.

So the challenge shifted from just a simple re-design, to an overall re-thinking of the experience, how we could create a framework that would adapt to every single transit organization feature, branding and needs.


If we have data, let’s look at data. If all we have are opinions, let’s go with mine.

Jim Barksdale, former CEO of Netscape

User Research and Data Analysis

We had data, tons of data. We had a user base of over 300k active users. This provided us valuable information regarding how our users interacted with the interface, all sorts of patterns and most importantly gave us an overall view of what needed to be highlighted and what needed to be simplified.

But data was not enough, we needed customer insights. This required a deep analysis of the hundreds of app store reviews, customer feedback and client feedback. After crossing the information derived from customer insights and data from our system we now had a goal of what needed to be improved.

We also learned we did not have enough data. We didn’t have funnels that could tell us our biggest pain points. We did not have data that showed where and why we were winning or losing users.

This was a lesson we made sure we learned and implemented when building CM 4.0.

Today every single action is covered in our analytics tools. Our funnels show a conversion rate of 65% of sales.

Amazon avarage conversion rate is 3.32%.

Sketching, Wireframing, Prototyping

And we sketched … a lot.
Use 1 ticket, Use multiple tickets, Tickets sections, Re-buy a ticket, Tickets restrictions, Tickets saved to the cloud, Multiple ways to display tickets, Active tickects, Non-Active tickets, Fare Medium account, Reload account, Add value to account, empty state, error state, no internet, different types of tickets, all data available for every type of ticket … You get the idea, we sketched every single feature, cool idea, need, etc. Everything that came into our minds.

We knew the importance of wireframing. We had all this data, ideas from sketching.
Now we needed to see if the data would actually make sense in the interface. This was also our opportunity to start testing some of the ideas and prototypes that we had.

One app for all

With customer mobile 2.0 and it’s custom development it took +3 months to launch a new app every time we had to onboard a new transit organization.

This was the biggest and most complex problem we faced with customer mobile 4.0.

We had to address each feature as an independent module that did not depend on other modules and that could be toggled on/off depending on the organization needs.

This required having a deep understanding of every type of transit organization, of every type of product, and every way to search and filter products.

Deep Focus, Better Experience

We worked on the little details, on micro interactions that made
the experience more enjoyable

A better way to travel

The customer mobile 4.0 continues to improve the lives of hundreds of thousands
of users every day.