Fleetlify: Track fuel expenses with ease

In this case study, I’ll explain how I designed and simplified the experience of having and using a fuel expense tracker. This assignment was given to me by Numadic as 3 days design sprint and I managed to crack an internship & a full-time role was offered to me post this internship.

❓Context

Since we were in our final year of engineering, everyone was applying for campus placements. Me, being a rebel didn’t apply for campus placements since I always wanted to work for a startup and was fascinated by the startup culture. Also, only a few were hiring for the product designer role.

While actively looking for opportunities, I stumbled upon the founder of Numadic for a web3 meetup hosted by them. While casually chatting with the team, I asked them if there were any openings for UI/UX interns as I was still in my college and wanted to push through my limits. I shared my projects with them and was given a test.

The logistics industry was utterly new to me. I didn’t even know anything about it before attempting the assignment. This is how I was offered the assignment. Looking at it I was pretty nervous just like anyone new to the field.

Day 1 went into learning and getting a few insights about the industry. The day ended by doing a brain dump of all the information I researched about.

The first task was to note down whatever I understood from the problem statement and list down a few things.

The assignment brief was given by them. I declared the assignment goals and personal goals that I had to achieve.

Based on my target audience, I wrote a few design considerations that had to be kept in mind while designing the app.

🔎 Research

Before starting my research, I jotted down a few pointers and personal goals that I had to achieve by the end of the assignment.

Since the time was limited, I interviewed 3 fleet operators on a phone call and the following questions were asked :

1. How many cars do you own?

2. How do you measure your fuel expense?

3. How do you track the efficiency of your vehicle?

4. Where does your fleet travel on a daily basis?

5. What metrics do you consider when tracking your expenses?

6. What tools do you use to track your expenses?

7. Are you willing to use an app to track your expenses?

Based on the answers, I created the user persona.

User persona

🧠 Brainstorm/Braindump

The best way to get your mind working is by scribbling all the ideas you get. I just took a diary and started jotting down every thought regarding the assignment running through my mind.

🤺 Competitor Analysis

I started by looking at competitor apps in the same space. This was done to get some visual inspiration and understand design patterns. I separated the screens according to their patterns. With this day 1 concluded.

Day 2 began with creating the information architecture and the user flow. As the day progressed I set up a design system for the app and started with UI design.

ℹ️ Information Architecture

I structured the content of the app as follows. This helped me to organize my ideas.

Information Architecture

🚗 User flow

Uday wants to freely navigate through the app without facing any problems. The user flow speaks about how the user navigates through the app to achieve their desired action.

📱 Branding

Uday’s dream of tracking his fuel expense with ease is about to get real. The Fleetlify logo shows a car connected to the network. It’s as if everything about the car is connected and can be tracked on the phone.

🎨Visual design

Half of day 2 and day 3 were fully dedicated to visual design. I set up various text styles and color styles for the app. Icons are directly used from the remix icon pack. Here’s the link to the Figma file:

From creating UI in 3 days to making it fully responsive, had a lot of learnings in doing so. Creating new screens and tweaking existing screens was a part of day 3.

Now, I will be explaining all my design decisions. Here, are the different flows:

Splash and Onboarding

Sign-in / Sign-up

Getting to know the user

Dashboard

Transaction

Analytics

Expansion of floating action button

Uday can now easily track the fuel expenses of his fleets. He doesn’t have to waste time maintaining all his records on an Excel sheet. He can just scan the bills and upload them to the app.

My Learnings

1. Learned to approach a problem given a limited time frame.
2. Improved my ability to prioritize tasks.
3. Improved my art of storytelling.

Thanks for sticking to the end. Kudos!

Currently open to internships.

Message me on Twitter or LinkedIn if you would like to have a chat.

Also, you can clap upto 50 times just by holding the clap button. If you like my work, please do so!

Have a great day! :)