A gamified fitness focused smartwatch companion app paired with Disney's Club Penguin. 

Djankies

Club Puffle

Overview

The central goal of Club Puffle was to adapt the core dynamic of Club Penguin's in-game companion while establishing an alternate means of player interaction through gamifying active living. 

Role

Ideation, User Research,
Visuals, Prototyping

Team Size

Project Timeline

Tools

Design Goals

Build upon Club Penguin's companion dynamic while introducing the user to a  fitness focused experience.
Explore ways in which we can revitalize and iterate on  familiar mechanics from the original  game. 
Develop an all-inclusive UI that guides the user to their goals while remaining mindful of Club Penguin's visual design.  
“Childhood is when we were healthiest. By remembering the things we did as a kid, we can reinstate healthy emotions, such as being loved and feeling a sense of security, and also picking up active habits we had as kids.”
- Krystine Batcho, Ph.D.

Research 

Sharing Experiences

The early stages of our process began with sharing the nostalgic love our group had for Club Penguin. We identified nostalgia as the main reason for the shared sentiment of the game. 
 
While researching the power of nostalgia and its effect on everyone, we discovered that:
  • Nostalgia can help people deal with stress and anxiety.
  • Nostalgia can encourage healthy, active behaviors.
  • Nostalgia Sells - As seen through various reboots of TV shows, games and movies.
 We were able to quickly recall mechanics  we were fond of because of this nostalgia. We listed and analyzed how they affect players in the game, focusing on ways we can use it as a foundation. We centered on a few mechanics that we felt offered unique experiences to the player.  
Ideation Map

We also decided to spend time revisiting the main game. This was as an opportunity to conduct a critical analysis of the mechanics, investigating how effectively they were implemented.   We began organizing the player interactions by active and passive game states to give us better insight to which mechanics were worth pursuing.

  

 

Club Penguin

Active

  • Fast Travel​

  • Snowball Fights

  • Discovering Landmarks

  • Managing Items

  • Bits & Bolts

  • Burnt Out Bulbs

Passive

  • Feeding Puffles

  • Decorating Home

  • Customizing Wardrobe

  • Changing Backgrounds

  • Collecting Coins

  • Balloon Pop (Mini Game)

Identifying the Users

Janet Sellars

Immersed in Her Work

About
Age: 28
Active Hours (weekly): 3-5
Geriatric and Retirement Nurse
Traits
Productive 
Caring 
Organized
Challenges
Janet works odd and often long hours, day and night
Struggles to maintain a consistent work out schedule
Frustrated that she can't  find time to go to the gym
Motivations
Needs
Enjoys making positive contributions
Finds satisfaction from completing small activities
Loves revisiting experiences from her childhood
A more flexible system for active living
Feedback for accomplishing  tasks
Persona of Janet

Tommy Nguyen

Enthusiastic Student

About
Challenges
Motivations
Age: 15
Active Hours (weekly): 1-2
Seeks friendly competition among friends 
Likes being rewarded for his accomplishments
Outspoken
Social
Competitive 
Needs
Incentives to participate in physical activites
An outlet to track his activity progress clearly
Persona of Tommy

The User's Journey

Now that we know who we're designing for, we needed a frame of reference to visualize how they would actually interact with the application. The flowcharts below were designed to get a feel for the information architecture. We broke down the main aspects to focus on how we can create a smooth user journey. 
Hardware Interaction
Fitness Navigation 
Passive Navigation 
First Pass Flowchart
Second Pass Flowchart

 Prototyping

Through user testing  we concluded that we needed to shift our attention solely to the passive mechanics we identified earlier.  These mechanics offer more significance when translated into an application designed for the size of a smartwatch. Many of the active interactions, and their implementation within the core game, were necessary for their functionality. Bringing these mechanics to a smartwatch would not offer any meaningful experiences to the user. 

We now needed to determine the execution and effectiveness of the features within our flow chart. To do this, we created a paper prototype that featured an instance of feature navigation for the active and passive mechanics.  We conducted user testing to retrieve feedback and continue iterating. 
The prototype allowed us to make quick work for iterating our flowchart. We were also able to test out low commitment ideas to see what worked and what didn't. 
Feature Navigation -  Paper Prototype
Low-Fidelity Prototype
Our redirected attention on implementing passive mechanics allowed us to focus on creating a low learning curve. This solidified the user's ease of access during their journey through the application. 

Proposed Opportunity

Simplistic Familiarity 

Blend Club Penguin's artstyle with Apple Watch's UI .
We aimed at presenting the iconic charm of the original art while remaining modern and sophisticated. To do this, we needed to establish a harmonious blend between old and new. Club Penguin never shied away from bold and vibrant colours and that remained at the heart of the visual style. Apple's watchOS presented a unique opportunity given it's dark UI,  allowing for colours to pop while looking sleek. 

Getting Healthier Together

Encourage healthy habits and social engagement.

Considering this app was designed for relatively young users, it needed to synthesize a simple and streamlined navigational experience to reduce user fatigue and information overload.  Activities are always more fun when friends can join so having fellow puffle pals participate in activities  contributed to the overall engagement of the experience.

Sharing & Caring

Reintroducing mechanics and sharing them with friends.

In Club Penguin, puffles need to be cared for by their owner and we wanted to build on that mechanic for the companion app. Users need to monitor aspects of their puffle's well being, all of which can be altered by interacting with the puffle. Visual tells will be displayed by the puffle to better indicate what is required of the user.

Users will also be able to monitor their own progress throughout the day with live updates, tracking their daily goals.  Completing these activities and daily goals earn players achievements. This was an opportunity to gamify the experience, providing players with in game currency to personalize their puffle. 

Like Tamagotchi, befriended puffles can interact and build a relationship with one another. Puffles will join together when user's are within the same proximity as their friends, similar to Snapchat's Bitmoji Map.  This adds another layer of social encouragement to complete activities with friends.

Celebrate Creativity

Provide features to make the experience personal.
One of the greatest ways to maintain user retention is to promote customization. Every user is unique and their experience within the application echoes that.  Coins earned by the player can be spent in the shop to alter their puffle's wardrobe and features.

Reflection

 Despite how excited we were to jump into the design process, I'm grateful that we spent as much time researching as we did. By doing our designer due diligence, we were able to hone in on the little details and create something  that payed respect while revitalizing aspects that we loved. 

Design constraints foster creativity.

Due to the aspect ratio, we needed to remain mindful of our design considerations throughout the entire process. It required us to place a heavy significance on simplistic iconography, using the space we had to present a coherent and comprehensive user experience.  
  • kisspng-itch-io-a-mortician-s-tale-milkm
  • Black LinkedIn Icon
  • Twitter

© Dean Elliott 2020