Hopster is an app for 2-6 year olds whereby they can watch videos, play games and listen to music. The mobile redesign needed to:

  • Accommodate more types of content
  • Be more usable on small devices
  • Improve visual hierarchy to be able to feature content
  • Implement new branding

Notes on the existing UI.
Click to expand

Simplifying the main interface

The first challenge: introduce an additional level of navigation. This way shows would no longer dominate, with every show available straight from the home screen, but content still had to be easy for children to find.

I outlined two key properties for the new design:
1. Simple, large element - the screen would always one main tappable element
2. A horizontal carousel, rather than vertical scrolling - more intuitive for children

The new structure

User Feedback

The first testing round provided useful insight into designing for a wide age range (2-6).

Older kids (5-6) preferred the old app, with everything laid out for them to see. Younger ones (2-3) preferred the new, with its big, easy tap areas. Parents also preferred the new, as they felt their kids interacted in a more considered, less random way.

Making Scrolling Intuitive

A challenge we discovered early was how to get users to scroll. Research had suggested horizontal scrolling would be more intuitive than vertical, but it was not completely solved.

We made improvements over several iterations and rounds of testing:

  • Positioning elements partly off screen (this had a small effect)
  • A voiceover prompt playing after a period of inactivity
  • An intro animation of the character flying along the carousel

The result: kids exploring and engaging with the world from the moment they open the app.

Finished Product