CPI WEBSITE

In early 2016, while working on the Club Penguin Island mobile app, I also worked on a project to updated the Club Penguin website. Even though it was not an official project until later in 2016, the project included many major updates and improvements for marketers and community managers within Club Penguin. As well a custom CMS template to output a fully responsive, self-serve website.

The biggest challenge for the website was getting it on the roadmap as an official project. At the time, the web team was reduced to one designer and one developer. A large portion of vision and scoping work took place before a project manager joined the team. In order to get the project started, I worked for 6 months developing a high-level vision for a custom content management interface built on Drupal, and later WordPress.

Another challenge was to design a system for two distinct audiences, “makers”, our internal marketers, and “enjoyers”, the kids viewing the external website.

I began by researching trends for both personas I was designing for,”makers” and “enjoyers”.

Starting with “enjoyers”, I built a competitive analysis of other websites kids frequent online. Based off of previous interviews with kids that play Club Penguin, I knew of these websites included: Cartoon Network, Facebook, MTV, and Nickelodeon. From these websites, I learned that grids and widget-like components were trending.

For “makers”, I analysis other admin areas within CMS systems, like advanced WordPress templates, Drupal systems, and layout building tools like Confluence.

In order to validate the idea of using a grid and widget system, I created 30 widget designs based off of ideas generated by our Customer Support team. I also created three example homepage designs we could show to kids.

Our User Research team facilitated a user testing session in LA with 32 kids evenly split between boy and girl, ages 7-12. We gave each participant a print out of all 30 widget. We then allow them to pick their top 10 cards they’d like to see on a website. With their top 10 we asked them to arrange them in the order and layout they’d like to see on the website.

After testing we analyzed the top 10 widgets selected by each participant and found that none of these features were currently represented on the website. In this test, we were able to validated the type of content and the preferred layout.

Using this data, I was able to create a high-level sitemap and low-fidelity prototype.

The design work was two-fold. First I had to design how the external website would look to the “enjoyers”. Then I had to take that style and design an admin layer within our CMS that could be modified and updated by our “makers”.

The design for the “enjoyers” was simple. I used bright, on-brand colors, created new iconography, kept the amount of copy limited to headlines, and emphasized the use of imagery.

The work to support creating this content via the CMS was a much more complicated endeavor…

In order for “makers” to created and maintain new pages within the website, I had to work closely with the developer to restructure our entire CMS admin layer.

This began with identifying the hierarchy of the website. For example, everything would be accessible from the homepage via widgets and the homepage would allow infinity scrolling to load new content. Content like videos and blog posts would all be accessibly via a blog landing page. Based off of testing we found kids have a hard time navigating secondary navigation, so for the global navigation we kept it one level. This made finding locations that all content could be accessible a bigger challenge.

In addition to hierarchy of content, I had to plan how “makers” would update widgets and create new widgets on the fly. First, I grouped like widgets into a bucket—slider, promo, content widgets. From this design a single form that could create all three widgets, with different levels of customizable features.

After designing the forms, I moved on to designing a workflow to create new pages. This took the form of wizard to create pages:

Add New Page › Add Row › Select Row Layout › Add Widget › Create Widget

I worked closely with the developer to ensure the rows within the pages could be movable and that widgets could also be moved, via drag and drop to other rows. Allow for a completely custom page builder system within our CMS. We also created an intricate tagging system to allow for future sections, such as a Game Guide with ability to add character profiles, deep-dives into game sections, and how-to articles.

At the end of the project, I created a quick presentation to walk leadership through the basics of the system, which I named, Snowflake.