Behind the Scenes: TeamSnap’s New Look

The Mission

“This tape will self-destruct in 3 seconds…” is what I expected to hear after being assigned what seemed to be the nearly impossible task of completely visually overhauling the user interface of our web app, go.teamsnap.com. You see, the visual aspects of the app had been more or less untouched for the past decade — a testament to a really great initial design. Because of this, many of our customers were very comfortable and familiar with the interface. Heavily altering it needed to be done very carefully, to keep all the teams running on TeamSnap operating smoothly.

The Approach

Luckily for me, our super-talented mobile teams had recently updated our mobile apps (which you can find in Google Play and the App Store). During this process, our design team was able to take some time to discuss the future visual identity for all of TeamSnap’s products. We had long discussions regarding icon sets, font stacks, color themes and more. From these discussions, we formed a great visual framework. The next step was to translate that visual style to the web.

Due to the popular and familiar original web app design, we were very aware that any major changes had the risk of being somewhat disorienting to customers. To reduce confusion for our users, we made a conscious effort to not update how anything functioned, only how it appeared visually. It’s a well-known phenomenon that people tend to hate redesigns of software they love and are familiar with, so we focused on updating to a modern, clean look without making anyone re-learn how to use TeamSnap.

It’s a well-known phenomenon that people tend to hate redesigns of software they love and are familiar with, so we focused on updating to a modern, clean look without making anyone re-learn how to use TeamSnap.

We did away with heavy gradients, dark grays, greens and oranges for a much lighter, softer visual style that allows a user to better focus on the primary calls-to-action within each view, while also providing a much more concise visual hierarchy. We put a lot of focus into providing optimal colors and contrast, to provide the best readability possible. Although there is a lot more work to be done, we’d like to think this is a nice improvement so far. We’ve finally left our 2006-style look behind!

Other Benefits

Since we created this visual style from the ground up we had the opportunity to build a modular design system. We have a living style guide that provides documentation to our engineering team, to make sure things stay consistent. This is something that never existed in the past with our product design. Harnessing the power of Sketch symbols, styles and Craft CMS, we have a system of design components that can easily be connected to allow for rapid prototyping, user testing or even to help other members of the product and engineering teams understand an idea (sometimes it just helps to see it 😃).

What does this ultimately mean for our customers?

We now have the ability to build shiny new requested features at an exponentially faster rate. The next step in TeamSnap’s evolution will take this look and feel to the next level, gradually changing not just how things appear but how they work. I’m excited to join the design team in helping make everything you do with TeamSnap easier, faster and smarter. What you see on the site today is just a first step.

Shane Foster is a product designer, responsible for making TeamSnap beautiful and, most importantly, easy to use. He lives in Lake Oswego, Ore., where you can find him making music, playing basketball or volleyball, and eating PBJs and pizza (quite possibly at the same time). Shane’s doppelgangers are Conan O’Brien, Prince Harry and Shawn Bradley.