2022 Award Winner
Fav
Make Mileage Tracking Simple.
1
2
zabal

Zabal Media's Fresh Take on MileIQ

The company was previously acquired by Microsoft in 2015. The founder of the company reached out to us to bring a new / fresh look to the brand and website design. There were many elements of the brand that remained relevant, but overall, they needed a complete redesign and migration to Webflow as their main CMS.

80B+
Miles logged
1M+
Active users
5
Team members
16
Pages designed + Developed
zabalzabal
zabalzabalzabalzabal
zabalzabal
CLIENT DETAILS
Up-heading

Understanding the business

Business Goals

MileIQ was already an established brand with millions of active users using the app. The intention behind the project was to bring the ux/ui of their website to the next level, while maintaining the same clean colors and strong typography presence that their users recognized.

oystercursor

Business challenges

The previous company website was not built in a scalable way. This fact made it extremely difficult to make any updates on the website without breaking things in the process. Lastly, their branding had been stagnant for over 4 years and required a refresh to look more modern.

zabal
Chapter 1
RESEARCH
KEY findings
Up-heading

Asking the right questions

Zabal

Research goals

How might we take the MileIQ brand that has a well established audience and improve upon it without pushing the brand past the point of not being recognizable by their current userbase? 

zabal
01

Lorem ipsum

Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of the Lorem Ipsum.

zabal
02

Lorem ipsum

Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of the Lorem Ipsum.

zabal
03

Lorem ipsum

Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of the Lorem Ipsum.

zabal
04

Lorem ipsum

Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text of the Lorem Ipsum.

zabal
01

Accessible

From the first call with the founder, we learned that accessibility was key for the brand to succeed. Their branding was not accessible.

zabal
02

Reliable

The website experiences needed to personify how users can always trust the product to be useful and accurate with mile tracking.

zabal
03

Beautiful

We needed to include elements from their beautiful user interface all through the website to ensure that users knew that this is a product company at scale.

zabal
04

Enterprise

Their product was enterprise ready “for teams” and needed to have the multi-user look and feel to attract a larger userbase that will increase adoption organically.

What else are users tracking?
How much money do users save using MileIQ?
What is not currently working on the app?
How do users find MileIQ?
What else are users tracking?
How much money do users save using MileIQ?
What is not currently working on the app?
How do users find MileIQ?
Is there anything that users dislike about the app?
How many active users go on the app each day?
What is the marketing strategy?
What are the underserved needs of the app?
Is there anything that users dislike about the app?
How many active users go on the app each day?
What is the marketing strategy?
What are the underserved needs of the app?
How are users sharing the app?
How do users get answers to their questions?
What is the most important part of the website?
Can teams use MileIQ?
How are users sharing the app?
How do users get answers to their questions?
What is the most important part of the website?
Can teams use MileIQ?
COMPETITIVE ANALYSIS
Up-heading

Interface inspirations

zabal
zabalzabal

Creative direction

Streets, paths, highways, etc. These were all key words that set the tone for the new visual design direction. We also reviewed their competitors websites to identify what was working and what was not.

zabal
zabal
zabal
zabal
Chapter 2
User Experience
zabal
zabal
Information architecture
Up-heading

Creating the systems

zabal

Creating for scalability

We architected the design and development environments in a scalable way that can easily be maintained by their marketing team & designers.

Once the framework was built out, we were able to quickly build new landing pages for the MileIQ team. We also trained them so that they can make edits on their own.

Mile IQ - Sitemap & Back-end architecture

Final Draft
parking
Wireframes
Up-heading

Exploring solutions

zabal
Chapter 3
Visual design
zabal
zabal
STYLEGUIDE + COMPONENTS
Up-heading

Visual design guidelines

Colors

RGB
FFB213
RGB
00BCF3
RGB
1F2443
RGB
FFFFFF

Lato

Mile
zabal

Like what you see? Don't let your website idle another day

START A PROJECT
Go to the next project:
Oyster
zabal
zabal