TeamSnap is a team & group management app that makes organizing and communicating with your team a breeze. I first used TeamSnap in 2006 for a basketball team I was playing on (Shout out to 'Boom Goes the Dunkamite'!) and instantly fell in love with it, which I was I instantly jumped at the opportunity to come on board and design for it.

While at TeamSnap, I was the lead designer for the team-side web application. This team was mainly focused on user onboarding/trials, conversion to paid, team management and any other monetization initiatives. A few notable stories I worked on were: Redesigning our team setup flow, designing bulk roster and schedule creation, building a responsive email framework and collaborating on optimizing the team signup flow, among many, many other things. Lastly, and probably most importantly, another designer and I collaborated on a complete visual redesign of our web app.

*The following information is repeated from a blog post I wrote regarding the redesign of our TeamSnap web app on the TeamSnap blow.

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, 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.

Below are a few other stories I worked on...