People Library

CASE STUDY

How might we expand our organization’s illustration library to represent diverse cultures, disabilities, lifestyles & more

Background

In 2017, we attended the Event Apart Conference in Arlington, VA, where we had the pleasure of hearing Michael Austin Sui speak about inclusive design. He’s a lead inclusive designer at Airbnb and he showed us examples of how they applied this practice into their digital space.

The end of his talk left us feeling inspired.

We felt compelled to dig deeper into this area of design when we got back to work.

How can we promote diversity and inclusion within the Navy Federal brand?

WHAT ARE OUR GOALS?

1. Expand our illustration language to represent the people who make up our members.

2. Depict different cultures, ages, body sizes, abilities, lifestyles, and more. We can experiment with new ways to represent a diverse group of people.

3. Illustrations should promote a spirit of collaboration and tell stories.

4. Create a kit that Designers in other departments, like Marketing, can use for their work as well.

Roles & Responsibilities

THE TEAM

3 UX Designers

5 UI Designers

MY ROLE

Concept Ideation

Strategy and Vision

Research

Visual Design

TOOLS USED

Adobe Illustrator

Adobe XD

DURATION

2 weeks

Process

1. Define Product Vision

ASSESSMENT OF CURRENT ILLUSTRATIONS

We took a look at how we were currently displaying our overall illustration style and branding.

Our previous illustrations lacked representation
We illustrated gender expression only through hairstyle options (not a lot of realistic details).
Skin tones were absent
We had a restricted color palette

We thought, wouldn’t it be great for our members to visit our website and relate to the images we depict?

USERS AND AUDIENCE

WHO ARE OUR USERS?

WHAT ARE THE PAIN POINTS FOR OUR USERS?

WHAT WILL OUR PRODUCT DO?

Customers and employees of our organization

Individuals are not represented

Build a better experience for ALL users and capture more market share

Understanding what problems we’re solving for users is key to product success.

RESEARCH

We started with research—fortunately, there’s a good amount of information out there!

We read material by Kat Holmes, Todd Rose, Frances West, and Laura Kalbag. Microsoft has an inclusive people library and clip art kit that we referenced as well. This research helped us learn more about this movement, and it also proved and disprived some of our assumptions.

Product competitors: we checked AirBNB library, Atlassian, InVision, Google, Microsoft

2. Design Collaboration

BRAINSTORM

We held a 2 week design sprint and opened this to UX Designers AND Visual Designers since our team has both groups.

We wrote a huge list on the board of different categories we wanted to make sure we included for our MVP

COLLABORATE & DESIGN

We allocated one illustration per team member. I designed the pregnant woman because I was pregnant at the time, so that attribute was near and dear to me.

Each designer shared their designs.

We picked a style that would fit with the Navy Federal brand

FINAL DELIVERABLE

We then had a few designers compile our MVP assets into a phase 1 people library

Each element matches up like a universal puzzle piece.

Pick a skin tone

Choose a Hairstyle

Choose from a variety of clothing and accessories

Choose appropriate arms and hands

They all fit together seamlessly to build one person.

3. Launch

Had other team members test the structure of our library and how we put the assets together.
We added our completed file to a shared file system so other employees could access our assets.
Got feedback from other employees to make sure we represented everybody.

SHARING ASSETS WITH OTHER TEAMS

We’ve created this library because we want it to be used on our public website. Being that there are many different design teams at our company, we had to figure out how to socialize this new library and express the importance of inclusion so that these other teams would actually use it. We took every opportunity we could to present at creative share-outs and talking to other designers and management directly.

Visual Mocks were a collaborative effort from our team including me, Alexa Gaul, Sarah Cho, Michelle Lana, and Benjamin Jordan.

Still to this day, people (even non-designers) reach out to us for this library so they can use it on our website and in internal documents and presentations.

Outcome & Impact

CURRENT USE

Currently used on NFCU's mortgage landing page

Used for the Navy Federal Financial Group's website redesign

Used in marketing materials such as emails, mailers, and even packaging!

MOVING FORWARD

Our library still needed other aspects of diversity like invisible disabilities or neuro- diversity

For our next phase we will focus on making our illustration brand more representative of the real world

We will continue to open up lines of communication within our organization, sharing assets between teams etc.

Have conversations with disabled people to see from their perspective so we don’t assume anything.

WHAT WE LEARNED

Promoting diversity and inclusion within our brand is a persistent and multifaceted effort

Getting leadership buy in is necessary

The process can never really be finished, but we are inching our way to something better.

We talked to fellow employees for feedback, but what we regretfully failed to do was include extended communities into our process. We should have included them from the beginning.