Montreal is known as a sports city. In fact, out of all Canadian cities, it has the deepest ties to hockey, probably because the very first organized indoor game of hockey was held in Montreal all the way back in 1875.

When global creative agency Sid Lee — which has a significant footprint in Montreal — was looking for a topic for its new UI kit, they naturally decided to go with hockey. They created a hockey-based, fantasy sports league UI kit whose true beauty is that it can be adapted to any sport — baseball, football, basketball, etc. The name — Sid League — says it all.

The agency decided on the fantasy sports platform for its UI kit because of all the possibilities in design and UI that fantasy sports offer, according to the agency’s artistic director, Tommy Vincent Mathieu.

“Me and a larger team here at Sid Lee put our heads together to find the perfect subject for us. We looked for something that was inspiring, but where we could also quickly see improvements and solutions to what is being produced right now. The fantasy sports platform seemed to be the ideal choice because of all the data visualization and the different components involved,” he said.

How to design your sports app with the Sid League UI Kit

The UI kit is meant to inspire designers who want to move into prototyping for sports apps, especially those who want to try their hand at a fantasy sports league app.

A designer can be seen prototyping a sports app using the Sid League UI kit in Adobe XD.

Here’s how designers can jump into this kit right away and get the most from it:

  1. Download Adobe XD.
  2. Download the Sid League UI Kit.
  3. Look for the first artboard that you see on the left in the XD file, this is Typography. Customize the fonts used to begin branding your kit. Edit the text styles in the components panel (you have a good overview on this artboard). Use the same sizes and color types (light versus dark). This way, you can change the font in each component quite quickly. Start by changing only the larger titles and experiment further if that already produces a very different feel.
  4. The second artboard is colors. Separate the two first columns of colors with the last one. The last column contains your neutral colors that are going to be mostly backgrounds. Retain those contrasts by keeping really light and really dark colors. The two first columns are used for the four different teams, you have your darker hue on the left and the brighter one in the middle column. Keep this same logic if you change your team colors. Note: The bright orange here is also used for the main CTAs that are not branded for a team.
  5. Use the photography artboard to enjoy a good overview of your assets and grab them quickly if you need them within the document. Note: The quickest way for you to integrate your assets is to drag and drop them within the final components.
A designer can be seen prototyping the UI in an application of the Sid League UI kit on Adobe XD.
  1. In the Master UI Elements artboard, change some master components that are generally found within larger components. Exercise caution not to modify them too much so that they don’t fit in their context any longer. Note: If you add your own logos within the box of the ones that are currently set as master components, you’ll update every instance of that logo within all the other components of the kit.
  2. Master components are your main building blocks. They should already be branded to your liking if you followed the past few steps properly. Adjust the sizes, paddings, and different responsive behaviors. Note: With the new components feature, set the main components as masters, and then you’ll be able to create multiple variations with those.
  3. Experiment with quick iterations, and have fun! With your “building blocks” that are master components, you have the control to create the layouts you want. You can also create new components from the master for more teams or devices for examples.

Why fantasy sports?

For those who’ve never participated in a fantasy sports league, the question is, why choose that as the topic of your UI kit in the first place? To Sid Lee, the answer was obvious — to improve upon something that already existed and had potential.

“It was an amazing project since Adobe gave us a lot of space and flexibility to create whatever we wanted. We decided not only to showcase the new Adobe features, but also take advantage of this opportunity to review something that existed but had flaws,” Tommy said. “We chose fantasy sport because our team members are fans and are using those kinds of apps. We think we achieved something bigger by rethinking the design and functions, and improving what was already on the market regarding fantasy sports apps.”

Sid Lee designers review printouts of different screen views in their fantasy sports app.

To Tommy’s point, the fantasy sports industry is popular and only getting bigger, with participation increasing year after year. According to Nielsen data, those playing fantasy sports increased from about 8.3 million in 2012 to almost 16 million in 2017, in the U.S. alone — that’s 6.2% of the American population.

Designing for data visualizations with retro flair

Anyone who follows sports knows that it’s all about the data behind your favorite player, and fantasy sports are no exception:

  • How many points did they score per game?
  • How many points do they average per game in a season?
  • When are their hot streaks during the year?

What Sid Lee did well was to focus on this almost single-mindedly in the kit, to ensure that sports fans can sift through encyclopedia-like mountains of data about their favorite players seamlessly. Tommy asserts this is indeed the crowning achievement of the agency’s kit: “I think we managed to have some clear and interesting data visualization systems. We really pushed the use of the new design system feature and came up with something that could be very efficient on a real project,” he said.

Supporting the data-based UX, though, is the unmistakable retro vibe of the app’s UI. Much of what users will interact with feels like it came straight out of the 1940s, visually speaking. That’s because the team at Sid Lee’s Montreal office firmly believes that the best hockey team logos came out of the 1940s.

“We loved the older look in sports, and that’s the main inspiration in terms of design. We felt it was helping the design to be classy, have a sense of detail, and still have an edge. Those are nice to see, especially now in our digital age — it’s always refreshing to bring the old designs back to life. The sports design language now is all around performance, but, for our project, we were more focused on the emotional and cultural aspect of sports,” Tommy said.

Sid Lee’s overall goal was to experiment with the limitless possibilities of Adobe XD, seeing as how they’re using the app more and more in their client work, and their own team is fond of using it. The end result is a UI kit that’s a homage to sports and sports fans, which you too can use in your own sports-based prototyping projects.