Cardata Mileage

Improving the user experience of our mobile tracking application while building design consistency.

Go Further With Lyft

Cardata Mobile is a mileage tracking application that businesses use to record mileage for tax and reimburse employee for using their personal vehicle for work purposes. At any given time, there can be over 24,000 drivers using the application to automatically track their work mileage.
The problem

In early 2023, users began having severe issues with the tracking accuracy and automatic recording of mileage based on their schedule. We needed address these functional issues and poor user experience to build back trust with our core user base.

To avoid repeating previous mistakes, our team developed a detailed testing plan and robust alpha/beta acceptance criteria before releasing to our entire user base.

SoLUTION

Our team focused on a gradual release of features, starting with the minimum viable product required to ensure core trip tracking functionality, utilizing Pathsense technology to improve accuracy.

My role was to lead designs through all project milestones as we created a refreshed app on par with the original apps functionality. I worked closely with our team of engineers, and product managers throughout the entire process, from testing and QA, to launch.

RoleS

Lead UX Designer
Prototyping

Timeline

6 months
Shipped October 2023

TOOLs UTILIZED

Figma
After Effects
Premier Pro

Team

1 UX Designer
1 Researcher
1 Content Designer
2 Product Managers
8 Developers

Dashboard States

At a glance, the dashboard provides an overview of a users tracking status and mileage in a daily or monthly view.

Based on a users schedule settings, tracking will be automatically turned on and off throughout the day to reflect their working hours.

Filtering Trips

Trip filtering allows users to narrow down their tracked trips based on trip type (all trips, unclassified, business, or personal) and/or the date range.

Since users are only paid on business trips, trips left unclassified at the end of a month can mean money is being left on the table.

Report an issue

With previous tracking issues in mind, we created a flow for users to report an issue directly to the product team. This allows the product team to stay in the loop with issues, and quickly flag bugs.

Users can select one of the issues listed or type a custom response.

Implementing single sign-on

To centralize authentication, bolster security, and create a more seamless user experience, Cardata offered SSO as an additional service to users.

Following a traditional SSO flow, our login and registration page feature a Continue with SSO button. In our case, some accounts are linked to multiple companies so I included a Company Selection page.

Streamlined system settings
In order for Cardata's app to successfully capture drivers mileage, it is imperative for users system settings to accurately set. I used icon imagery, and worked closely with our Content Creator, Erin Mclaughlin, to craft detailed titles and descriptions to clearly communicate next steps for the user.

To accommodate for updating operating systems, we created content and instructions unique to Android and iOS (above) devices.
How we got here...

At Cardata, we have the unique KPI of reducing the amount of time our users spend on our platforms by utilizing automation and background tracking. Yet we faced a hurdle in 2023, users were being logged out of their devices as our app was tracking and processing trips in the background, leading to missed trips, inaccurate tracking, trip duplication and an increase in user interaction with the app to frequently check the app, making sure it was and running.

Tracking issues spanned across both iOS and Android devices, as a result, our support team was inundated with calls and emails. Users were unhappy, rightfully so, and it was clear we needed to build back trust with our users now more than ever. The optimist in me thought, "we can only go up from here".

Research Led with empathy

To diagnose the issues our drivers were having, we embarked on a Field Testing program with some of our most affected drivers. Our research was largely unmoderated, conducted primarily through async communications and touch-points such as emails and diary entry-style surveys.

It was important that we approached research with a high degree of sensitivity toward our users truly listening, understanding and empathizing with their frustrations.

Our launch plan

The app launch was a collaborative effort between Cardata's engineering, PM and UX, with tasks prioritized as a team. Once tracking stability was assured, we focused on tasks that would have the most impact on users and then feature parity to the original app.

Staged approach

With successful trip tracking the main priority, alpha was a very basic 24/7 tracking application with limited additional functionality. From there, we reintroduced features while testing and gathering feedback from users.

Iterative design process

We make informed product decisions based on feedbacks we get from our users, typically gathered through user interviews. With tight deadlines and quick iterations, we streamlined the flow of questions, feedback, feature requests and bugs from beta testers to our product team to implement the following feature improvements.

IMPROVING schedule functionality

After diving into user feedback, I reexamined the tracking schedule to account for an edge cases that hadn't been previously considered. Previously, customization was limited and users were unable to schedule more than one shift per day.

To address this, I designed an additional feature to create more than one scheduled window per day, an inclusive schedule for a driver that works the night shift or one that prefers to exclude their lunch hour. Below I compare the before and after designs of a set schedule.

Using Design to visualize action

To account for poor tracking reliability, my early design iterations included functions for manually starting and/or ending a trip. Through successful beta testing and QA, as our confidence in tracking accuracy grew, I implored stakeholders to remove the manual trip actions and END button from the main tracking card.

After multiple iterations (below), we arrived at a solution (to the left) that offers a simple card design with an interactive radar animation.

Introducing Dark Mode

Since our first user interview,

Developing a robust design system

Design systems act as our toolkit for all components including buttons, switches, colours, text styles, and form inputs. This extensive library acts as a source of truth for current and future team members to utilize and build from.

In early June, when the need for a design system was agreed upon, our company was on the precipice of immense growth with redesigns planned for both our mobile platform for drivers and web platform for admin. Since these platforms would be completely refreshed, the library grew as we designed.

FInal product
Driving what matters

In anticipation for launch, I designed and produced the following marketing video using Adobe After Affects and Premier Pro to introducing the enhancements to our screens and features inspired by valuable user feedback to make Cardata Mobile the best it can be.

User registration

Users can toggle between Local and Long Distance rides straight from the home screen. Long distance are from city the city, users will be able to see of specific pick-up and drop-off locations while browsing.

Dashboard and My Trips

Posts can be viewed in either a list or map format depending on what the user prefers. Trip cards feature the drivers details, rating, vehicle type and the price of ride.

Notice that each post details the exact pick-up and drop-off details so they can pick the most convenient locations for their needs.

Efficient Registration flow

Users can toggle between Local and Long Distance rides straight from the home screen. Long distance are from city the city, users will be able to see of specific pick-up and drop-off locations while browsing.

Retrospective

Feedback from beta testing was overwhelmingly positive, even from some of our toughest users. Launch to the App Store and Google Play is scheduled for October 30th. Stay tuned for updates on how it is received by the remaining 20,000+ users.

As a team, we continue to ideate on new features and improvements to the app based on the priority matrix below. Next up, bringing insurance submission in house and creating a central notification tab for users.

Next Project
Previous Project
Improving the user experience of our tracking application while building design consistency across the mobile platform.
Improving the user experience of our tracking application while building design consistency across the mobile platform.
Research and design of a new feature for Lyft to include long distance rideshares.
Redesigning the e-commerce experience and brand vision for an established bookstore.