The Newsfeed, or blog, at clubpenguin.com is the central hub for the Club Penguin community.
The previous blog design had not been updated since 2012, so as part of a strategy to increase engagement, we did a redesign. The overall look of the blog was setup as a one column design without many features or ways to easily navigate through content.
Increasing engagement on a website can be hard. But we knew we needed to start with improving the amount of blog posts per page. Prior to launching the Newsfeed, the blog was one column with paginated blog posts. This was hard for younger users to navigate. And we didn’t have a way to categorize our blog posts, even though tagging was available in the Drupal backend, there wasn’t a visual front-end to support this feature.
In addition, we knew we needed a way for users to log in to comment. This feature would not only allow for improved comments, but would also reduce the amount of bots or spammers on the blog. This would dramatically reducing the amount of fake comments for the Social Media Manager to approve or deny.
Since Club Penguin is an under 13 website, it must comply to strict guidelines set by COPPA and Disney Safety, therefore ALL comments must be moderated.
We knew from our conversations with the community that personalization and features that promote their character were the most important. By letting the kids log in to comment, we could easy pull their avatar and penguin age from the database. Although this was a small change, it made kids much more active on the website and increased commenting by 50%.
We also wanted to create a way for kids to be able to easily navigate blog posts. To solve this, we created a visual category system. Since our bloggers are like celebrities to our users, we decided to highlight the bloggers as categories.
Even though the original blog was very straightforward, I thought we could keep the experience simple but still add some fun features like categories and personalization.
I wanted to show more than one blog post on a mobile device and create a design that could support a future responsive framework. By creating a grid list of blog posts we were able to achieve an easy to use layout.
I also wanted the newsfeed to resemble a normal blog, with a sidebar, categories and iconography for easy category recognition. After creating my initial low-fidelity wireframes, I created a high-fidelity prototype to show category functionality.
The Newsfeed needed to be a fun, engaging experience on the website. This provided an opportunity to push the limit and give the audience something colorful and fun.
Around 2014 I started creating patterns and introduced those on the website, this was a big success with the community. For this design, I wanted to include both patterns and introduce gradients.
As a brand, we try to lean toward a “male-skewed” audience, in doing so, we also adhere to “male-skewed” colors. I wanted to challenge that, so I introduced purple tones as well as orange and teal. By using more color, I was able to distinguish categories and posts in the category color. This also could help younger users quickly navigate to the categories they are most excited about.
Another feature introduced was iconography. I created 30 icons to support the future growth of the Newsfeed. Some of the initial icons were latest, blog, video, and news. These icons also help make categories easier to identify.
