Sky Kids App
Improving User Experience
I worked with a Senior UI and members of the Development Team to maintain and improve the user experience of the Sky Kids App cross platform. I worked on expanding the app for new content and improving the content download journey. The new app features were to be designed and adapted between IOS and Android, and the requirements were to expand upon the already created app infrastructure and graphic language.
Designs were created through sketching, wire-framing in Sketch App, showcasing in inVision. Prototypes were created in Principle and After Effects to deliver animation and interaction requirements to the Development Team.
All user and technical statistics gathered through analytics, user testing and knowledge of the build.
Background
I came to this project after the second release, so the product was live, but needed work to incorporate new games content and expand the menu for a richer catalogue.
Certain content needs to download before a user can play it from their device, and user testing indicated that kids needed more visual feedback to indicate content is downloading and when it is available.
The app is relatively new and was completed with time and budget constraints, so there was room to expand and improve the experience without alienating a legacy use base.
Target Audience
The current customer base is kids between the ages of 3-8. Buddies and large clickable content is designed with a younger audience in mind, and certain features such as large swipe-able hero sections on tablet and large clickable areas with minimal copy and heavy use of recognisable brands and characters to aid in ease of use for younger audiences.
Improving Visual Indications of Download Journey
Each piece of content on the kids apps needs to be downloaded before it can be viewed/interacted with. Users discover content through the home screen, search or channel picker sections and then select to download. Content is downloaded to the user’s downloads section and viewed/played from there.
User testing shows that the TV is seen as the place ‘for watching’ and devices is where content discovery is made
Analytics shows that 30% of downloaded content isn’t used, and in testing kids said that they forgot about downloads they had previously selected to download, discovering it later ‘by accident’.
We mapped out the current user journey and looked at where we could signpost the journey and stages more clearly.
I designed a simple animation in the menu that fades down over the download icon whilst content is actively downloading, and pulses once to indicate the download is complete.
I animated a prototype for the Development Team to indicate treatment and styling, and to show when the animation was to start. As this is a new style being added to the app I was cautious about making it too bold. I produced the assets needed in Sketch.
User testing showed kids understood the message relating to the animation. The animation effect was subtle enough not to distract but clear enough with the colour being present and then disappearing after the content has downloaded. We saw an uplift in viewed downloaded content.
Proposed Colour Logic Reassignment
With the introduction of games the menu extended to 5 items, which is the maximum for the nav bar.
The current colour logic was blue for all sections and then the top bar changed colour depending on the channel brand. The colour was chosen by each brand and doesn’t necessarily connect with the brand itself. In this was the current colour logic doesn’t impart any information to the user apart from that they are in a branded content area, which the logo at the top of the page already conveys.
Colours that extend outside of the Kids colour palette are assigned to different brands
I designed a new colour reassignment to identify different pages and forms of content. In this way the colour adds clarity and conveys information to the user, aiding younger audiences in content discovery. It is useful if a young child doesn’t understand or use certain areas of the app yet, they can avoid going to those colours. It also emphasises the navigation journey by clearly indicating leaving and entering different areas of the app on click, especially as all areas have the same white background with content contained in boxes, there isn’t a lot of variation to the areas on the app.
The menu is limited to 5 menu items which works well with Sky Kids' 5 brand colours taken from the spectrum.
Proposed colour reassignment on mobile
Colour Assigned Header Artwork
I designed UI title artwork for the separate areas to further identify the user with their location on the app and emphasis the colour logic and different available content/functionality available. These would feature on the top of the different sections and would be static. In this way it also provides an area for users to press and drag the page to scroll from side to side as on the tablet.
Artwork supporting section segregated colour assignment
Implemented colour assigned header art for UI signposting
