Apple Account - Manage Subs on Web

Subscriptions Management in Apple Account on the Web

Prior to this project, users had no way to manage their subscriptions (first and third party subscriptions purchased through their Apple Account) on the web. This was an issue if a user lost their Apple devices or lost access to them and needed to manage/cancel their subscription plans.

The goal of this work was to bring the full subscriptions management experience on iOS to the web. We wanted to align this experience to iOS as closely as possible while still utilizing the existing web UI to create a cohesive experience within the rest of the Apple Account site.

https://account.apple.com/account/manage/section/subscriptions.

Problem

No way for users to manage or cancel their subscriptions on the web or off-Apple device.

Goals

Bring the full manage subscriptions experience currently on iOS to the web.
Keep it cohesive with the rest of the UI/experience within the Apple Account site.

Target Users

Anyone with subscriptions subscribed through Apple or the App Store.

My role

UX Designer

Discovery

Native iOS Experience (Key Screens)

While the UI of our web screens are built to align with the current Apple Account web UI, we used the existing iOS screens seen below as our framework for the structure and layout for how we would utilize the web building blocks.

Mocks

Subscriptions List Page

As you can see looking at the ordering of the key items such as the sections headers "Active"/"Inactive", the subscriptions list itself, and the preferences at the bottom of the screen, our web screens are aligned to what the user would see on iOS, creating a more holistic experience within the Apple ecosystem.

Subscriptions Detail Page

While some of the secondary functions on this screen such as "See All Plans" and "Cancel" are presented differently to account for differences in platform patterns, we wanted to keep the integrity of the header lockup with the navigation, header, icon, plan tier, description, and renewal information all grouped consistently across both platforms.

Dynamic Messaging

For use cases where a user is not in a standard active subscription status, we'll utilize the area where we would typically show the renewal information to display the current subscription status.

Below are examples of when a subscription is under a free trial, an expiring subscription, and an expired subscription (and present the option to renew again.)

Change Subscription Plan

To change your subscription plan, you can click "See All Plans" on the subscription page and it will pull up the list of available plans. See the end to end flow for upgrading a plan below.

Cancel Subscription

To cancel a subscription plan, a user click "Cancel" on the subscription page and it will prompt them to confirm cancellation. We will also communicate to the user if cancellation will impact any other of their active apps or services. See the end to end flow for cancelling a subscription below.

Switch to Device

In some complex use cases where full management functionality is limited to only on native platforms, we'll give the user the option to switch to their Apple device to continue managing their subscription. An example of this currently is Apple One subscriptions.

Summary

While we were able to translate most of the core functionality of subscription management to web successfully, we hope to continue enhancing the experience in future releases and eliminate the need for our "Continue on Device" flows. The use cases I've covered here only scratch the surface of the various states and forms each of these screens could take depending on the product, subscription status, and subscription type of each.