In September 2017 I returned to Sky to the role of UX/UI designer to help get their recently created Sky Kids Tablet app onto mobile. Due to budget and time constrains the app was to be hybrid on iOS and Android. It needed launch across three territories; UK, Germany and Italy. The graphic language and style had already been established on tablet, so the main challenge was to adapting these patterns and navigation to work on the smaller screen size of mobile.
One of the first tasks was to look through the current tablet app structure and the business requirements for the mobile app. Features in scope were: Kids Profiles, Grown-ups section, Channel pages, Show pages, Video Player and Search. Out of scope was: Persistent Video Player, Buddy World, Up Next and Just watched. Downloads would be added fairly soon after the first release and Games would also be added at a later stage so these needed to be considered. A top level outline of the tablet navigation and structure from Home to Show page can be show below.
In our first rounds of design we focused on creating a navigation system that stuck that had the same behaviours and principles as the tablet app. Our challenge was to see if we could make this work across the 2 screens sizes and platforms. We used the Buddy as the navigation launcher as the tablet and came up with 2 options that we made into prototypes to test.
Option 1 - Burger Menu Navigation
Key Features
Buddy icon to open and close the menu.
Design similar to the tablet app.
One click to channels.
Scalable due to scrolling screen.
Key Learnings
Kids were missing Buddy as a navigation launcher so were not able to find content they wanted.
Content pages too short. Kids keen to scroll and were looking for more from the home page
Option 2 - Exploding Buddy
Key Features
Buddy icon to open and close the menu.
Easy to reach - bottom of the screen.
Scales to 5 nav items.
Playful.
Key Learnings
Kids were missing the buddy as a navigation launcher.
2 steps to get to the channel content.
Confusion on how to close the channel picker. Tapping the buddy not the close icon.
Buddy obstructing content.
User testing done in Leeds and london with kids aged 3-10 years
User testing Conclusion - make it easy!
Kids do not expect to have to search for a menu. If it’s not immediately obvious they assume it doesn’t exist. We needed to break away from trying to match the tablet app structure. Different screen sizes need different solutions. Kids naturally place their fingers and thumbs at the bottom of the screen. Make navigation accessible from every page and make it expandable - tab navigation.
Basic Bottom Navigation structure notes and Product structure (Below)
Once the navigation model was approved one of my main roles on the project was UX, accessibility and managing the build of a prototype in React Native that was could be used for user testing and to help inform the development team (based in the Sky Leeds office) of animation and navigation behaviours. I also looked the product across the different territories and the translations and different feature requirements for Italy and Germany. The tools I used in this process was Slack, Sketch, Invision, Principle and Overflow. The React Native team were based in the Ukraine so communication was key. An example of the type of flow work I did in Overflow can be seen here: https://overflow.io/s/V6W3AT/
Product in Motion
Artwork for the App and Playstore
Make a great experience for all
Whilst working at Sky for this contract I became involved in another project for Sky Q set top box around accessibility. I was involved in a series of User Testing with RNIB. This experience led me to push to do as much as we could as designers and developers to support all families using the app. The app supports dynamic type and layout, Voice over and Smart Invert (iOS only).
Dynamic fonts and Layouts supported in both Android and Ios
Voice over documentation for developers
