BACKGROUND
DIRECTV Now (now called DIRECTV STREAM) is the app that brings live TV to a streaming platform. A feature of this app called Download and Go lets users download content titles to their device for offline viewing.
CHALLENGE
Improve user experience with downloading content on the app and inform users of the status of their content downloads using motion.
SUCCESS METRICS
- Continuous engagement with the download feature
- Satisfaction with the app/service
CONCLUSION
In our research, we found the average customer behavior was to register this download completion within a few seconds and want to know the next steps immediately. Either viewing their downloaded title or seeing an error and taking action. This made the final motion successful by communicating that information while not being distracting from the app experience. I was also able to adapt the motion patterns from the TV viewing experience to a mobile app maintaining the design system consistency.
MY CONTRIBUTIONS
I collaborated with a UX designer to take their wireframes and create animated motion studies informing the user about their download completion status. Once we landed on our final motion, I worked with a developer to hand off lottie assets and motion specs to bring it to life in the app. As shown above, the way this feature works from the common info page is to hit the download CTA which starts your download. I designed animations that inform the users of completed download queues, partially completed and other error states. This motion was an intuitive way to see the download progress while providing a delightful experience in tracking it.
MOTION STUDIES
For the download queue complete animations I tried three variations initially: checkmark pulse with arrow pulse, gradient overlay, and big checkmark in the center.
After sharing out with the UX team, I landed on a simpler approach that wasn't as distracting, got the information across and was consistent with celebration states in other DirecTV experiences.
