The Ask
ESPN’s product team approached UX Engineering looking for help with developing a high fidelity iOS prototype focused on what portrait vertical video would look like inside the ESPN app. The ESPN social team was already creating high-quality vertical video assets for use in ESPN’s Instagram,TikTok, and Snapchat presences. The product team was interested in evaluating if we could reuse those assets inside the ESPN iOS app.
There were concerns the format wouldn’t feel natural inside the statistics and news heavy application.
The Prototype
I lead the development of the iOS prototype for this project. As with all of our prototyping projects in UX Engineering, the application was written entirely in native Swift, leveraging UIKit
We couldn’t build it directly in the existing codebase due to a number of logistic concerns. We recreated the home feed to simulate a user discovering vertical video tiles and entering the experience from there.
Shaking gesture
The product team wanted to see variant sizes of vertical video story cards. We implemented a shake feature that allows users to rotate between different layouts.
Meaningful Motion
One way we felt we could make a vertical video experience feel more natural in the ESPN application is by leveraging a meaningful transition animation.
Story Transitions
I wrote a custom TransitioningDelegate that takes the thumbnails of the vertical video story card and transitions in smoothly into the vertical video experience.
When a user is ready to return to the news feed we play the transition in reverse with some easing adjustments to complete the experience.
Similar to other vertical video experiences, users can move forward to the next story in the vertical video experience without returning to the news feed. We noticed when this was the case, if a user entered from one story, they became confused if the exit transition returned them to the same story. We then adjusted our exit transition to take you back to the news feed but via the last story, the user was watching.
onboarding
Onboarding tutorial
A significant number of ESPN’s users were not familiar with vertical video stories due to a limited overlap in demographics. To combat this we developed an onboarding experience for first-time users.
We leverage Lottie animation (vector-based animation) with tooltips to help guide our first-time users. We found that a simple tap to see the next tooltip flow wasn’t exciting or very effective. We took a cue from a number of video game tutorials and required a user to complete the gestures we were trying to teach them in order to advance.
Results
The prototype was critical to get buy-in from executives and key decision-makers. Production work began in early 2020 and the feature was launched on iOS in summer 2020. The engagement has been exceeding expectations and since the content is larger recycled from other social platforms it is a low-cost feature to maintain. Walt Disney Direct-to-Consumer & International leadership praised the new stories feature as a success.