Every month, 6,000 to 7,000 apps are released on iTunes, left to fight for consumers’ attention, time and phone space. It’s especially tough for games, as the ecosystem fully embraces the free-to-play model.
Developers and publishers need a striking first impression. That’s why so much rides on those fingertip-sized icons.
Chillingo is a mobile games company “obsessed by polish,” General Manager Ed Rumley says, making sure each game’s icon is perfect. That could mean creating 100 to 200 different drafts long before going live.
Chillingo has been around 10 years as a mobile games publisher, long before the App Store existed. While the company is now owned by EA, Rumley said they operate somewhat autonomously and usually tap EA for resources. Chillingo’s main job is to publish mobile games from hundreds of different mobile studios, whether big teams or tiny indies.
That means studios come with ideas and experience when it comes to their game’s appearance in the App Store, and Rumley said an in-house graphic design team helps shape that. Led by designer Lucy Blundell, the team helps shape the programmer’s desires to create the final pieces.
“The icon has to try to get a message across quickly. Does the game have that must-have X-factor? Is this an icon that everyone wants to click on? This icon is the equivalent to the packing that you see in Walmart or Tesco. That’s why we’re so obsessed with detail, because you wouldn’t put bad packaging in a retailer,” Rumley says.
Mashable had Chillingo walk us through the creation of three different game icons, to show how they arrived from idea to final state in the app store.
When developer About Fun submitted its icon ideas for Mega Dead Pixel, a quirky, 8-bit endless game, to Chillingo, Rumley said the team had a lot of great ideas that just needed tweaking.
What made Mega Dead Pixel unique was its semi-retro art style, and also its gameplay where a pixel is endlessly falling through the chromatic sky. Rumley said the team spent a lot of time trying to figure out which icon designs communicated both those ideas.
One of the tricks the Chillingo graphics team uses to aid their design decisions is to put an game’s potential icons in a simulated App Store, comparing them to the other top game icons and seeing if they stand out. The results for the Mega Dead Pixel final ideas looked something like this:
The team homed in two ideas: the square face that seemed to pop out of the icon, and the speed lines behind it. They found rotating the face 45 degrees gave the icon an illusion of speed, and adding a rainbow trail made it reminiscent of classic Atari box art.
The final icon also had a solid colored background, which Rumley said is important when it comes time to push a game update. Since Apple’s iOS now allows apps to automatically update themselves, there needs to be a way for players to know there is new content in their games. A subtle update, like swapping the background color, allows Chillingo to indicate an update without losing what makes an icon iconic.
For military strategy game Modern Command, Level 8 Studios brought several different ideas and themes in their icon to meet with Chillingo. While Rumley said their designs were great, he pointed out something with less experience designing mobile game assets might not realize: they were too cluttered when they were a smaller size.
“These icons all look great when seen on a 24-inch monitor, but when you shrink it down to thumb size on iPhone it’s an incredibly different story,” says Rumley.
So the team went back to work, focusing on the themes of missiles and tanks to go along with the Modern Command‘s main elements. While it lead to more promising icon examples, Rumley said there was a concern the icon wouldn’t match other product materials created for the game, like an Editor’s Choice banner.
The team continued to modify the icon, focusing on the game’s strategy elements. Rumley said a breakthrough happened when they decided to have the missiles facing away from the player, making it seem like they were in charge.
“In one image, we’re trying to create the story of what the game is about,” Rumley said.
They also decided on the icon’s final color scheme — yellow — after noticing how many blue and green game icons were dominating the App Store.
As Rumley tells it, Simian Interface is a hard game to explain in just one image.
The abstract geometric puzzle game that “can appeal to a 70-year-old mother and a hardcore gamer all at once,” it was hard to get idea down to tell a story.
The team at Bulls Eye Studio was also very adamant on the icon they had designed being the one used in the App Store, so the Chillingo team had to create something different that would look better and convince them to change. (The game’s original icon is seen on the right.)
“We thought it was rather unclear in the game’s idea,” Rumley said. “We thought it would narrow the market. Once people played the game, they’d understand it, but that icon didn’t make them want to pick it up.”
The above examples show how the graphics team attempted to play with modern art shapes and blocky patterns, as well as a Matrix-like grid and any monkey’s favorite snack: a banana. Rumley said they still struggled with finding a cohesive theme, especially when you added in additional graphical elements that needed to be created.
“You can’t have something that looks different than your Editor’s Choice banner, because then it looks like you’re competing with yourself,” he said.
The real eureka moment came when the team at Bulls Eye returned to Chillingo with a new trailer, featuring a chimp paired with Simian Interface‘s unique graphics. Rumley said they all immediately fell in love with it.
“It was actually this great trailer that gave us inspiration to revisit the lead banner and the icon, and when you look at those together it just really gelled. It had loads of different shapes and angles, and used the monkey well, while adding subtle details like the geometric shapes reflecting on his face,” Rumley said.
Even though the team might love an icon, it’s still not set in stone until a little market research has been conducted first. Chillingo uses it and EA’s advertising networks to A/B test new games’ presentation to tens of thousands of current players.
Players may see icons for games that are still in development, and if they click on them they’ll be taken to a “coming soon” page, Rumley explained. But those clicks and reactions are measured to see which icon receives the best response.
“We’ve tried to turn creating icons into a science,” he said. “Sometimes consumers say otherwise, despite how much experience you have.”
This whole icon creation process could start months before the game goes live, sometimes even a year before, Rumley said.
“At the end, they just want to create the perfect icon that just says ‘install me’.”