Overview

Team

Miles Design, Product, and Marketing Teams

My role

UX Designer, Visual Designer

Tools used

Sketch, Adobe Illustrator

<aside> 🚌 Miles is a mobile app that rewards users for simply moving, be it by foot, bike, car, or public transit. The miles a user travels are converted to in-app miles that can be used to redeem for various Rewards.

</aside>

Donations were retrofitted into the existing structure designed for Rewards.

With the pandemic in full force, the Miles team needed to adapt to maintain user engagement. One idea born from this was the creation of charity campaigns, using the template for regular Rewards:

• Hero image → A text overlay on the hero image shows the donation amount for this specific listing.
• Reward title → The title is formatted to include the donation amount and charity name.
• Charity category → A category called "Miles For Charity" is used to filter all donations when searching.
• Donation details → Sections intended to describe reward redemption are used to describe how donation works.

I worked closely with the Design, Product, and Marketing Teams to improve the existing Donation feature.

Problem

A makeshift solution

These "hacks" were a good quick fix to launch donations on the Miles app. However, the Reward template used terms specific to Reward redemption, e.g. "Pay using 500 mi" and steps on "how to redeem", which don't make sense in a donation context. On top of this, the Visual Designer was required to edit each hero image to show the donation value on every charity campaign, for each amount possible.

The old donation feature, which used content blocks from Rewards and custom images to show different donation denominations for each campaign.