Design Systems

& Illustration

As manager of Design Systems and Illustration, I led a multidisciplinary team of systems and product designers.

I have extensive knowledge of developing team strategies, processes, and roadmaps that align with company goals but allow for individual and team growth.

The work below reflects my visual and strategic direction as a creative lead at Grubhub.

Design Systems

Strategy, Adoption, and Implementation

As the design system & illustration lead, I assessed the needs of the business and how design libraries aided in the execution of top company priorities. 

Collaborating with my Director and PM, I created a design team strategy that aimed at increasing adoption by:

  • Creating a smoother intake process for new systems & illustration requests.

  • Developing a team roadmap that aligned with internal stakeholders.

  • Increased communication and peer reviews with designers and developers.

Revisiting our team workflow and process allowed us to effectively communicate team priorities, feature updates, and upcoming work while setting realistic expectations with stakeholders.

Below is a sample of the work explored and completed during my time as lead. 

Notable Design Systems Projects

Implementing Material Icons

Using Google’s material library, we “standardized” our approach to utility icons, reducing the efforts of in-house designers while being intentional about our true branding opportunities.

System Enhancements

The ongoing review and maintenance of our design system was critical in making sure designers were armed with the most up-to-date assets and resources.

Color Exploration

The global color palette is the foundation for all things color-related at Grubhub. Flexible but restrained, the team’s aim was to create a palette that is both intentional but also optimizes accessibility.

Improved Documentation

The team regularly reviewed guidelines, rules, and best practices to ensure our design system was consistent, high-quality, and on-brand.

Components

Creating robust, stable Figma components ensured that the designer and developer's experience using Grubhub’s design system was as effective as possible.

Design Org Education

Designers who understand our libraries and how to access them drive adoption and allow for the design organization to move with a more consistent and aligned product experience.

Additional Illustrations in library

Illustration

Illustration Library Refresh

illustration: Rehana Kahn-Tarin

In the summer/fall of 2022, I worked closely with my direct report and product illustrator Rehana Kahn-Tarin as well as the diner and product teams to redesign the illustration library used throughout Grubhub’s native and web platforms.

The introduction of convenience on the Grubhub platform created an opportunity for us to look at the existing illustration library and how it could be improved to create a more cohesive and inviting experience for end-users.

The Challenge

While the previous illustration library was functional and comprehensive, it presented several issues around accessibility, readability, and cohesiveness. Icons varied in size, were too detailed, and lacked the kind of approachability we were looking to create for users of the platform.

This presented us with both a challenge and an opportunity to overhaul the illustration library.

Illustrations Prior to Update

The Refresh

The overhaul of the same illustration library is an exploration of intentional color palettes, thoughtful gradient use, reduced detail, and a way of orienting icons that allowed for uniformity throughout the library.

The refactored library is a vibrant and exciting range of illustrations that feel appetizing, light-hearted, and easy to read.

A few other takeaways:

  • This effort started with Grubhub’s push into convenience and resulted in over 100+ illustrations being refactored or created (spot illustrations, icons, member benefits).

  • Detail density was considered throughout this process to ensure we were providing illustrations that align with product goals and requirements.

  • The icon orientation allowed us to create more real estate on both mobile and web platforms, giving users the ability to see more options

  • Illustration guidance and how best to work with the Illustration team was created during this same time, to ensure designers were using our libraries correctly and partnering with product managers to create requests when new items were needed.