Bytemark Customer Mobile
A white-label reactive design system for multiple OS and mediums.
Overview

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 research, user testing, interviews and prototypes were created to reach the goal.

The Customer Mobile 4.0 had +120 different UI states and components.


My Role

Lead Product Designer

User Research, Interaction, Visual design, Prototyping & testing

January 2015 till September 2017
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
Research & 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.

With the new implementation of the Customer Mobile 4.0 all actions were mapped into an analytics tool. Relevant and appropriate funnels were mapped and defined while tagging all actions.

After the launch of the mobile 4.0 to the first clients, the funnels showed 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.

.

A design system was born

Back in 2015 the term Design Systems and the models originally published by Nathan Curtis the "father" of modern design systems had just been published on Medium. The design industry was still working with Style Guides and other relevant artefacts.

When we started re-designing and improve the UI from the customer mobile 2.0 to the 4.0 we realized we needed a sort of framework in place in order to scale to the constant wave of new clients, all with different needs and brands, but same patterns.

Back then we called it a Reactive Design Framework due to how the components and UI states would react and adapt to the needs of our clients and users. And so, Bytemark agnostic and fully mobile, Design System was born.



A scalable approach

From the very beginning we understood we needed to have a sort of theme in place that would allow us to customize quickly the mobile app while maintaining all the remaining aspects.

The theme would take in consideration business needs, organizational needs and above all user needs.

This would help us reduce the time to launch a new mobile app by almost 3 months.


Not only brand was an important factor in creating this system approach, we also needed a logical theme. Meaning that our components would also need to change depending on the needs of the transit organization.


Learnings

During my tenure at Bytemark we launched and deployed the new Customer Mobile 4.0 to all the current transit organizations in our system. We gathered feedback from clients, we gathered feedback from users and we obsessed with the new data points available to us.

1. Iterative approach
We analysed the feedback available to us, we interviewed clients and we refined our approach. We ditched certain design trends and we went with more solid approaches. We deepened our user understanding and we improved and iterated certain key flows of the app.

2. Focus on the right things
Prioritization became critical to the success of this project. We learned to let to go of non-essential and out-of-scope solutions. We learned to focus on delivering constant user value with a high quality.

3. Scaling design systems is hard
Even though we did not know we were building a design system we understood the magnitude of this task.
Re-designing components and defining a logical theme at the same time derailed us and made us blockers at certain times. We went from an approach to define the entire theme from scratch instead of defining as we go. This created a gigantic bottleneck which blocked essential work from moving forward. In the end we realized the theme work was never fully complete and that it would keep evolving as the system matured.

A better and easier way to travel

The customer mobile continues to improve the lives of hundreds of thousands of users. This design system approach helped us solve business and user problems which positioned the company to become an industry leader.

When I left Bytemark in 2017 the customer mobile had more than 500k users across all transit organizations.

More Projects