Where we started:
Apple released new guidelines for apps in the App Store (5.1.1, if you're curious). One of the most significant changes was the requirement that users allow account deletion within an app if account creation was allowed in the app.
This meant that Zwift was not in compliance with their guidelines, which could result in its removal from the App Store until compliance was achieved.
What we delivered:
I created designs and user flows to address the issues caused by the 5.1.1 guidelines - including a new account deletion flow (for iOS/Apple TV users and desktop users) and a new account creation flow for iOS/ATV users that circumvented the "Apple Tax" for new users. As part of this design effort, I created an entirely new design system component - a full-screen modal overlay with scrim abilities and a blurred in-context background.
Impact of this work:
First and foremost, these designs brought Zwift into compliance with Apple's new guidelines and GDPR "right to be forgotten" rules. In addition, the guidelines that Apple initially provided were vague, so our team, led by Teak Holley, worked diligently to vet my user flows with our Apple Store contact. In time, we were able to get Apple to agree to our flows and rewrite the guidelines for clarification. With these updated designs built we paved the way for Zwift to sign up new users solely through the website, meaning we avoided having to pay 30% of subcription fees (that we were currently paying for anyone that signed up in iOS/Apple TV).
Competitive Research:
Starting this project meant undertaking some competitive research to see how others had handled this App Store hurdle in the past. Fortunately, both Netflix and Spotify had well-publicized disagreements with Apple over in-app account handling.
The original log-in screen had two calls to action: Log in and "I'm new," an unclear CTA meant for people who did not yet have an account. When we undertook this update, the app had no real "friendly" introduction to Zwift; it was assumed that users were somewhat familiar with the product.
Updated Login Screen (1st time users)
This new 1st time user screen removed the Account Creation feature and directed users to sign up online. Making this update removed superfluous screens that interrupted the prospect-to-conversion flow (and annoyed existing users).
Post-conversion Login Screen
Prior to this feature, users would have to move through 3 separate screens to log in; this update combined the account notification text ("Don't have an account?…") with the login form, then removed the Create Account button - condensing the login process to a single screen.
Updating the Deletion Flow
To meet the 5.1.1 compliance guidelines, we needed to update the deletion flow but could not add a full account deletion flow in-app. This meant we would direct users to their account on Zwift.com, where they could delete their account—and for this feature, we'd need two separate flows since Apple TV does not allow users to open web links.
iOS Deletion Modal
The interim design created for engineering while we waited for APIs to be exposed. Without these APIs, some additional user data could not be displayed in the profile.
Apple TV Deletion Modal
The modal for Apple TV users included a QR code - since Apple TV does not have the ability to click through to a browser, we wanted a way to route users off-platform. This QR code lets Zwifters continue the deletion flow from a mobile device without having to remember the URL for the deletion page.
I also created specs for the game engineers so they could build this in-app. This meant designing a new "overlay modal" that blurred the background and presented the deletion message as an overlay to keep users in the context of their current ride.
While developing this modal with engineers, we created a new scrim for the game component system to ensure compliance with accessibility guidelines (for readability).
iOS Deletion Modal
The interim design created for engineering while we waited for APIs to be exposed. Without these APIs, some additional user data could not be displayed in the profile.
Apple TV Deletion Modal
The modal for Apple TV users included a QR code - since Apple TV does not have the ability to click through to a browser, we wanted a way to route users off-platform. This QR code lets Zwifters continue the deletion flow from a mobile device without having to remember the URL for the deletion page.
Once this design was completed and documentation was created, I turned this over to the game engineering team. One of the exciting elements of this project was that we had to communicate directly with Apple to clarify their requirements, as their guideline update was unclear. Initially, the guidelines simply stated, "If your app supports account creation, you must also offer account deletion within the app." with no further information on what constitutes account deletion.
Working with Teak Holley, we contacted our Apple contact and presented our deletion flows to ensure they were compliant. It took time, but they began to understand that account deletion would sometimes require directing users to a website - and this didn't just apply to Zwift but other companies as well. In time, they updated their deletion guidelines, accepting our deletion flow meeting the new requirements.
With this settled, we moved on to other projects, but you can still see how Apple updated their guidelines once we presented our work to them along with a request for more detail. This success is a testament to our team's dedication and expertise.