THE PROBLEM

Managing teams and groups of people is hard. It traditionally involves, emails, phone calls, text messages, Google Docs, etc., creating a very fractured environment that is difficult to maintain.

THE IDEA

TeamSnap is a team & group management app that makes organizing and communicating with your team a breeze. It keeps all of our team's information in one place, on one platform. Whether it be contact information, schedules, photos, payments, etc., TeamSnap handles it all.

MY ROLE

Lead designer for the team-side web application – This team was focused on user onboarding/sign up, conversion to paid, team management (Manager persona) and any other monetization initiatives.

  • UX Design – Whether it was prototyping, wireframing, user testing, A/B tests or other UX processes
    • Redesigning Team Setup Flow
    • Designing Bulk Roster and Schedule Creation
    • Collaborate on Optimizing Team Signup Flow
    • Design New Feature for team Assignments
  • Visual Design – Visual design for the web product
    • Optimize & Redesign Plan Select page
    • Establish Visual Style Guidelines for complete web application redesign
    • Build a modular Design Library in Sketch for web team
    • Redesign transactioanl email framework to be resopnsive and increase conversions
  • Front-End – Handled all front-end coding for my team, as well as all email design and coding for the company
    • Collaborated on complete rebuild and redesign of CSS framework from the ground up
    • Redesigned and recoded all our transactional emails to make them responsive and better optimized for phones
    • Responsible for all front-end coding of features for my team
“As mentioned above, and probably most importantly, another designer and I collaborated on a complete visual redesign of our web app, which hadn't been updated in over 10 years.”
*The following information is repeated from a blog post I wrote regarding the redesign of our TeamSnap web app on the TeamSnap blog.

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.

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

Click For Larger
Click For Larger
Click For Larger
Click For Larger
Click For Larger