Designing Yahoo’s Winter Olympics Icons

Behind the scene of Yahoo’s PyeongChang 2018 Winter Olympics icons

4 min readFeb 16, 2018

--

You may have watched some Winter Olympics games that are happening in PyeongChang. I had a chance to work together with Yahoo to create their own version of the icon that they’re using on their platform now and I’m happy to be able to share my process a bit.

Oh, by the way, PyeongChang has their own awesome icon set — However, Yahoo decided to create their own set because they need the icon works in the small size (I’m talking 20px here).

Get to know the sports

Grew up without snow whatsoever, all my life, I have no clue about winter sports. 🤡 Let me be silly for a second, I didn’t even know winter sports exist, I mean.. who would’ve expected you can do such activity with such amount of snow, right?

Anywho…

The first observation I did was a thorough research where I watched lots of recorded 2014 Winter Olympics games to gain context for each sport. Not only this project is involving human figures, the icons have to be simple enough so it works on the small size and have to get the right pose to represent each sport.

Build the fundamental

Once I have enough understanding of the sport, I start to analyze the most extreme poses for each sport — with the goal to capture the common poses that are easy enough for our brain to make a connection between the pose with the sport.

Yahoo have a great Design System for human figure icon in place that I use and adjust a little bit to create a guideline of the proportion and simplified anatomy as a reference.

Capturing the pose

To give you an idea of the process, I’ll take snowboarding for an example. Normally it starts with a reference and I draw a bunch of icons very loosely and take the best options.

Depends on the sport, generally speaking, the best/memorable pose for our brain is when the athlete make an extreme/elegant move.

At this point, the client involved a lot in the process of discussion, giving feedback and validate my thinking behind why these are the best candidate for the final icon.

Quick tips:

Don’t work in a silo, keep the discussion going and get feedback often.
Start with low-fidelity and time-box your exploration time.

Style development

After we nailed the poses, Ryan (Design Director) emphasized the need for the icons to solve both utility and style with a distinguish characteristic. We shaped this style together and it’s a result of a great collaboration!

First draft is too monotone and not fluid. After a couple of iteration, Ryan mentioned about the fluidity we can achieve on the tapered leg (which is awesome).

We ended up by utilizing tapered leg and fluid shapes to convey the movement even better. We also utilizing the whitespace to give more clarity of the action. You can see how the style start to coming along on the figure skating icon(above). We use these same principles to all icons whenever possible.

Digitalizing

After I have the finalized sketch and Yahoo’s team is happy with the sketch, I jump to Illustrator and start digitizing them. Using almost the same technique when digitalizing typography and make sure every point are in the right pixel placement.

Sometimes adjusting small details like the tapered leg is an easier adjustment to do on the digitalizing process.

from left to right: Sketch on iPad, vectorized fill, vector check on grid placement

Final result

It took us 2 weeks to work together and complete this icon set. This icon set is currently being used in their search platform. I hope by sharing this process I can inspire some of you who love icon to start learn and make some icons.

Big props for Ryan McCullah to help art directing this project and help me throughout the process with some ideas and great feedback!