In the fall of 2019, our iOS team set out to redesign the Watch feature in the FloSports iOS app. Below is a detailed outline of how I approached this challenge.
Role: Planning and Strategy, UI/UX Design, User Interviews and Testing
Date: Q4, 2019
The problem highlighted by our users revolved around content discovery. Feedback often called out “navigation” and “UX.” With live video and VoD content being our primary offering, our iOS team set out to overhaul the watch experience.
Our goal was to increase premium minutes watched by presenting users with an experience that exposes our vast content library and utilizes a simple and scalable navigation schema to boost discoverability.
Early on, I identified two personas. This was critical in guiding my work throughout the process.
Most user's open our app with a goal in mind. This first persona focused on that. I needed to create a pattern that allowed users to get where they wanted to go fast. This user has a purpose.
Not everyone knows what they want. The second persona solved for new users who may be unfamiliar with our content library, or they want to be entertained. This user is here to discover.
The watch feature comprised of two main screens, home and see all. The diagram below informed a simple user-flow, information architecture, and reusable patterns.
On the parent screen, each category has two access points. Video-category quick filters for the user that knows exactly what they want, and see all for users that are exploring. Content can be displayed in horizontal row collections — housing VoDs, nested collections, and live streams.
Once an access point is chosen, content is returned in a vertical list on the child screen—two purposes behind this. List’s are best explored in a vertical layout, and the design lends itself to silent auto-play video — an engagement play for our exploratory users.
Once I knew what the design needed to accomplish and who it was for, I began wireframes. Below is a sub-set of the iterations I went through before moving into high-fidelity.
Feeling good about the IA and navigation patterns, I moved into high-fidelity design. I created a card-based system to support content and a visually appealing UI for category filters. The next step was to create a prototype and begin testing the designs with real users.
I created two sets of prototypes. The first, in Origami Studio; this prototype was detailed. It outlined some potential interaction patterns and was an effective way in socializing the designs with the project team and internal stakeholders. I created a second version of the round one prototype in Marvel. This allowed us to begin remote user-testing.
Below you'll see our pre-user-testing prototype and our post-user-testing prototype.
Arguably the most fun part of the process, and essential, was user testing. I worked closely with the iOS product manager to develop our testing criteria and script. We sourced users from a variety of backgrounds, built prototypes for each sub-section of users, and began testing.
This crucial step evolved the watch experience beyond informed assumptions. We were able to iterate on what we created and bring a proven concept to our development team.
Following user-testing, we had a clear path forward. I created a detailed prototype to gather feedback from the project team around technical feasibility.
The final step in the process was to create dev-ready designs. We had pulled data to inform our decisions, understood the problem and how we would solve it, validated our work with REAL users, and made changes based on what we heard.
I collaborated closely with our development team to build and launch the watch experience as an A/B test. We were ready to see if all of our hard work would pay off.
There's nothing better than seeing our hard work pay off in the form of an A/B test. Our team made a significant impact on all of our KPI's — seeing double-digit increases in almost every category.
Making an improvement like this takes an entire team. Quality assurance, API, and iOS devs, along with a top-notch product manager, made the watch experience a winner—all while delighting our users.
🎉 11.97% Increase
🎉 12.66% Increase
🎉 16.53% Increase
🎉 7.06% Increase
FloSports has a small design team, with each designer working across multiple pods. Sometimes user-testing can be an afterthought due to our team size. In 2019, one of our primary team goals was to develop a user-user-testing process that worked for us. Seeing the fruits of our labor in action was particularly rewarding. It validated the type of team we wanted to be. One that is in touch with the community we design for and finds ways to involve them every step of the way.
The success of this project and workflow has informed how we approach problems and test our assumptions across other teams and products.