As a lead product designer at Mojio, I worked on Motion, Mojio's flagship app for iOS and Android. Motion provides users valuable insights into their personal cars. I managed and led all steps of Motion’s design process, including research and creating personas, user journey, designing low and high fidelity wireframes, visual design, and providing specs to engineers and working closely with them.  

MOTION APP

Role: Lead Designer
Team: Tom Bergman (Junior UX Designer),
Raj Singh (Product Manager)

phoes_hero.png

 

The company was in need of a new app that addressed all their customer needs and was going to be loved by them. It was obvious Mojio also needed rebranding—there was no solid brand voice and everything looked inconsistent which was showing through their products and website. 

PROBLEM

When I joined Mojio in 2016, the company had released three apps in the past, but they were all very narrow in scope and plagued by inconsistent and confusing UX, lack of brand consistency, a very low user base and a high rate of user drops.

 

Image2@3x.png

 

As Mojio’s previous apps had a lot of detailed and often unnecessary information, we ran few surveys and looked at the data to figure out which features were important to the users. After we gathered some data, our approach in figuring out what was going into Motion for MVP release was asking this simple question: “Is this valuable to the user, and why and how is valuable to the user?” The stronger the response, the greater the importance we gave it. This allowed us to still deliver a good experience for our users despite the fact that we didn't have the time nor the budget to conduct user interviews.

SOLUTION

I began my first task by helping the VP of marketing to lead the brand evolution project, guiding the freelance designer and marketing to update the logo and extend the brand for all the systems and touch points, and to create a brand style guide that everyone can follow in order to create a consistent brand experience. I also worked very closely with the new product manager to take the best parts of the existing apps and weaving them into a pleasant, easy to use experience in preparation for launching with our first major partner, T-Mobile.

userNeeds1.png

These quick sketches allowed us to move fast and test our designs quickly to make sure our interactions were simple and the app was easy to understand. Once we landed on the most promising direction we began wireframing in Sketch. 

After we defined our basic costumers' needs we created our app architecture, and quickly sketched multiple versions of wireframes to explore how we could organize the information and design the interactions. 

homeScreen@2x.png

 

I normally designed the iOS screens before each sprints first, and after delivering the iOS wireframes to the engineers I would quickly transfer the same experience to Android in two to three days following the Android design patterns to make sure the experience was also intuitive to our Android users. One particular example of this was the stylistic differences between the iOS ‘Settings’ screen and the Android navigation drawer which served similar purposes.

MULTIPLE PLATFORMS IN PARALLEL

One significant challenge faced by both design and development teams was that we were launching both iOS and Android versions of Motion simultaneously and due to our startup nature and limited resources I had to design both experiences simultaneously.

Although at the time seemed like a difficult task I quickly found a way around managing the design for both platforms and it turned out to be a great experience, since I was forced to switch very quickly between the Android and iOS platform and it helped me to gain a great experience and skill set.

 

We jotted down the most important points on a sticky notes, then we used the affinity mapping technique to synthesize all the information in order to create our personas based on real qualitative data.

These personas provided us a wealth of insight on how to move forward with the design of the app. Below I’ll walk through some of the features that were designed as a result of our personas and the challenges we had in implementing them.

 

POST MVP / PERSONA DEVELOPMENT

We took the three major features of Mojio’s first apps–tracking your trip history, monitoring your vehicle’s security and location, providing trip statistics, and business tagging and wrapped them up into one app to release our MVP. 

Now we had to expand upon this, and determine how the app would be shaped going forward. To do this, we conducted user interviews and brought our users to the company for the first time. We recorded our users by their permission to go back and listen to the interviews again, look for their facial expressions and even their pauses in order to find their explicit vs. implicit needs.

Family.jpg

 

One of the major challenges in designing the new home screen was that multi-car view touches on many more aspects than just the map. It required us to reinvent the home screen to provide both an overview of a user’s vehicles but also allow them to drill down into the details of one.

We also had to consider how to implement these changes without shocking the user. How much change would be too much change? Would the items on our roadmap compliment or complicate this design as it was rolled out? All these things had to be considered and balanced in our redesign of the home screen.

MULTI-CAR VIEW

Our user interviews indicated a strong desire and need to see multiple vehicles on the map at once. For people who owned multiple cars with multiple devices, it was a hassle to swap back and forth between cars. Additionally, our post-launch analytics data indicated that the map was the element that users engaged with the most.

We decided that the map would be a good feature to invest more time and design thought into. In doing this, we also wanted to investigate different ways we could make the app more inviting and visually engaging, including customization options for the vehicles to easily differentiate the cars.

 

PostMVP.jpg

BUSINESS EXPENSING

At Motion’s launch, users could export a history of all of their trips but there were numerous problems with the implementation: they could only export their full history, the feature was difficult to find as it was located under account settings, and there was no way to export by dates or tags. For our users who used our product primarily to track their mileage for expensing purposes, further development of this feature was needed.

 

The first decision to make was where this feature would live. While we considered adding a ‘reports’ section to app, we ultimately settled on placing the feature within Trip History, since this is where users would be tagging their trips and they don't have to navigate to different sections of the app. We ultimately divided Trip History into two tabs, with the business tab offering expensing options by month and year.

 

I believe design should be viewed holistically from marketing to product to engineering—without a strong brand the product will not sell well, and without a strong product the brand will not become as valuable, and without a strong engineering the product vision will never come to life. I'm thrilled to have been able to manage and evolve the Mojio brand with all it's limitations, set the vision of the product and build a design team and culture within the company.

I also believe design is not an individual work, there are many people at play, and I've been fortunate to work with a great CEO who gave me the freedom to explore and valued design, a great product and design team, and engineers who challenged me to view things from their point of view and their limitations when I was designing this app.

 

TAKE AWAY

With every design projects there is always room for improvement, and there are some things I wish I had done differently when I started the design of this app. For example, I wish I had architected the app with a bottom nav bar, even though we had a good reason to not go with the bottom nav bar at the time when we designed the app, but as our app continued to grow with additional features and services it was evident that we needed a bottom nav bar. But, I believe every mistake or figuring out a way to deliver good experiences despite the limitations has allowed me to grow even more as a designer.

Since starting at Mojio, I have experienced our Palo Alto office growing from 5 employees to 20 employees. Our users have gone up from 2,000 to 120,000 since our product launched in November of 2016. I'm a true believer that design can make a difference in business and I've always tried to instill a design culture wherever I go.