Nicki Stearns | Club Penguin Island Marketplace
16719
portfolio_page-template-default,single,single-portfolio_page,postid-16719,ajax_updown,page_not_loaded,,qode-title-hidden,qode-theme-ver-16.8,qode-theme-bridge,qode_header_in_grid,wpb-js-composer js-comp-ver-5.5.2,vc_responsive

CPI MARKETPLACE

Marketplaces for Club Penguin Island.

OVERVIEW

One of the larger features for the new Club Penguin Island app was the marketplace experience. These are marketplace locations within the app where kids could purchase consumable items, also a newly created feature for the island.

CPI-Logo
2016
SKETCH, ILLUSTRATOR, AXURE, UNITY

CHALLENGE

As part of the new Club Penguin Island experience, the 3D animators on the team created consumable items, like fireworks and food, to increase community interactivity while in different parts of the island.

 

Since kids earn coins as part of story missions, we needed to create places where players could spend those coins. I was tasked with designing one of those locations, the Marketplaces.

1.0 › First round wireframe of user experience.

APPROACH

My approach to this problem started with working with our game designers to understand how we should build this experience in world. We brainstormed different ways to access marketplaces from within the app, like a full 3D world location vs. a purchase UI trigger from a shop facade.

 

We agreed on the later experience, from this decision I started work on wireframes.

2.0 › Final round of wireframes with updated purchase experience.

UX

I started by creating a basic wireframe of experience. The first iteration included purchasing via a modal within the Marketplace UI. After some discussion, we decided to repurpose the an existing pattern of opening the bottom tray while in world to facilitate purchase.

 

I used the tray pattern and did a second set of wireframes. After some minor tweaks, we shared it with the engineering team and while I moved onto visual design, the engineer added the experience to the Unity project in gray boxes. This would give me a head start when I transitioned to Unity after visual design was approved.

UX

Wireframes, v1
PDF

 

Wireframes, V2
PDF

 

Experience
Axure Prototype

3.0 › Theme designs for each Marketplace.

DESIGN

Marketplaces would exist scattered throughout the island, in order to keep them consistent and fun, I started the design by creating a theme for each market. I designed some preliminary texture patterns and chose a primary and secondary color to pair with each market.

 

Working with the Illustration team, we were able to create final on-brand texture patterns for each marketplace that matched the their location in world.

 

I worked to keep the UI style consistent with other UI used in the bottom tray. I picked green as the overall marketplace color. I used the green UI across all marketplaces, paired with the primary and secondary colors for each theme. The overall green UI provided consistency to indicate these were marketplaces, while the theme gave each marketplace it’s own unique flair.

4.0 › Purchase experience within a Marketplace.

5.0 › Additional screen states within the Marketplace.