Designing icons

We have a team of 20+ designers at FanDuel, spread across 3 of our main offices, working on a variety of products and features — sharing the same design assets. Over the past year our team grew rapidly and our assets naturally followed, making it very difficult to track the latest version of a file.

FanDuel is a daily fantasy sports company, offering a multitude of one-day game options, the daily format gives users the flexibility to play without having to commit to the entire season.

Our iconography was no exception, a mismatched collection of styles and conventions that had organically grown to meet various design requirements, creating a visual inconsistency throughout our product.

With the design team already collectively working to improve the user interface, we needed to improve our iconography as part of this effort, so we set out to create a new suite of icons — with defined guidelines on expanding and maintaining them as a single resource — to put us in a good place going into 2016.

Formalising guidelines

This part of the process — like any design, was iterative. We spent a lot of time looking at other products and their iconography to figure out what we liked about them. Consistency was the foundation to our inspiration. Everything we were looking at felt like a set and it was clear that they were built upon well defined guidelines.

After many discussions and iterations, we defined these three simple guidelines:

1. Weight
   We looked at how the icons would sit in context, which for the most part was with text — in buttons and menu items. We decided a 1-pixel line weight was the best pairing and rounded the stroke caps and object corners, to give them a subtle softness.
2. Perspective
   We wanted to avoid the illusion of a light source or depth and to keep the drawing style clean yet robust. This gave them a two-dimensional appearance, which combined nicely with our relatively flat user interface.
3. Size
   The web application is where we display icons at their smallest. So that’s where we started — ensuring we only included the necessary details in each drawing. We set our baseline as a 17 × 17 pixel grid. We consciously chose to use an odd number, allowing any centred lines to sit perfectly in the middle of the grid. For example, a plus symbol:

We discussed many concepts and began constructing a few basic icons in Adobe Illustrator, to get a feel for what would work with our ongoing user interface refresh.

The most important aspect of this process, which we like to apply to any design task, is the sharing of ideas as early and as often as possible. The main benefit to sharing your work with other people (even if you don’t work directly with them) is that the end result is much more refined.

Research starts with a lot of logical thinking. If you put in the rational, conscious thought, which is the foundation, then the intuitive, unconscious solution seems to follow, organically.

— Lance Wyman

Solving the metaphors

It was important to us that the icons had a universal feel and would not require labels to identify what we were communicating, similar to how the AIGA developed its passenger/pedestrian symbols for transportation facilities (Designed by Cook and Shanosky Associates).

We sketched our initial concepts on paper, simply to get every idea we had in a single space, then looked for the common elements within groups of icons to reinforce the consistency and to formalise smaller conventions when expanding within a group.

Sometimes the right symbol would appear obvious. But again, the most beneficial thing to do when developing an idea is to share with others as often as possible — both to validate your thinking and perhaps gain a new perspective.

Testing

As the set of icons began to take shape, there were two things we would regularly test: rendering and the visual interpretation.

Starting with the rendering, we would first look at the symbols up-close using Illustrator’s pixel preview feature — to ensure we had the paths aligned to the pixel grid correctly, giving the icons the best clarity.

We then previewed the SVG files in various web browsers, across several devices, to get an idea of how they would finally appear. It also helped to view our icons on a range of screen resolutions, from old LCD monitors to more modern Retina displays.

Of course, the true test of a symbol’s design is to see if people can interpret it as intended. Speaking with other designers on the team was great as an initial screening. But the most useful feedback came from talking with people on other teams and even outside of the company — showing them the icons both in isolation and in situ was invaluable to our understanding of how others see symbols.

One example that we thought we had solved was a symbol for ‘transaction history’. The initial concept was to combine a clock and a wallet, as it seemed like a logic solution. Yet after showing it to a number of people, some saw a bed or ‘bed time’ and others just didn’t know at all. We realised that we had over-engineered the design. And since this icon would always be placed with a supporting label, a simple clock with an anti-clockwise arrow was a more appropriate solution.

Maintaining

Working in large teams split across many offices can be challenging. So part of our goal was to have a maintained single resource for our iconography.

We use GitHub to make sure anyone using the icons has the latest version. And we created a simple system to maintain the master file.

1.0.0 | Suite version
1.1.0 | Icon(s) added/removed
1.1.1 | Icon(s) edited/fixed

Using GitHub isn’t exclusive to our iconography. We use GitHub to maintain our entire user interface style guide and we have processes in place formalising any file changes or additions — so we don’t slip back into an unorganised collection of files.

GitHub can appear daunting if you’re not familiar with software development. But it’s essentially a file management platform that ensures files can’t be accidentally overwritten, and that multiple people can work on the same file simultaneously without conflict.

Learnings

We learned a great deal throughout this process, both on a technical level and visual communication understanding. A few of those learnings are:

• Trust your eye, not your software
  It’s very easy to assume something looks right if you’ve followed the guidelines correctly, but guidelines have their downfalls. Always take a moment to assess what you’ve created to see if it ‘feels’ right.
• Don’t be afraid to start over
  There were times during this process we thought we had finalised the full set of icons. But after reviewing and experimenting with them, we decided we actually needed to go back and tweak our guidelines to better meet our needs, which meant redrawing every symbol — and that’s ok.
• Share early, share often
  Talk with others and discuss your ideas — but don’t get attached to them. To truly solve the problem, it’s important to understand that people think in different ways and you can always benefit from refining those ideas with others.

As mentioned earlier, our iconography is just one aspect of our teams vision — as we work together to improve our entire user interface. We will continue to document our progress as we go.

Please feel free to follow our team on Twitter (@FanDuelDesign) to stay updated.