Supercell's Clash of Clans
While applying at Supercell, I was asked to design an online experience for Clash of Clans website with the goal to get first time gamers hooked. They gave me 2 days to work on it and made it clear that they wanted to see more ideation than the actual pixel perfect rendering of the design.
Role: Marketing | Visual Designer for Web Eccommerce
In 2014, Supercell was gaining major popularity among the gaming community. Heads were turning and fans were screaming for more. 95% of these fans were gamers by heart.
As I interviewed there, the lead designer asked me to do some research and come up with a revamped website that can bring new users into clash.
I'm not a gamer so what did I do next?
“I'm not a gamer so what did I do next?
I began to play the game myself to figure out what made it so addicting. I needed to get into the shoes of the users to begin to even understand what needs were being met and why they kept coming back for more.
Since time was limited, I asked a bunch of friends who were hooked on the game, what were some of the elements that had them coming back for more.
"Every attack is different. I get toutilize each character's strength for the type of attack."
" time I was attacked, I could replay how it happened and revamp my base for better defense!!"
"I absolutely love the community aspect of having virtual chatrooms!"
After downloading the game myself, I started to check my Townhall every 5 minutes to see how else I could make my base stronger and difficult for others to get my gold and elixir. That's when it dawned on me. First timers needed to give the game a try. So I wrote down some of the pain points that might be preventing users from actually downloading and playing the Clash.
"I don't want to download any more games on my phone."
"I WANT TO PLAY IN INCREMENTS AND DURING DOWN TIME."
"I DON'T WANT A GAME THAT'S TOO COMPLICATED. MORE ENGAGING THE STORY, THE BETTER OF AN EXPERIENCE IT IS FOR ME."
"I HEARD ONLY REAL GAMERS ARE INTO THAT. I'M NOT A GAMER SO I'M NOT INTERESTED."
I quickly critiqued the way Supercell designed their current Clash of Clans website and noticed that it was just very straight forward. This is what we are about and this is what people say. Clash of Clans character's personalities, the game, and sense of community were not showcased anywhere on the site. Being a first time gamer, the 3d renderings in the commercials and their website looked nothing like the app. There was a disconnect. So I started to draft initial ideas of what the website could look like to drawn in first timer users. Allowing users to try the game out without downloading the app was my idea of a "hook" towards becoming a clash addict.
Here is my first attempted design. It wasn't pushing the boundaries but simply using visuals to just grab the user's attention and lead them to explore.
Thoughts and Sketches
I began to organize what users were saying into 3 categories on why the actual app was a tremendous "hit" and such an enjoyable experience.
Areas of interest
Supercell wanted a rough sketch of ideas for the website, in order to display my ability to ideate and execute LoFi designs quickly with the assets they provided. With that direction, I then produced these rough visual designs.
Similar to a movie opening, I wanted to design an epic opening where there were clouds that would open up and reveal the CoC logo with its many 5star reviews floating around it.
After flying through the clouds, the user would land on this page where they need to gather their troops. I thought since the old site didn't display any of the unique personalities of each character, this would be a great place to introduce them. The user would hover over each character and learn the different strength levels, damage capabilities, and etc. The characters would also animate and pose to show their witty-ness. After summing up all the troops for first round on the site, the user would then enter into the war field.
After selecting troops, they will then be dispatched to different areas on the site, starting from the top. The army of goblins, archers and barbarians would start attacking, demolishing as many fences in order to get to the first batch of gold in TownHall A. There will be slight overlays at different parts of the game to give quick tips and tutorials on how to advance to the next level. As the troops continue to conquer towards the bottom of the screen and is able to win all the gold and elixir, the user can transfer those points to their app.
This is where it gets really fun. Because each character has their own unique capabilities, first-time users will get to know which characters are straight up dumb and the ones that don't listen. Users will realize that in order to develop the ability to utilize their weaknesses to conquer an area will take much practice. For Ex) If the user were to drop a barbarian to the right side of the town hall in order to attack, but there was a random fence in that same area, the barbarian would immediately go towards the fence instead of the actual goal. Hilarious.
Supercell absolutely loved the idea.
I noticed some implications of my ideas on their most recent update. Supercell had added a page where it is for first time users to learn the "basics". Users were able to test out what it looked like to build their base but I didn't quite get what the intention was. I'm assuming that it was possibly to help users get familiarized with the actual app game layout with a purpose of being a straightforward tutorial more than interaction.
Learn the basics
Some of the ideas I had would be to have mutliple users timed to play on the website together. (One to build their base and another to attack.) I thought including a side chatroom would be a good sneakpeek also. Although I looked forward to working with Supercell, I chose to go on a different path towards designing at a startup for healthy lifestyle, I did appreciate the challenge of thinking outside of the box for a fast-growing gaming company.