Cyw Website
The official website for the S4C children’s channel brand Cyw.
We were commissioned by S4C to create a fun and child-friendly website for their early years channel brand Cyw, where kids can play games, listen to songs and watch their favourite shows.
Our aim was to design an online platform that kids would be able to navigate with very little parental guidance.
To achieve this, we created the Home screen as a bold navigation area with minimal text for younger web surfers, and with any additional navigation using as much iconography as possible to convey the various calls to action.
As the main hub of the Cyw website the home screen needed to be able to guide the visitor to all 5 sections of the site: Watch, Games, Songs, Birthdays and the Awr Fawr subsite. This was a great opportunity to introduce the Cyw brand characters, and we utilised them to promote the different sections of the site, each with appealing custom animation.
As all content needed to be in both Welsh and English, we built a bilingual framework for the front-end of the website.
Design
The Home page of any website is an important area to get right, as this is where users may navigate away from the site without any other interaction. With this in mind, we wanted the Cyw Home page to be the jewel of the site, full of colour and animation to quickly engage the young target audience. We created a grid of five windows that led to pages of the site, each with one of the Cyw animal characters, animatedly beckoning the user to engage. Effectively, this made the Home page one giant launch area that could transport the young user through to the different site content.
As the Cyw website is intended for a young audience, we decided the UI and navigation should be as intuitive and language-free as possible.
We designed an icon only colour coded nav bar that corresponded to each section of the site (Blue for Songs, Pink for Games, Green for Birthdays, Purple for Videos, and Orange for the older audience of Cyw Awr Fawr). Tying into the brand’s vivid colour palette, these colours were used on all windows as well as the nav bar to make the interactive elements stand out against the background creating an appealing, colourful space for a young user.
As well as a refined primary colour palette, for the purposes of this site a complimentary secondary colour set was developed to give clear distinction between characters, UI and backdrop.
Birthdays are very important to the young viewers and their parents, so it was vital to the client that a viewer’s special day could be submitted for TV broadcast and have a home on the site. We created a dynamic banner that housed their submitted photo in an Adobe Edge animated scene with a candle highlighting their age. Penblwydd Hapus!
Development
Making this home page fun and full of character involved creating chunky animated click spaces to navigate the user into the different areas of the site. We wanted to create something beyond a standard grid layout that was responsive for all screen sizes, and our solution was to build two versions – one landscape and one portrait, with media queries to switch them on or off depending on orientation.
The home page animation had to be quick to load and crisp on all resolutions, and as we hadn’t employed Adobe Edge before, this gave us a perfect reason to try it out as an animation tool – keeping the animation away from big GIFs or sequences was essential.
Another key feature was a fun Youtube-style media section for parents to share videos of their child singing or dancing along to their favourite shows, which S4C could then approve to display in the site and broadcast on the Cyw channel.
Building a site that other dev teams could contribute to required a way for games to be plugged in via the CMS (Content Management System). We used an iframe as a flexible, consistent housing for other developer’s apps. Many of the existing games on the Cyw website were built using Adobe Flash, which isn’t mobile compatible, so to ensure the site had plenty of content we had a Flash flag that could be set via the CMS. This meant Flash games only displayed on desktop devices, but granted our client more content on launch.
S4C have an existing custom CMS running their website. We worked with the CMS development team to build an API that we could tap our kids themed front-end into. While this was in development we built a dummy data block using static JSON files to simulate data coming from the CMS. This allowed for an efficient site launch and as we built the data in the same format as the CMS, so we simply swapped the dummy data link to the CMS link when it was ready.