top of page
在電子商務平台上購物的在線支付

HeyAuto

UI Project Designed by Yier Cao

HeyAuto is an app that manages all your auto payment of subscription plans, reminds you before the renewal day, and instructs you how to find and modify your subscription plan.

Design Brief

Pitch

Manage & Remind Your Subscription Auto Payment

Overview

HeyAuto is an app that manages all your auto payment of subscription plans, reminds you before the renewal day, and instructs you how to find and modify your subscription plan.

Differenciation

It has happened more than once that, I forget to cancel my free-trial subscription so I am charged with money. When I have so many apps, including Uber, Spotify, Youtube and some website services like Factor, Chewy, how can I manage my subscription plans?

There are many financial apps, such as banking apps, investment apps, but they don’t manage the subscription plans in different apps. When the users subscribe to the premium services in different apps, the subscription transaction typically happens within each app. However, there is no app that brings together all the auto payment.

By using HeyAuto, the users save the trouble to open each app to check the subscription plan and modify the auto payment. Many apps have promotions like a one-month free trial which follows with an auto payment in the next month. From time to time, the users forget to cancel the auto payment and will only be reminded when they see the transaction notification. By using HeyAuto, the users can be reminded before the auto payment is processed.

Audience

  • Adults who have several bank accounts, cards, and payment methods.

  • Adults who use apps and digital services a lot.

  • Adults who are not good at navigating app systems.

  • Adults who like free trials.

Pain Points & Opportunities

  • I just want to use the app once or twice during the free trial, but I always forget to cancel them so it ends up costing me money!

  • I have so many apps and subscriptions to look after and I don’t have time to check one-by-one.

  • I would only be reminded of the auto payment when the transaction actually appears on my bank account statement.

  • I see a transaction record on my bank account but I don’t know where it comes from.

  • The app system is so complicated and it deliberately hides the “Cancel Subscription” under many layers. Sometimes I fail to find it!

User Flow

  • Hannah reviews subscription of UberEats and Spotify, she determines to keep subscription for UberEats and cancel the Spotify subscription.

  • Hannah just loses a Visa card and get a new Master card, so she needs to delete the Visa, add a Master card, and update her payment method.

  • Hannah starts a one-year free trial in Walmart which she plans to cancel before the next auto payment.

Design System

Typography

Typography.png

Color Palette: Red Gold

I choose this color because gradient creates a dynamic vibe. I chooses yellow and red as two ends because the orange generated by the gradient symbolizes safety, reliability and care. Though the combination of warm colors, HeyAuto is an app that stands from the users’ point of view, helping the users to manage their subscription, saving their time of navigating through several apps and websites, and preventing them from losing money on unwanted services.

Brand

Secondary

Neutrals

User Flow

A. Hannah reviews the upcoming subscriptions, keeps a monthly subscription for UberEats and cancels the Spotify subscription.

1. Landing Page 1.png

Click "Skip reminder for this month"

2. Landing Page 2.png

Click "Manage my subscription"

3. Subscription Detail.png

Click "How to manage my subscription?"

4. Subscription Instruction.png

Click "I have canceled the subscription"

Cancel Plan_3x.png

B.Hannah filters the subscription associated with her Visa card, replace it with a new Master card.

5. All Subscriptions.png

Click “Filter"

Screenshot 2024-04-17 at 10.50.48 AM_3x.png

Select "Visa 5646" and apply filter 

5. All Subscriptions.png

Click the card of UberEats

8. Payment Information.png

Click "Manage My Payment Method"

Screenshot 2024-04-17 at 11.39.11 AM_3x.png

Click "Edit"

6. UberEats Subscription Detail.png

Select "Visa 5646" and
click "Delete"

delete_3x.png

Click “Deleted"

next step_3x.png

Click "Replace with a new method"

new paymeny_3x.png

Click "Add"

added_3x.png

C. Hannah starts a one-year free trial in Walmart which she plans to cancel before the next auto payment.

9. New Subscription.png

Empty Status

11. New Subscription (Error).png

Error Status

Design File

Screenshot 2024-04-17 at 12.00.59 PM.png

Figma File

Interactive Prototype

bottom of page