Verizon 360 Portal
Time
6 months
08.2021 - 02.2021
Tools
Team
Me (UX Lead/ UI Designer)
2 Project Managers/ 1 Product Manager/ 2 Developers / 1 UI Designer
Achievements
Winner of the Gold Clio Award (Sports).
Shortlisted 9 times for additional Clio Awards.
Earned the #3 spot on the Apple app store.
2023 Webby Award for Best Audience Integration.
It is a series of mobile web experiences that allow users to view live events through 360 videos immersively.
Clients
How might we design an engaging live 360 experience?
Existing solution problems:
Before I joined the team, the experience was like this. The product was at the risk of being cut by Verizon since the average dwell time and share rate were too low.
Average dwell time:
Share rate:
1min 24s
0.4%
How did I design the changes?
This case study shows how I approached the problem and explored 2 directions to improve the engagement of the experience.
The overall dwell time increased by more than 1200% at the end.
Understand
Project Challenges
My Contribution
I was the UX lead for the product discovery in 2 phases, and the discovery outcome was adapted by 6 individual projects, where I worked with another UI designer to deliver all the project-specific design works.
Use case 1:
Multiple cameras for sports events
“More than 120 cameras, including 20 fixed cameras, help to broadcast F1 games.”
Risky project:
Need usability testing and data-driven design to save this project.
Series projects:
Need an expandable and scalable template.
Use case 2:
Multiple users for live event real-time discussions
“The Oscar event saw 1.4 million mentions online throughout the broadcast.”
Complex team:
I collaborated with Verizon, Pepsi, and Ready Player Me to maintain the design system.
Use cases
Multi-camera
The discovery started by exploring the multi-camera direction with 2 projects.
The first project: F1 Miami Rock Beach Club in 2021.
The second project: X Games Aspen in 2021.
Design Solution
There are technical constraints when broadcasting multiple live videos at the same time.
I first proposed the idea of camera dashboard, users will feel like inside the director station and have control of all the streaming videos. However, developers pushed back on this idea because of the limitation of video decoding.
Instead of a dashboard, a map was implemented in the F1 Miami game experience.
To solve this problem, I realized that the camera locations are important, especially in the F1 game. So I collaborated with Verizon to confirm the feasibility of including a map and showing the car locations in real time. Users can now easily track the movement of racing cars and switch cameras coordinately.
Usability testing
Switching between live 360 videos is laggy.
To verify if the new feature is user-friendly, I conducted usability testing after releasing this project. Different from the internal testing, participants had a hard time switching cameras.
Design solution
Why don’t we connect all cameras by portals?
As for the final design solution, nearby cameras are overlapping on the video content to allow users to transport from one view to another. Users can also tap to select and get transported to another video immersively and smoothly.
Technical solution
Preload videos for better transition
Access server and decoding is laggy when it comes to live 360 videos, engineers suggested that we can preload some videos, so users can smoothly transit among them.
For example, when users are watching one video, the nearby cameras can be preloaded and switching between those will be smooth for users.
Multi-user
The multi-user direction was implemented and tested with 4 more projects.
Design Solution
Initial sketches
I did some sketches to check in with Verizon that the design intention is aligned with the client’s requirements.
A voice chatroom allows users to invite up to 3 friends and watch live videos together.
To avoid abuse, the chatroom is invited only to exclude random strangers, and users cannot input text messages in the chatroom.
Multi-user can motivate users to follow each other and switch cameras more frequently.
Friends can view different video content while chatting with each other. When one of them taps the like button, friends watching different camera views will receive a toast that allows them to switch to the liked camera and the same point of view.
Participants were more engaged in watching videos with friends.
I conducted another round of usability testing after releasing the multi-user feature. And I was so glad to see that users enjoy this feature a lot.
Future exploration: 3D avatars
I also explored how 3D avatars can bring users more sense of presence when watching videos with friends. To allow users to easily create avatars that look like themselves, I worked with the Ready Player Me team to utilize their API and reskinned the UI to fit the Verizon design system.
However, it took a long time for the team to develop and test this feature so it was not included in the scope.
Usability Testing
Style guide & Build assets
The design system was created to be aligned with Verizon brand guidelines. I worked with the UI designer and collaborated with the Verizon design team to ensure consistency.
There are also different portal styles that are made for different events. The color pallette and details were customized for specific events.
Design System
Customized Portals
Outcome
Success Metrics
As for the result, the average dwell time of portal experiences increased by 1200% from the original solution to the Super Bowl execution. Users stayed in the AR portal 90% of the length of the halftime show on average.
Achievements
Winner of the Gold Clio Award (Sports).
Shortlisted 9 times for additional Clio Awards.
The app version earned the #3 spot on the Apple app store.
Winner of the 2023 Webby Award for Best Audience Integration.
Nominated the 2023 Webby Award for Media & Entertainment and Integrated Mobile Experience.
Finalist in Best Entertainment Campaign at the 2023 IDEA Awards.