Navigation and information architecture
The watch feature consisted of two main screens, "home" and "view all." The diagram below informs a simple user flow and content hierarchy.
FloSports
·
iOS
Q4, 2019
Through NPS and survey feedback, we noticed recurring negative sentiment around "navigation" and "UX." As a video-based content company, we set out to overhaul the iOS Watch experience. Our goal was to create an intuitive understanding that showcased our extensive content library and employed straightforward, scalable navigation to enhance discoverability.
We began by consolidating all existing research and customer data pertaining to the Watch experience. This data allowed us to understand our users' needs and develop guiding personas for the redesign.
We discovered most users had a pre-meditated goal in mind before opening our app. We needed to give them the tools to achieve that goal quickly. In contrast, an audience downloaded our app to learn more about FloSports. After all, FloSports was not a household name in the sports media space. For these users, we needed to allow them to discover our content offering in a simple, industry-specific way.
These insights were invaluable in guiding the project through the design process.
I was the sole designer for this initiative, collaborating with the iOS app product manager and engineers. Through wireframes and high-fidelity prototypes, I conducted meaningful user tests and iterated toward a shippable design candidate in which the entire team had confidence.
The watch feature consisted of two main screens, "home" and "view all." The diagram below informs a simple user flow and content hierarchy.
Once we knew what the design needed to accomplish and who it was for, I began wireframes. Below is a subset of the iterations I went through, along with early high-fidelity designs. I created a card-based system to support content and distinguished category filters. The next step was creating a prototype and testing the designs with real users.
I created two sets of prototypes. The first was in Origami Studio; this prototype was detailed. It outlined some potential interaction patterns and effectively socialized the designs with the project team and internal stakeholders. I created a second version of this prototype in Marvel. This allowed us to begin remote user testing. Below, you'll see our pre-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 various backgrounds, built prototypes for each sub-section of users, and began testing. This crucial step evolved the watch experience beyond informed assumptions.
I created dev-ready designs and collaborated closely with our development team to build and launch the watch experience as an A/B test.
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. We were ready to see if our hard work would pay off.
Our team significantly impacted our KPIs — seeing double-digit increases in almost every category. Quality assurance, product management, API, and iOS devs made the watch experience a winner. An improvement like this takes the entire team.
I'm always eager to connect with fellow designers, recruiters, and potential collaborators. Don't hesitate to reach out if you're interested in discussing a project, seeking advice, or just want to chat about design. Let's create something great together!
