About two years ago, as part of the Arc90 Hackathon, I built Team Colors: a single-page website which serves as a reference for discovering the HEX color values of professional sports teams.
I wrote a quick overview of the original project’s conception, design, and coding back when it launched in early 2013 (which you can read here).
Throughout these past two years the page has continued to receive content updates (new teams, colors, logos, etc) from both myself and a few voluntary contributors on Github. It has proved to be a viable resource for a variety of people on the web. But it has never received a face lift...until now! So, without further ado, I present Team Colors 2.0:
Design Goals for 2.0
After sketching some initial ideas and reviewing feedback, I made a small list of goals I wanted to achieve with a 2.0 redesign from both a technical and UX perspective:
- Universally accessible
- Optimal responsiveness
- Filter functionality
- Simple deploy process
Borrowing from the design vision of the web itself, I wanted to ensure this site remained universally accessible. To achieve this goal, the initial page load serves a simple, coherent HTML document listing teams and corresponding colors categorized by league:
As you can see, the initial HTML document is a giant list with a kind of key/value structure. Additionally, at the top of the page are anchor links to each part of the document, making browsing easier while simultaneously making it easier to quickly grasp the content and structure of the document as a whole.
Table of Contents - Anchor link to League 1 - Anchor link to League 2 - Anchor link to League 3 - Anchor link to League 4 Content - League 1 - Team 1 - Color 1 - Color 2 - Team 2 - Color 1 - Color 2 - Color 3 - [...] - League 2 - Team 1 - Color 1 - Team 2 - Color 1 - Color 2 - [...] - League 3 - [...]
Thus the site provides an progressively enhanced experience. Accessibility? Check.
Team Colors 1.x was already fully responsive. I wanted to keep this as a clear goal for 2.0. I also wanted the experience to be slightly modified, yet still superior, depending on the screen size. This led me to the decision which informs the design you see today: an expanded list of team colors on larger screens and a collapsed, but interactively expandable, list on smaller screens:
Responsive site, optimized for screen dimensions? Check.
I realized that having (what aspires to be) a vast compendium of information meant a search mechanism was a necessity. This would allow users to quickly find the exact team they were looking for irregardless of league categorization.
The original 1.x version of Team Colors presented a simple tabbed view of the teams categorized by league. So the browse experience went something like this: the initial page load would render the default league (NFL), if the team you’re looking for is not in that league, you’d have to browse to the tabbed league view of the team you’re looking for and then scroll until you found it.
With 2.0, the initial page load lists all teams by default. Then you can filter the teams by league or simply search for the specific team you’re looking for by keyword.
Search-able, filter-able, and browse-able experience? Check.
The previous deploy process for Team Colors was somewhat convoluted. Any time a change was made, even something as simple as changing one team’s HEX value, I had to send an email to someone at Arc90 who had access to their servers. They then had to grab the code from Github, run a deploy script, and dump the results in S3.
A much easier way to manage the deployment of major or minor changes was to switch to Github Pages. Now the process is simple: anytime anyone makes a commit and pushes it to Github the changes are deployed by Github’s build process and reflected almost instantaneously. This required transferring ownership of the Team Colors repo from Arc90’s Github to a new Team Colors organization. It also required providing a CNAME on Arc90’s subdomain
Push code, instantly see changes live? Check.
I love the new Team Colors. I find it easier to use and more feature-rich (including simple interactions like ‘click to select’ for color values). I think it also encourages serendipitous discovery of teams across leagues.
Do you want a more detailed look at the code? Do you want to make your own contribution? Check out the Team Colors repo on Github.