Creating illustrations for the Ticketfly iOS app

Jake
Ticketfly Tech: More Than Code
4 min readNov 1, 2016

--

While designing Ticketfly’s internal event curation tool, I had the opportunity to brainstorm and create illustrations for curated regions and cities in our iOS app. My illustrations act as cards for these regions and pair Ticketfly’s energetic identity with an icon from that area. If you haven’t checked out our app, download it and read about it.

Metro area list in the Ticketfly iOS app

How this all started

This project began when I was designing a product that allowed Ticketfly curators to select events to be featured for specific regions across the country. The curation service talks to the Ticketfly app and creates multiple collections of events that display as a metro area card list — shown above. You can view these collections by toggling between metro areas in our “Featured” list. We had the opportunity to delight our users with expressive, sometimes tongue-in-cheek imagery related to each location.

In hindsight, the key to nailing down these illustrations was to choose fitting imagery for each city, develop a bold & energetic visual style that could be aligned with our brand, and create playful color combinations.

Choosing content

Content for the illustrations was influenced by our bold, new brand. Read about the rebrand here. We avoided featuring standard monuments or buildings from each city. The goal was to create a balance of clarity and quirk, pushing the boundaries of what was expected for each region.

Content ideas — ranked by preference:

  1. Cultural references
  2. Music
  3. Monuments or buildings
  4. Sports teams

Process

A shared spreadsheet of ideas helped get the ball rolling. Asking coworkers for imagery ideas on their hometown helped avoid embarrassing mistakes. It also created an inclusive process— errbody could contribute!

I also dug around, searching the web for iconic examples from all featured metro areas. These helped inform our final choices.

Los Angeles, CA
Primary — Ice Cube
Fallbacks — Surf, Palm Trees, Hollywood Walk of Fame, Hollywood Sign, VW Bus, Fresh Prince of Bel-Air

San Francisco, CA
Primary — Cable Car
Fallbacks — Golden Gate Bridge, Alcatraz, Sutro Tower, Jerry Garcia, Computer Chip, Sea Lions, Coit Tower, BART, San Francisco Giants

Creating a visual style

Style was another interesting challenge. We were still defining and developing our internal pattern library in tandem with the rebrand effort— needless to say, our illustration & icon style was far from documented as well.

With the first versions, I was just scratching the surface with my illustration experiments.

First version of metro area illustrations

By the second round, I had a solid general direction. That said, content, style, and color still needed some work.

Second version of metro area illustrations

Third times a charm!

Evolution of Ice Cube — Los Angeles, CA illustration

Drawing Process

Many illustrations were traced or referenced from one or more pictures. Once the shape was formed, the illustration was manipulated and idealized into the visual style you see today.

Fallback imagery idea for Austin, TX — Bats under bridge
Primary imagery idea for Los Angeles, CA — Ice Cube

Choosing color combinations

Picking color was a fun part of the process. We moved away from muted, pastel-like colors. Picking bold and vibrant colors were an important decision. These new color combos almost vibrate at the seams, which represents the energy of the Ticketfly brand.

Comparison of color choices during the process

Final metro area illustrations

Illustrations started out flat and black, but changed to utilize the duotone style that represents the Ticketfly brand. Banded gradients helped to create depth and weight in each illustration.

17 illustrations for metro areas in the Ticketfly iOS app

Moving Forward

As more metro areas get built out, more illustrations for those areas will be needed. We continue to curate and hand-pick the best events for fans, listeners, and concert goers, which will rely on this illustration process. We do have plans to curate personalized event recommendations algorithmically, at which time we’ll definitely need a more scalable solution.

Since the launch of the iOS app, we were able to apply the fundamentals of this process to a working illustration style guide for Ticketfly design. This allows us to foster collaboration across the company and see this style come to life everywhere. Best part: no bottle necks for running illustrations through one person. We will continue to test this style and adjust the guidelines.

Stay tuned for an article related to Ticketfly’s illustration guidelines.

Special thanks to the superwoman, Lauren Kish, for helping out with this project.

--

--