Mojio: Motion

Connected car mobile app for iOS and Android

Project Intro

In November of 2017, Mojio was looking to take their connected car app to the next level. The design team was asked to ideate on the existing structure of the app to include key features and help customer satisfaction.

Even though the product was gaining a significant amount of users every month, we noticed big drop-offs after the initial purchase. It seemed like there was a disconnect between the expected usage of the app, and what customers ultimately ended up using it for.

Main Tasks

- Customer Insights
- Update Personas
- User Interface & Experience

My Role

As part of a small and versatile design team, I was able to contribute evenly to almost all areas of the product’s development and design. I spearheaded new feature developments for Roadside Assistance and Gas Finder, starting with user research and ending at asset delivery to our development team.

My Tool Kit

Sketch

Whimsical

Flinto

Abstract

Adobe AE

Our Design Process

The first step of our design process involved user interviews to understand how our customers behaved when using the Motion App. We believed that it was important to get this information early on in the process, before getting hung up on an idea or prototyping. We then proceeded to synthesize all of the data gathered during these interviews using an affinity diagram. This helped us further analyze trends, themes, and opportunities for improvement.

Based on the discovered data, we split off into small teams of two and started ideating on possible solutions. We focused on the app's architecture first, and then moved into user flows and wireframes. This allowed us to discuss the ideas on a conceptual level rather than getting hung up on color and type choices. From this, we then moved to production mode... designing the interface considering design principles such as contrast, hierarchy, user interactions, and constant feedback from other team members.

Once the interface was ready to be presented to the stakeholders, I put together a prototype that highlighted all the new features and design updates, while putting them into context with the experience as a whole. I also made sure all of the design specs and assets were properly handed off to the development team to allow a frictionless implementation period.

The Research

To get a better understanding of where the product fell short we decided to interview a sample of our current customers who were a part of the Mojio Beta program. We set up an online screening survey and sent it out to nearly 500 users, this way we could select subjects from a diverse group and speed up some of the initial research. Of the targeted users, roughly 10% completed the survey. After organizing and prioritizing the users we ended up with 15 scheduled research interviews across different age groups, genders, and family status.

Each interview was recorded and annotated, so we would have enough information to create a holistic image of our customer's life cycle. To get there, we created an affinity diagram with all of the notes from the sessions. This helped us further analyze trends, themes, and opportunities for improvement. Once we were able to synthesize all of the data, we created hypothetical action items so we could start iterating on solutions to the problems that came up during the research.

Research Insights

What we found was that the product was built around high severity events such as accidents, car break-ins, and check engine lights. Even though these are all important things for a car-related app to cover, they happen at a low frequency. Therefore, customers did not get a lot of regular use out of the product.

We also discovered that we had an issue with notification overload, which led many of the interviewees to turn off their notifications and miss any communications that would have helped them get value out of the app.

Lastly, we noticed that none of the interviewees resembled our personas. After some further analysis it was clear that our personas were outdated and too broad, we had tried to satisfy every single use-case and missed the important ones in the process.

Narrowing Focus

Based on our research, we decided to narrow the five existing personas down to two more comprehensive ones. This allowed us to focus on features that actually satisfy our target customers, rather than building for too many verticals. We saw a lot of overlap between the existing personas, so naturally we grouped them into more complete ones.

Information Architecture

After collaborating with Product Managers, we identified a roadmap for features that would help us gain back the business of our newly identified target audiences. We went to the whiteboards to figure out where exactly these new features would fit in. The existing app was already cluttered and difficult to navigate, so we decided to completely re-do the architecture to allow for a more intuitive user experience, that made high-usage features accessible within one or two taps.

What we ended up with was this:

- Introducing a tab bar for easier navigation
- Context cards on the home screen to display relevant info
- Updating the trip timeline to allow for easy expensing
- Adding a service marketplace for car related offers
- Introducing a virtual glovebox to store important documents

Validation Through User Flows

Once we landed on an approach for the app's Information Architecture, we decided to put everything into context by mapping out user flows for different scenarios that came up during the interviews.

This helped us to get a better understanding of how the envisioned architecture would perform in situations that are "high stress" (car break in or a severe check engine light), and in situations that are "low stress" (parking, running low on gas, etc).

Introducing the Service Market Place

A central place for car owners to access car related services and promotional offers. Find parking, repairs & maintenance, roadside assistance, and cheap gas near you. Leveraging the hardware connected to your car, Mojio is able to know how much gas your car has left, as well as any upcoming services or necessary repairs. Using this knowledge, we were now able to now actively suggest the best option for whatever service would be needed!

Roadside Assistance

As part of the service marketplace, we introduced a fully digital roadside assistance service. This was possible thanks to our partnership with T-Mobile and Allstate, and was the first project I had ownership of the design process. I collaborated directly with the stakeholders at Mojio, T-Mobile, and Allstate to find a solution that would provide our customers with a great experience.

User Flow

Roadside assistance varies greatly depending on the situation. Service providers depend on getting the right information up front to be able to send the right kind of help. There were also a lot of different restrictions put on us by the limitations of Allstate's APIs. To find a solution, I mapped out an end-to-end user flow including all possible scenarios.

Wire Frames

Now that the flow for all of the scenarios was established, my next challenge was to come up with a framework that would work for all of the different scenarios that could come up. That's when I went into wire framing, to be able to think strictly about how to organize information on the page to allow for a consistent pattern throughout the flow.

Screen Flow

Lastly, I designed all of the User Interface for the feature. To put the designs through the approval process with T-Mobile and Allstate I created a flow diagram of all of the screens. This allowed people to view the screens in context with each other and made the review process a lot easier. After making a few tweaks and revisions based on feedback, this was also used in the hand-off process to the developers.

Experiencing Roadside Assistance

Since the service that is dispatched to the customer varies a lot depending on what exactly the issue is, I had to find the right balance between an easy experience for the customer while still extracting enough details for the service provider. The goal was to provide an experience that is simple and stress free, in an already stressful situation.

I spent a lot of time on refining the copy. My goal was to be clear, and avoid any wrong information being provided by the customers. This was a situation where it was better to have additional review screens to make sure no information was missed in the heat of the moment.

Fuel Finder

Another part of the service market place we added was a gas station locator. This was the second project I took ownership of. I collaborated directly with the stakeholders at Mojio to get the feature ready for a live demo at CES on a compressed timeline of 3 weeks. Because of this timeline I was forced to rush through a lot of the design process and combined my wireframing and UI work.

Validation

The service marketplace has turned out to be a successful addition to the Mojio offering. Clearly, there is still room for improvement but overall the features such as digital roadside assistance and fuel have been well received. However, it should be iterated on by considering usability tests, A/B tests, and other in-depth surveys with the user to improve the initial version.