Wardrobe Revamp: Colour Selector
Product: Kim Kardashian Hollywood
Platform: Mobile Game
During my time working on Kim Kardashian Hollywood, the game went through two major visual refreshes. In order to maximize the excitement of these updates, we leveraged these updates to implement major changes to our character wardrobe area. These updates brought new life into the game for older players and gave new players a more robust first time experience.
Skin tone and colour
Our initial colour selector was pretty basic. It allowed the player to choose up to a dozen different colours for things like skin tone, hair and makeup. But it had it’s problems.
The touch area was small and was difficult to interact with. It also encroached on the character doll and in some instances obstructed some of our more elaborate outfits and hairstyles.
So during our first game refresh, we decided to move the Colour Selector into the customization area. This grouped all customization options to the right hand side of the screen and gave the character doll the space it needed to shine on the left hand side of the screen. This newly opened up space also gave us the ability to zoom into our character doll in order to really perfect a dolls look.
Overtime new problems showed themselves with this new approach. On smaller devices where the number of customization items viewable on screen was smaller, this colour selector was taking up valuable real estate and covering up to 1/2 of the bottom row of items. This wasn’t an issue when scrolling through a few hundred items. But it really became an issue when having to deal with thousands of items.
Also, as the game matured and we became more familiar with our player base, we realized that diversity and representation in our game was lacking. A wider range of skin tones and hair colour, as well as more makeup options to suit different shades of skin colour was badly needed.
So the first thing we did was recapture some of the real estate for our customization items by compacting the colour selector into a single colour chip
Tapping on that colour chip opened up a new colour palette that was able to house a large number of colours, as well as giving us the ability to create a tab system within this new colour palette that gave us the ability for further subcategorization
Skin tone was separated into Natural and Fantasy colours
Along with an “ALL” tab, make up and hair colour were subcategorized by Hue
With this newly expanded colour experience, we were also able to provide players with more control over things like Hair Shine and Blush intensity.
In the end, it took us a while to get to a place where we felt that not only were players given the necessary tools to really fine tune the look of their dolls, but also to a place where players felt that they were being represented appropriately, no matter their skin type.