Fiona Mayfield — Freelance UI/UX/Product Designer based in London, UK

Discovery K!ds Play (Latam)

Responsive web

www.discoverykidsplay.com/

Discovery Kids is a popular Discovery TV channel for kids (2-8 years) all over Central and South America. The digital offering comprised of short form and long form children’s videos (locked and open), games and galleries, a TV guide and parents section for profile management. The content was geo located and available in two languages.

I was part of a new product, design and development department based in London with focus on delivering optimal front end solutions for a new back end ‘Video Management System’ that was being developed in house in Sweden. This was to replace a previous Wordpress based system, providing the streaming video and DRM capabilities needed to compete in the current VOD and OTT landscape.

I worked in an agile scrum team in London and with a stakeholder team based in Miami. My responsibility was to re-design the website with another two designers who focused on the iOS and Android apps.

RoleProduct designer ForDiscovery Networks International
Date2017

The brief

Phase 1 of the website and apps was to be an MVP using the new in house VMS backend. The offering would be dependent on the constraints and capabilities of the developing VMS with scalability to integrate new features.

Key requirements:

  • Feature and content parity with existing product but better user experience for target audience of 2-6 years.

  • Improvement of architecture such as removal of overlays to enable deep-linking and optimisation of the sign in and account creation flow. Promotion of new content and onward journeys in player.

  • Updated Look & Feel – A refresh of the current website staying faithful to the Dkids branding and aligned with Onair creative and a playful feel.

  • Addition of new features to encourage more engagement and sign in which was a key business objective.

The process

Kicking of the project involved requirements gathering with stakeholders, getting familiar with the capabilities of Sonic (our VMS), carrying out competitive analysis and best practice for children’s products.

We had daily catchups with the content producer, exploring how we could leverage the content of the current site on the new platform.

I started with sketches to work through initial ideas, then wireframes of each section for stakeholder sign off before starting visual design.

Initial sketches

Site architecture

We retained the same core structure of a home page with individual character pages, a games and a video hub and a profile area on sign in. I kept the carousel approach for housing the collections of games and videos which works well with variable collections of content in a responsive context.

The stakeholders had analytics showing that the children did not tend to scroll vertically so I re-designed the page so that the content was in tabs. Initially I designed a top promotional section for some hierachy but it added complexity to the build and apparently kids like to get stuck into exploring lots of content immediately. I also changed the header top the top of the page so that it didn’t interfere so much with the content, particularly at smaller sizes and made a clear differentiation between the parents information and the content for kids.

An addition on the video page was the opportunity to view related videos and a countdown to play next video to encourage further viewing.

Homepage and Video hub wireframes

Wireframes from Login and profile creation journey

Look and feel

We had a short concept creation phase where we presented different look and feels to stakeholders and refined on several rounds of feedback. The stakeholders were keen to use less pattern and the rich graphics weren’t suitable for UI so we went for for a look and feel that was bright but unfussy with the intention of using animation to add more of a feeling of play. We kept elements large for small hands to interact with and copy to a minimum considering the target age group.

Early homepage design

Final homepage design

Video hub design (desktop)

Character template design (desktop)

Video player page design (desktop)

Confirmation modal in profile favourites area

TV Listings desktop design

Delivery

Designs were created for key breakpoints in Sketch and uploaded to Invision for sign off, then added to Zeplin for developers. Functionality for features and instances were documented in Jira tickets. I worked closely with developers, feeding back and advising during in house sprints. We added css animations in the browser for more more playful feel, as far as constraints allowed.

Some of the images for the character menu and pages were needed to be uploaded as custom assets to the VMS so I created Photoshop templates for the content team in Miami to edit.

Homepage responsive designs

Video player responsive designs

Header section & parents menu responsive designs

‘Up next’ Android instances

Demonstration of Up next flow with advertisting

Thumbnail label placement scenarios

Link hover and active states

States for character menu

Promo for the website produced in Miami