In 2014 we presented a concept to the World Surf League team that focused on giving fans the best video viewing experience for smartphones and tablets. Through customizable push notifications fans would be alerted when events would start, jump right into the live broadcast and continue to watch as they browsed the app to check results and browse content. By following their favorite athletes and bookmarking content for later, fans could tailor their own WSL content experience right within the app.
With Android the priority, we dove right into Google's new material design guidelines. Key screens were sketched using recommended Android components and "Paper" layers were established using shadows to establish a visual level of importance between view components. A great example of this is the video player experience. When watching a video or live event broadcast, the player itself is at the top with a shadow establishing depth as content moved below it. Even in its minimized state, the video player is always front and center with fans being able to tap right back into the full viewing experience.
Through paper prototypes and sketches we were able to communicate our vision to the World Surf League team. Visual designs were completed using Sketch App (our design tool of choice here at Sly Trunk). Once ready, screens were presented via Invision to the WSL for their review. Although lacking in true native interactions, one should not underestimate the value of being able to present a tappable prototype to clients and stakeholders alike. Once we iterated on that feedback, a UI kit and style guide was created and we dove head first into development.
With the Android app establishing a foundation and being actively developed, it was time to flesh out how the iOS app would function. Views like lists and content which shared very similar design principles to Android were tackled first with subtle UI differences (for iOS we use a Segment Control on Rankings and Events). For the primary navigation in the app, we ditched the drawer (or hamburger menu) in favor of the much more accessible UI Tab Bar controller. By using the Tab Bar fans could switch instantly between Rankings, Events, Home, Fantasy Surfing and My WSL. The more complex views like Fantasy were then designed as their own iOS experiences.
The design / development workflow we established for this project was extremely fluid due to a combination of tools including, Sketch, Invision and Layervault. As stable builds began to take shape a QA cycle was established week to week. As the app progressed we conducted and recorded internal user tests with World Surf League employees. This user research was invaluable as it brought up concerns around language used in the navigation and how fans discovered the customization features within the app.
Inching closer to launch we took advantage of Crashlytics and Testflight to begin testing on a wider group of fans. This beta testing phase was invaluable as it surfaced a few (unfortunately not all) critical bugs prior to launch. The app launched just in time for the first day of surfing of the 2015 Rip Curl Pro Bells Beach. The timing was perfect and the fan response has been overwhelmingly positive.