Rebekah Ford

Design, build, draw, play…

I worked with the Tate Digital team to design & build a new version of the Tate Kids website. I built the templates, designed the overall site, created icons and a full scale pattern library in SASS plus repeatable backgrounds, based on initial visual identities by Marcus Walters.

Tate Kids New website: UX design and code

Research

The old kids’ WordPress site had grown organically and as such, it had become very hard to find all of the great content as the navigation could no longer cope with the types of content created. I worked with Tate Kids producer Kat Box to reassess and categorise the content into 3 distinctive parent sections: Explore, Make and Games.

Much research and user testing was done with kids and adults before we came to the categorising of the content. Before I committed to any design, a graphic designer, Marcus Walters, was commissioned to create a general look and feel set of banners for print and for digital which I took as the starting point for the whole design.

In the meantime I was learning the general Tate UI library and build of the adult site and working out what, technically, to piggy back and how individual the pattern library would be from the adult site. My aim was to create a lean piece of code as well as a very distinctly childlike site.

Icons I designed for the site (bar the robot- Marcus Walters)
Icons I designed for the site (bar the robot- Marcus Walters)

Design

The design went through several iterations before we hit the right amount of fun. I imagined what it would be like to be a child that was let loose and could hack the adult site with a bunch of crayons and kids-eye-view of visual language. What needed to be noisy and what needed to be calm? A level of concentration is needed to complete the makes, study the explore pages or play some of the games but the surrounding needed to be fun and engaging and evoke the feeling of play at all times.

Marcus Walters illustration had created these great designs for use in print as well as a jump point for the site. I took elements from each and created backgrounds that could be mixed and matched on a page and would include accessibility-tested set patterns as well as buttons and icons.

I created ‘kidified’ versions of the existing adult modular features and designed new kids-related ones like icons and time indicator buttons. Edges were rounded and softened, promos were simplified of text,

One of the repeat backgrounds developed for the site
One of the repeat backgrounds developed for the site

Development

There were several different existing site templates to work with and there were technical limitations with some of them which we needed to overcome without disrupting the core. The site is a Drupal framework and customisation allowed us to create kids specific page conditions and allowed the editorial team to pick and choose backgrounds and create blocks of bright colours. Each set pattern set was user and accessibility tested and tweaked accordingly. All passed AA or AAA ratings.

A makers page, fully customisable
A makers page, fully customisable

Outcome

The work was completed before launch and handed over to the in-house team. This included a full sass library and set of online guidelines. Templates for the pattern library were generated in moustache.js for expediency. Tate Kids launched at the beginning of April 2017. This was one of the loveliest and most enjoyable projects that I’ve worked on and my nephews love it and that’s the best critique I could hope for.

Tate Kids Pattern Library
Tate Kids Pattern Library

Contact

Leave me a message.