← Return to Blog
 Outfox logo over photos of the design process

Designing Outfox

By: Chris Brennand, Outfox Design Director

When we set out to design a new optimized gaming network a year and a half ago, we knew it had to do a few things:

  • Improve Performance: No vaporware, real and measurable performance improvements
  • Do No Harm: Seamlessly improve network performance for online gamers when we can, and get out of the way when we can’t
  • Be Honest: Be transparent about what it was and wasn’t doing

Once we had a proof-of-concept to show that the technology worked, we started focusing on how gamers would interact with the service. Our development and operations teams are doing some clever, complex magic on the backend to make Outfox work but we wanted to ensure that using the service was as straightforward as possible.

The App

Networking apps are usually a pretty mundane affair; some dull graphs surrounded by a ton of tiny metrics. We wanted Outfox to show enough data to prove that it was working but not so much that the interface became a chore to sort through. After some iteration on a number of different ideas, we landed on a Performance Improvement Gauge (known internally as the PIG) as a simple way to show how much Outfox was (or wasn’t) helping your connection. This would serve as the “magic number” and all other metrics and UI elements would support it. We also knew we wanted the service to work as seamlessly as possible. This meant automatically starting whenever a supported game was launched and only routing traffic through the Outfox servers when we determined the service would actually improve your connection.

outfox_wireframes.png#asset:1287

With this in mind we started talking to gamers, internally and externally, about what information was important to them and what it would take to prove that the service was working. Did they want to know what servers their connection was hitting geographically? Was visualizing packet loss important? Is viewing past game sessions to compare performance worthwhile? We created a bunch of rough wireframes iterating on these concepts and gathering feedback. As we spoke with people, it became apparent that the most important metric to monitor was latency. Latency is the total time it takes for information to get from your gaming computer to the gaming servers and back again. Although there are a lot of factors that go into online gaming performance, latency is the best overall indicator of how fast or slow your connection will feel. Now that we had a primary metric (latency) and a way to clearly show the improvement of said metric (the PIG), we started working on the UI of the app.

What's In a Brand?

At this stage we also started discussing what we wanted Outfox to look, feel, and sound like. We held a couple internal workshops with various teams to figure this out. Around this time Google Ventures had just written a guide to their three-hour brand sprint so we used that as a starting point. It’s a great format and I recommend it to anyone trying to nail down the “brand” of a company/product/service. We talked about why we were creating this service in the first place, who it was for, and what values we wanted the brand to represent. We took these values and attributes and had a second workshop as a design team to figure out how to represent them visually across our app, website, and any other branding.

brand_workshop.png#asset:1291

With a solid understanding of the brand and some strong ideas for how to visualize it, now came the fun part. Drawing foxes! Lots and lots of foxes. It was time to get started on the logo and every member of the design team contributed at this stage to gather as many ideas as possible. We reviewed sketches, iterated, and reviewed again until we had a handful of ideas we thought might work. We turned those sketches into one-color vector logos and presented them internally to get feedback. After a couple of rounds of internal feedback and more iteration, we had a logo!

fox_sketches.png#asset:1293logo_concepts.png#asset:1292

The last stage of branding was choosing a color palette. Orange, warm colors seemed like a natural fit for a fox but didn’t quite convey the speed and “techy” nature of what the service does. After making our fox just about every color under the rainbow we settled on a vibrant green. It felt fast, at home in the gaming space, and also gave Outfox a unique quality compared to the other fox branding in the world. With branding finished, we applied the logo, color palette and fonts to our website and app and started a design system to document everything and ensure consistency. outfox_logos.png#asset:1294

It's Alive

At this stage we were also working with the product and dev teams to figure out a release schedule that would allow us to get Outfox into users' hands as quickly as possible. We ended up with a planned series of alphas, a beta, and then the 1.0 release. These ranged from a simple server selector and on/off switch to the full featured app with all the bells and whistles. As we released each new version we spoke with users and tweaked the planned releases based on their feedback.

ui_iteration.png#asset:1295outfox_1.png#asset:1296

What's Next?

Now that Outfox 1.0 is out in the wild with a growing user base, we’re gathering tons of feedback on what gamers expect and want out of the service. This includes user interviews, usability testing, satisfaction surveys, and talking with people on our forum and Discord channel. We use all this feedback to help determine what to implement next and to iterate on any elements that are causing confusion among users. It’s been an amazing experience watching people use the app and improve their gaming performance. We’re always looking to talk with gamers about their experiences, so check out our forums if you’re interested in learning more.