Watch for iOS—discovery and navigation.

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

Project
Brief

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.

Planning and
Research

Personas

Early on, I identified two personas. This was critical in guiding my work throughout the process.

Persona One

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.

Persona Two

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.

Navigation and Information Architecture

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.

Ideation, Ideation,
and more Ideation

Wireframes

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.

High Fidelity, Round One

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.

Prototyping, Round One

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.

Testing our Research
and Assumptions

User Testing

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.

Post-Testing Improvements and Dev-Ready Designs

Prototyping, Round Two

Following user-testing, we had a clear path forward. I created a detailed prototype to gather feedback from the project team around technical feasibility.

Dev-Ready Designs

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.

Did Our Hard
Work Pay Off?

Results

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.

Premium Minutes Watched

🎉 11.97% Increase

Non-Replay Minutes Watched

🎉 12.66% Increase

Live Minutes Watched

🎉 16.53% Increase

Replay Minutes Watched

🎉 7.06% Increase

Learnings

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.