Starfire

Case Study Sep 21, 2019

Brief

As it became increasingly clear that we would not be able to effectively monetize the Clay Games platform, we started looking for other ways to sustain and grow the company. We had seen incredible success at fostering large communities with high engagement and retention, so we decided to pivot Clay's focus and set our sights on tapping into an existing, high profile game, and establishing ourselves as a community platform instead.

My role

As the sole designer at Clay, I was wholly responsible for defining, building, and refining all of the visuals for Starfire. This included the branding, mobile and web app designs, social media assets, and more. Throughout the process, I relied upon and worked closely with developers to provide regular feedback and ensure the consistency between the designs and the live, shipping product.

Process and solution

From the outset, we wanted to target Clash Royale—the mega-hit mobile game from Supercell. It was a game we were familiar with and played regularly, and it was a game that was dominating live streams on Twitch and YouTube. In fact, we would start by targeting the most popular live streamers to be our first users, and we hoped to lure them in with exclusivity.

To attract the top live streamers, we hypothesized that we needed to first build an exclusive club, of sorts. A community of Clash Royale elites, where they could feel safe to discuss and share the best strategies and deck combinations among themselves. So I looked to other exclusive membership programs, such as American Express' (black) Centurion card for inspiration.

Red Tritium before it became Starfire

Our new service would be named Red Tritium, named after the rare radioactive isotope, to convey just how limited and exclusive we wanted the service to be. After running through several color iterations, I landed on giving the UI a dark and edgy vibe with thin, sharp fonts, bold pops of red, and outlined illustrations. For our early members, I even designed limited-edition black steel membership cards that we physically mailed out.

Red Tritium - Color Palette Testing
Spent the day testing out and gathering feedback on a variety of potential themes for our new app, Red Tritium.

Unfortunately, Red Tritium's stark look and limited membership would only highlight how barren and feature-light the app was. With so few users and little reason to regularly use the app, it became clear to us that exclusivity was the wrong approach. We needed mass appeal if this was to succeed.

User profile evolution

To coincide with our pivot, we re-branded Red Tritium to Starfire, and set off smoothing over all of the sharp corners in favor of something rounder and friendlier. I ended up keeping the same general color scheme, but introduced a new font, all-new illustrations, and incorporated more of the game's imagery into the app.

A major feature of Starfire would be the ability for players to link their game accounts with their Starfire profiles to automatically import their card decks and clan details. We could even pull stats that weren't normally visible in the game, making Starfire a valuable tool in evaluating a player's performance. With all this data, information density and a clear information hierarchy were paramount. As such, I spent a considerable amount of time iterating on the player profile designs.

Some of the illustrations used in empty states throughout the app

The next area of focus for myself was in the chat experience. Heavily influenced by other chat apps such as Slack and—more related—Discord, I took Red Tritium's singular "open chat" room and separated it into several different channels. This would help keep discussions organized and reduce the amount of people talking over one another. To inject some fun into the chat, we also introduced the ability to attach stickers and GIFs to messages with a built-in Giphy search.

Channel-based chat

Over the next several months, we would continue building out additional features, such as deck builders, Reddit-style community posts, strategy guides, private clan rooms, tournaments, and more. As time went on, however, and Starfire grew to millions of users, it became evident that there was one more project still to take up: localization. We now had people from dozens of countries around the world using the app every day, yet it was all in English. Tasked with translating the app, I established a process using a combination of paid services and crowdsourcing to localize the app, including app store descriptions and assets, to cover the majority of our users. This would ultimately result in the entire app being localized to a total of 9 languages—English, Spanish, Italian, French, German, Portuguese, Japanese, Korean, and Chinese.

Starfire Across the World
After a month of hard work and some extremely generous contributions from our community, Starfire is finally localized into 9 different languages! Overcoming the challenge of ensuring that the UI ...

Outcome highlights

  • 12+ million members, globally
  • Close to 1 million daily active users
  • 4.5 average rating on Google Play (100,000+ ratings)

Cristian Ruiz

I'm a product designer with extensive web and mobile experience. Since 2010, I've worked on well over a two dozen shipping apps and website that have reached in excess of 40 million people worldwide.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.