Portfolio
Match View X
MVX is a mobile deconstructed video module. It delivers a clean yet data-rich UI with stats, instant clips and a live stream or VOD replay of the match. It also shows live tracking of the athletes and experimental AR overlays. My long-time colleague, Erik Schwartz, explains further in this LinkedIn post.
My role in this project was a hybrid of manager and designer, leading MVX from conceptual UX to production quality. Here you see the design for MVX as launched in the Chelsea mobile app.
Here is a short screen recording of the MVX experience. It shows how the app responds to a new event and a provides a sample of some UI in production.
We began the process by making mobile versions of UI modules we already developed for web, adding to our running design system for data overlays. In parallel, I started on my own conceptual design work on a mobile-friendly experience. The goal was to get overall approval quickly so we could ship on time.
We went through a few quick cycles on some more colorfully branded visual design styles before settling on one centered on the video content first and foremost. For this, we used an ambient glow and background blur reactive to the video and floating UI components.
The most ambitious thing included in the launch was the client-side AR overlay. We needed to design a way for a user to interact with the elements being projected on to the field, while avoiding moving tap targets and providing clear affordances for controls. We offered a choice: either tap on the field or use the right scrollbar to navigate the points of interest.