Intro
_______ had not updated their _____ for many years. User engagement in the apps was very low, and the bounce rate was high. I was brought in to create a new user experience for the app, leveraging existing content and allowing for new types of content.
The Challenge
Mobile advertising by game publishers is a $17B business (excluding Asia) I was recruited to re-brand, re-flow, and re-skin ClanHQ, a Sequoia Capital funded chat application powering communication between players in top games like Marvel Contest of Champions, Clash of Clans, Star Wars Galaxy of Heroes, Clash Royale, Brawl Stars, Fortnite, and 80+ other game titles.
My Role
I took over design of a half built product that wasn’t resonating with the target audience. As Creative Director, I owned the project end-to-end, doing user research, IA, UX, UI, Visual Design, Illustration, marketing collateral and platform ad design. I worked with Product & Engineering to understand challenges & create an app that received a 4.5 star rating on the app store.
Personas
Understanding important gaming tool needs of Clans, Guilds & Alliances
Players are not satisfied with LINE, Discord or Slack for mobile gaming clans. Players want game specific tools per game title. Super-influencers are present and the key to winning. Whales are highly engaged in chat, in high concentration in top clans. They care about other players engagement and engage them in chat driving alliance member behaviors.
John – 37
Marvel Contest of Champions
Plays with friends on Facebook, iOS, PS3
He buys console games and pays to play his favorite freemium games, usually it’s accessories for avatars or weapons/upgrades for game characters. He likes fighting games and alliance based strategy games.
He’s a big Star Wars and Marvel fan loves Marvel Contest of Champions
James – 46
Marvel Contest of Champions
Play with friends on Facebook, Mobile, iPad
He runs an alliance on Marvel Contest of Champions. He plays console games and iOS freemium games, he pays to play games getting accessories and additional avatars and weapons/upgrades for his characters.
He loves Marvel Super Hero Games, and is a Super Star Wars fan.
Sang – 32
Star Wars Galaxy of
Heroes
Uses iPhone/iPad
to play with friends
He plays console games and iOS freemium games, he pays to play games getting accessories and additional avatars and weapons/upgrades for his characters.
He loves Star Wars games and Super Hero Games. He’s likes some Disney titles, like Tron, but is a Star Wars fan.
LaRae – 42
Clash of
Clans
Plays with friends on Facebook, iOS,
She plays console games with friends and some iOS freemium games. She loves Star Wars, and Assassin’s Creed. She’s not a huge fan of Disney titles or Princess Films, but is a Star Wars fan. Loves all the Marvel Heroines,
She loves the Avengers movies and has played most Marvel games.
The Redesign - Logos
Creating the brand
The CEO John Osvald and CMO Eric Schiermeyer were often referred to as "Carnivores, eating the competition alive!" at Zynga. So when they left Zynga and decided to form a new company, they carried over the name. John's favorite animal was an Octopus. He asked me to design a logo for the company to produce some Swag for users and the team. He had tried a couple of the Logo challenge sites, like Fiverr, and was less than impressed with the results. I had a couple of favorite chunky bicycle logo head badges and decided to simplify the logo from an Octopus to a single tentacle in the form of a letter C. - It was a big hit with our users. It ended up embroidered all over hoodies and hats.
Creating the product logo
The CHQ logo was essentially three letter CHQ when I arrived. John asked me to create a new logo for the app and to produce some Swag for users and the team. I leveraged the chunky C tentacle wanting to create a family of similar logos. Initially I put the chat bubble tail on the Q. The negative space in the C felt like a controller button and that was it. I decided to simplify the Q and crop it to match the C, which I added a tail to. It suddenly felt like a subliminal chat game controller. It was a big hit with our users. Some of them made videos and gave it flames!! It was cool to see how it was adopted by users and embellished to be theirs.
Establishing a new Look & Feel – and why it was critically important
In testing we found people thought the app “looked too corporate” and they thought the home screen was overly complex. Some users had difficulty reading things due to font sizes and colors. I decided to simplify the app. I used bold data driven iconography to inform users of their daily progress with one glance of the home screen – NO MATH. If they wanted more info, they could drill in and view granular details.
Style Tile
Similar to the paint chips and fabric swatches an interior designer uses to get approval on before designing a room. I use style tiles as a design deliverable consisting of fonts, colors and potential interface elements that communicate the visual essence of a potential brand.
The CEO wanted the style to be clean and easy to use. Many of our users played social and mobile games, so I thought if I made it more game like with visual rewards and levels, it might make the app stickier than regular chat based app like Line or KakaoTalk. I went for a flat 2.0 look and feel after reviewing the user tests and seeing how many things didn’t look tap-able to users. I had also read an article by the Norman Nielsen Group, that flat design didn’t resonate well with older users: Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users
The Dark Mode style tile tested best with our users on Fivesecondtest.com, they felt it communicated “Games & Clans” and was fun, easy to use and edgy.
The Redesign
Chat Stream mockups and content attachment flows
After testing the new look & feel, I examined the chat screen flows of the app and talked with the heads of Product & Engineering. There was a lot to fix, but we had a timeline and a budget to contend with so I refined and simplified the content attachments flows reducing the number of screens and enlarging all the content image.
View zoomable vector PDF (big file – opens in new tab)
Lo-fi clickable prototype user test results
What was tested:
Chat screen flows simplification
• Do users understand how to take a picture add it to chat stream?
• Do they like new reduced flow attaching photos from albums?
• Do users like the size of videos in the chat stream?
• Did they understand they could add any .GIF image?
• Did they like the Marvel Octopus Parody Stickers?
Participants:
• 3 women
• 7 men
- CAMERA – TAKE PICTURE AND PLACE INTO CHAT STREAM 100%
- PLACE PHOTO FROM PHOTO ALBUMS INTO CHAT STREAM 95%
- PLACE VIDEO INTO CHAT STREAM 100%
- PLACE ANIMATED GIF INTO CHAT STREAM 100%
- PLACE STICKER INTO CHAT STREAM 100%
- DID THEY LIKE THE OTTOPUS STICKERS? 90%
CHQ – Stickers!!
CHQ users wanted features like other apps they were using like Line, Discord and KakaoTalk. They wanted cute stickers, snarky stickers, visual punchlines to express themselves instantly, feely and easily.
Since I worked for Disney, I reached out to see if we could get hold of Marvel and Star Wars stickers for use in out app, but we didn’t have the budget or the traffic to warrant their attention.
So…I decided to draw cosplay outfits for our mascot Otto the Octopus and let him parody his favorite super heroes. There was some concern from key stake holders, but I explained that these weren’t copyright violations as they were parodies of Marvel Characters, which were covered under 1st Amendment Free Speech. They ran it by our lawyer, he laughed and said, “Nope not copyright infringement.” and then asked for a Captain America Ottopus T-shirt. I ended up drawing over 200 hero stickers due to budget issues I had a blast. I mean what else do you do while watching Marvel movies on Netflix?
4.5 Stars on the Apple App Store!
CHQ was really well received by users. Carnivore Studios was approached by partners to white label CHQ for other games.
The most rewarding part of the project was when users started sending us the reviews they had taken the time to write and post to the app store. We enabled them to spend more time playing and less time organising their clans and alliances.
ClanHQ: MCOC Chat App Initial Walkthrough
Dork Lessons on YouTube with over 61.5K subscribers did a walk through shortly after release of CHQ to app stores
Key Take Aways from the review:
• Reviews Prestige Calculator
• Ability to set notifications per game title per chat
• Ability to see who has seen your chat messages – know what’s been communicated to whom
• Visual AQ map tools to see which of your clan members have completed their tasks
• Ability to organise your Clan, designate officers and levels, demote and remove
• Ability to post ads for alliances and recruit members for your clan