Logo
Log inFind My Team
  • Solutions
    • For Business
      For Business

      Tools for clubs, leagues, tournament organizers, and associations to run their business

      For Teams
      For Teams

      For coaches, players & fans to stay connected on our top-rated mobile app

      Promo image
      • Overview
      • Program ManagementManage all aspects of your organization
      • SponsorshipAccess our network of opportunities
      • RegistrationPayments, dues, and more
      • TournamentsBuild and manage your events
      • PaymentsA better way to manage payments
      • Website BuilderProfessional & mobile friendly sites
      • SchedulingAutomate games & practices
      • Services & SupportIndustry-leading account support
      • MessagesSimple, reliable communication
      • Get started!Chat with our team right now
  • Pricing
  • Resources
    • Community

      Our mission is to enhance the lives of kids by enabling participation in sport

        Other resources
        • Blog
        • Coaches’ Corner
        • For Business Resources
        • TeamSnap Updates
        • Help Center
        Company
        • About
        • Careers
        • Partners
    • For Brands
      • Build relationships in the moments that matter.

        Convert families into superfans with TeamSnap for brands.

          • OverviewThe #1 way to reach the Chief Household Officer
          • AudienceLearn about our audience and network
          • CapabilitiesExplore our products and measurement solutions
          • Download Media Kit

      Find My Team

      Sign upLog in
      Sign upLog in
      BlogCompany
      • General Sports
      • Health and Safety
      • Coaching
      • for Business
      • Announcements
      Featured image: Behind the Scenes: TeamSnap’s New Look

      Feb 24, 2017 • 4 min read

      Behind the Scenes: TeamSnap’s New Look

      /images/teamsnap-badge.png
      TeamSnap

      Posted in:
      • Company
      • TeamSnap Features

      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!

      Old TeamSnap Look New TeamSnap Look

      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 😃).

      Modular Design System

      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.


      Download our app

      app-storegoogle-play

      Share this post


      Create Your Team Today!

      It’s Free and Free is Good!

      Sign Up Your Team!Free and Paid Plans Available
      Products
      Sports Organizations
      • Get a demo
      • Features
      • Pricing
      • Tournaments
      • FAQs
      Coaches or Team Managers
      • Features
      • Pricing
      • Tournaments
      • Get Started
      Parents or Athletes
      • Features
      • Pricing
      • Find My Team
      • Get Started
      Sports
      Sports Organizations
      • Baseball
      • Basketball
      • Football
      • Ice Hockey
      • Lacrosse
      • Soccer
      • Softball
      • Volleyball
      Teams
      • Baseball
      • Basketball
      • Football
      • Ice Hockey
      • Soccer
      • Softball
      • +100s more
      Resources
      • Blog
      • Coaches’ Corner
      • Return To Play
      • For Business Resource Library
      • Skills & Drills
      • Press Releases
      • TeamSnap Updates
      • TeamSnap Help Center
      • Community
      • Why TeamSnap?
      Company
      • About
      • CareersHiring!
      • For Brands
      • Partners
      • TeamSnap API
      • Responsible Disclosure Policy
      • Youth sports team and sports org app Apple App Store Logo
      • Youth sports team and sports org app Google Play Store Logo
      • social-media-facebook
      • social-media-twitter
      • social-pinterest
      • social-instagram
      • social-video-youtube
      • professional-network-linkedin
      • social-tiktok

      TeamSnap Footer Logo

      Copyright © 2005–2025 TeamSnap, Inc.

      • Sitemap
      • Terms
      • Privacy Policy
      • California Privacy Policy
      • Your Privacy Choices