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
XD, Figma, Illustrator,
Photoshop
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
Traits
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
Despite being encouraged by his parents, Tommy finds little incentive to participate in physical activities
Motivations
Seeks friendly competition among friends
Likes being rewarded for his accomplishments
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.
