Config 2024: Taking flight: lessons learned on adopting Figma at United

Summary

In this discussion, Derrick Wilkinson from United Airlines and Jessica D. Young from One North share insights on migrating the Arion design system to Figma. They use the metaphor of a physical office move to illustrate the complexities of such a digital transition, emphasizing the importance of addressing both technical and human aspects. The talk highlights the strategic move to consolidate tools, the need for a well-planned migration, and the impact of a strong employee experience on customer satisfaction. It concludes with lessons learned and advice for successful adoption, showcasing the tangible benefits of a well-executed design system migration.

Takeaways

• 😀 The speaker Jessica D. Young from One North emphasizes the importance of collaboration between teams during a design system migration like moving from Sketch to Figma.
• 🤔 Common questions arise during a migration process, such as the duration of the migration, training for designers, developer involvement, timing, and sunsetting legacy tools.
• 🏢 Jessica introduces a metaphor of a physical office move to illustrate the complexities and the need to consider both big and small aspects of a digital migration.
• 📈 The story of a client moving to a new skyscraper highlights the importance of addressing employees' concerns, which can range from existential worries to small daily details.
• 🚀 United Airlines, led by Derrick Wilkinson, has a large-scale operation with over 100 products and 70 designers actively working in Figma, supporting a workforce of over 100,000 employees.
• 🛠 The strategic move to Figma at United Airlines was driven by the need to scale the design team to accommodate aggressive growth plans, including the addition of 200 new aircraft and 30,000 employees.
• 📚 The key decision for United's migration was to build out the Orion Library in Figma before starting project work, ensuring consistency and minimizing rework.
• 🔄 The migration process took 16 months and involved completing work on the rebrand, releasing Ryan 2.0, and managing ongoing UX work without disrupting operations.
• 🎨 Figma's flexibility with design system elements and modes feature allowed United to roll out brand updates subtly and let users switch themes when ready.
• 📝 The importance of employee experience in enabling customer experience is underscored, with anecdotal evidence of a positive customer experience reflecting the team's foresight.
• 📈 Jessica concludes with lessons learned, emphasizing the need for a detailed migration plan, communication, and the understanding that adoption won't be automatic.

Q & A

What is the role of Derrick Wilkinson at United Airlines?

Derrick Wilkinson leads the employee user experience team at United Airlines, where they design products that support airline operations.

What is Jessica D. Young's position at One North?

Jessica D. Young is the managing director of design at One North, a full-service digital agency and a certified Figma signature service partner.

What is the main topic of the discussion between Derrick and Jessica?

The main topic of the discussion is the process and experience of migrating the Arion design system into Figma, as well as the challenges and strategies involved in such a migration.

What common questions do organizations typically ask during a Figma migration?

Common questions include the duration of the migration, training for designers, involvement of developers, the best timing for the migration, sunsetting legacy tools, and general best practices for internal communication during the migration.

What metaphor does Jessica introduce to help understand the Figma migration process?

Jessica introduces the metaphor of a physical office move to help understand the Figma migration process, emphasizing the many moving parts and considerations involved.

What was the client's concern during the office move that One North had to address?

The client's employees were worried about the new office's structural integrity and the location of everyday amenities like Starbucks, which were not the focus of the new office features.

How does United Airlines approach the design of its customer and employee-facing products?

United Airlines has two Design Systems, Atmos for consumer-facing products and Arion for internal-facing products, and a dedicated UX team focuses on designing custom applications for its employees.

What was the strategic reason behind United Airlines' move to Figma?

The strategic reason for the move to Figma was to scale the team to support the growth and demand for future work, as United Airlines was experiencing aggressive growth with over 200 new aircraft and service.

What was the timeline for United Airlines' migration to Figma?

The migration to Figma took approximately 16 months, starting with building out the Orion Library in Figma and completing with the rebrand and release of Arion 2.0.

What are some of the lessons learned from United Airlines' Figma migration experience?

Some lessons learned include dedicating resources to the migration, having a detailed transition plan, sunsetting legacy tools, rebuilding components within Figma correctly the first time, and the importance of early and regular communication.

How did United Airlines ensure the success of their Figma migration?

United Airlines ensured the success of their Figma migration by being intentional about every step, focusing on the core design tool, and considering the broader ecosystem, including processes, people, and their daily routines.

Outlines

00:00

🤝 Collaborative Migration Effort

The video script introduces Derrick and Jessica, who represent their respective teams at United Airlines and One North, a digital agency. They discuss the process of migrating the Arion design system into Figma, a common challenge faced by many organizations. Jessica uses the analogy of a physical office move to describe the complexities involved in such a digital migration. The script highlights common questions about the migration process, such as duration, training, developer involvement, and the best timing for the transition. It emphasizes the importance of understanding the 'moving parts' of a migration and the need for effective internal communication.

05:01

🛠️ Scaling Design Systems with Figma

Derrick outlines the scale of operations at United Airlines, emphasizing the airline's commitment to customer and employee experience. He discusses the airline's two design systems, Atmos and Arion, and the challenges faced in scaling the design team to meet the demands of the company's growth. The decision to migrate to Figma was strategic, aiming to consolidate design, prototyping, and UI spec tools into one. The script details the timeline and milestones of the migration process, which included updating the Orion design system, incorporating a brand refresh, and managing ongoing UX work without disrupting operations.

10:03

📈 Strategic Migration and its Impact

Derrick provides a detailed account of United Airlines' 16-month migration to Figma, highlighting key milestones and the strategic decision to build out the Orion Library in Figma before commencing project work. This approach ensured consistency and minimized rework. The script mentions the successful completion of the rebrand, the release of Arion 2.0, and the ongoing use of Figma for new projects. It also touches on the subtle brand updates and the flexibility provided by Figma's library and modes feature, allowing for a gradual rollout of changes.

15:05

🚀 Lessons Learned from a Successful Migration

Jessica wraps up the discussion by sharing key lessons learned from the migration process. She advises dedicating resources, leveraging outside help, and having a detailed transition plan. The importance of sunsetting legacy tools and rebuilding components within Figma is emphasized, along with the need for early, regular, and frequent communication. The script encourages starting the migration process without waiting for a 'perfect time,' citing United Airlines' successful migration during a rebrand and system update. It concludes with the reminder that migration is not just a technical task but also involves operational and human elements, and the success of the migration is attributed to intentional and strategic planning.

Keywords

💡Employee User Experience Team

The Employee User Experience Team, led by Derrick Wilkinson at United Airlines, is responsible for designing products that support airline operations. This team's role is central to the video's theme of enhancing user experience through strategic design and technology implementation. The script mentions Derrick's leadership in this team as they navigate the migration of the Arion design system into Figma.

💡Design System

A design system, such as Arion, is a set of reusable design components that ensure consistency and efficiency in product design. In the context of the video, the design system is being migrated to Figma, which is a significant undertaking that impacts the workflow and output of the design team at United Airlines.

💡Figma

Figma is a cloud-based interface design and collaboration tool widely used in the design industry. The video discusses the migration of United Airlines' design system to Figma, which is a strategic move to streamline design processes and improve collaboration among designers and developers.

💡Migration

In the video, migration refers to the process of transitioning from one design tool or system to another, in this case, from Sketch to Figma. The script highlights the challenges and considerations involved in such a migration, including training, timing, and the impact on ongoing projects.

💡Digital Agency

One North is described as a full-service digital agency and a certified Figma Signature Service Partner. This term is relevant as it establishes the credentials and expertise of the agency in assisting with the migration process, providing insights and support to United Airlines.

💡Stakeholders

Stakeholders in the video are individuals or groups with an interest in the migration process and its outcomes. Jessica D. Young introduces a metaphor to help stakeholders understand the complexity of the migration, emphasizing the need to consider both the big picture and the smaller details.

💡Metaphor

The metaphor of a physical office move is used to illustrate the complexities of migrating a design system to Figma. It helps to convey the idea that, like moving offices, a digital migration involves more than just the core task; it also includes peripheral considerations that affect the overall success of the transition.

💡Customer Experience

The video emphasizes the importance of a good customer experience, which is enabled by a good employee experience. United Airlines' commitment to this is exemplified by their investment in design systems and tools like Figma, which ultimately aim to improve the customer journey.

💡Operational Groups

Operational groups refer to the various departments or units within United Airlines that are involved in the day-to-day running of the airline. The script mentions that the airline employs over 100,000 people across several operational groups, highlighting the scale of the organization and the importance of effective design tools for coordination.

💡Rebrand

The term 'rebrand' in the video refers to the process of redesigning the visual and sensory identity of United Airlines' products and services. This was part of the larger migration to Figma and involved updating the design system and brand elements to align with the company's growth strategy.

💡Internal Communication

Internal communication is a key aspect of the migration process discussed in the video. It involves keeping all team members informed about the progress and changes associated with the migration to Figma. The script mentions the importance of early, regular, and frequent communication to ensure a smooth transition.

💡Adoption

Adoption in the video refers to the process of designers and developers within United Airlines accepting and starting to use Figma as their primary design tool. The script discusses the importance of intentional efforts to facilitate adoption, including training, communication, and providing the necessary resources.

Highlights

Derrick Wilkinson leads the employee user experience team at United Airlines, focusing on designing products that support airline operations.

Jessica D. Young is the managing director of design at One North, a full-service digital agency and a certified Figma Signature Service Partner.

The talk discusses the collaboration between One North and United Airlines in migrating the Arion design system into Figma.

Common questions about the migration process include duration, training for designers, developer involvement, timing, and legacy tool sunsetting.

A metaphor of a physical office move is introduced to conceptualize the complexities of a digital migration.

The importance of considering both big and small aspects during a migration is emphasized.

A story about One North's client moving to a new skyscraper office highlights the apprehensions employees face during such transitions.

Research revealed that employees were more concerned about their new daily routines than the new office features.

A website was designed to address employee concerns and highlight the benefits of the new office.

The unexpected favorite feature of the new office was a chocolate milk machine, illustrating the power of small details.

United Airlines has two design systems, Atmos for consumer-facing products and Arion for internal products.

United Airlines' commitment to customer and employee experience is underscored by their investment in design and technology.

The strategic move to Figma was driven by the need to scale the design team to support United's growth.

Building the Orion Library in Figma before project work ensured consistency and minimized rework.

United Airlines successfully migrated 47 projects to Figma, leveraging the tool's flexibility and scalability.

The importance of a good employee experience in enabling a good customer experience is highlighted.

A LinkedIn post praising United Airlines' UX design went viral, showcasing the impact of the team's work.

Key recommendations for a successful Figma migration include dedicating resources, planning, sunsetting legacy tools, and effective communication.

The migration to Figma is described as a technical, operational, and human endeavor, requiring a holistic approach.

Creating an identity for the design system and associated swag helped rally the team around the migration.

Adoption of new tools requires intentional planning for communication, internal enablement, and training.

Transcripts

[Music]

all right hi everyone I'm Derrick

Wilkinson I lead the employee user

experience team at United Airlines where

we design products that support our

Airline operations I'm Jessica D young

I'm the managing director of design at

one North we are a full service digital

agency we are also a certified figma

signature service partner and today I'm

going to talk to you about how our teams

work together to migrate the Arion

design system into

figma so one North consults with a lot

of large Global organizations during a

migration like this and I always get the

same common questions at the beginning

some of you in the audience if you're

embarking on a figma migration may have

these as well I hear things like how

long will the migration take how should

we train our designers how should we

bring our developers along

when's the best time to make a move like

this how should we Sunset Legacy tools

like Zeppelin or sketch or XD and then

what about Legacy application

support how about General best practices

around internal comms during the the

migration or some variation of how does

everyone else do blank everyone's

curious how other orgs do that and as an

agency we sort of get an inside look at

that and so what has occurred to me in

all the these conversations is that

everybody's curious about what other

organizations are doing in a migration

like this and everybody struggles a

little bit with imagining all the moving

parts and pieces for something like this

so today to start our talk I want to

introduce a metaphor that I hope is

helpful to you in how you think about IM

migration and it might also be helpful

when you're talking with stakeholders

that aren't quite as involved um in a

digital effort like this so I want you

to imagine for a second we're not moving

something digital I want you to imagine

a physical move imagine your company is

moving from one office to another

imagine that you're packing up boxes at

everyone's desks you're putting in

keyboards and monitors pens pencils

that's sort of the core part of the move

but then there's a lot of tangental

related pieces you have to think about

once you get to the new office you have

to figure out the Wii you have to figure

out where you're going to go get lunch

every day where the new bathrooms are

there's a lot of moving pieces

and I think for a physical office move

like that maybe you've gone through that

it's easier to imagine I think this is

an apt metaphor because figma is all of

our virtual offices that's where we

spend all of our time day in and day

out and so I want to tell you a quick

story before I hand things off to Derek

um a couple years ago one North actually

had a client who was moving offices

they're moving to this skyscraper right

in the middle um is being built in down

Chicago where both of our headquarters

are and the client came to us and they

said we're noticing a lot of

apprehension from our employees people

are worried about this move and so they

enlisted our help to design and build

them a website that communicated all the

cool new features that these employees

would get to take advantage of um and so

it's things like you know we're going to

have a lot more space so we can grow

into all these new desks that we're

going to have everything was

state-of-the-art all the technology in

there they even had AI for their

elevators so that during the lunch rush

you weren't waiting extra long for the

elevator all this cool stuff so when we

started the project we started with

research as we normally do and we went

and talked with those employees and it

was really Illuminating as research

often is because while all these new

office features would be a benefit to

those employees once they moved in

that's not what those employees were

thinking about right now now they were

worried about other things other things

were keeping them up at night and so in

these conversations in these interviews

two themes

emerged the first question that came up

more than any other question will the

building tip over when I'm in it you can

see here it has this really it's sort of

an engineering marble it tapers down at

the bottom this long steel core um and

people were really worried about that

and then the second question where's the

clo is Starbucks so you have really

really big existential uh questions

keeping people up at night and then

really really small details and so what

we learned from this these conversations

were that all those cool new features

they would benefit the employees once

they were in the office but that's not

what they were concerned about right now

they were worried about what their new

daily schedule was going to be um you

know where their train step was where

the where they were going to get coffee

in the morning

and so we added content to the site we

talked to the engineers and The

Architects reassured everyone about the

structural Integrity of the building we

put an interactive map where people

could find the closest Starbucks so we

were able to solve for all that the

website launched the client moved it was

all a success and so then to wrap up

this project the one North team went to

visit the new office and I was asking

everybody what is your favorite part

about this your new office can anyone

guess what their favorite feature was

from that list that I showed you well

it's a trick question because their

favorite feature wasn't on that list it

was this chocolate milk machine that was

in the common kitchen area everybody was

talking about it have you had the

chocolate milk yet I did it was awesome

it like took you right back to middle

school and but it was another sort of

aha moment for us that these are the

little details that people can really

rally around and they matter I think in

the key in Dylan's keynote this morning

some of the smallest updates got the

biggest

Applause and so thinking about these

little details that Delight when I fly

on United Airlines I am

disproportionately excited when the

snack cart comes around and so for all

of you brave enough to sit in our

premium cabin today we have brought some

snacks uh that you might enjoy on on

your flight with

United so to bring this back to what

we're here to talk about when one North

consults with clients we advise them a

large migration to figma it has three

dimensions it's a technical operational

but also a human endeavor and you have

to consider things both big and small in

order to ensure a successful adoption of

that

tool and so I'm going to hand things

over to Derek now and we're going to

talk about three main things first Derek

is going to set this the stage for the

scale of what his team does at United

it's a it's a very very large

organization then he's going to talk

about their move to figma at a high

level took about 2 years so we only have

15 minutes and then I'm going to wrap it

up with some lessons

learned take it away Derek right thanks

Jessica United is incredibly committed

to delivering a good experience for our

customers United also understands the

role our employees have in delivering

that experience for our customers to

that end we have two Design Systems

Atmos for our consumer facing products

and a Ryan for our internal facing

products many of you are probably aware

of our award-winning mobile app you may

have used it when you traveled here we

have a very talented team that is

constantly adding new features and

improvements to our mobile app to make

the customer Journey a better experience

this commitment to a great experience

extends to our many employees and

operations as well as a result we have a

dedicated ux team Focus exclusively on

designing custom applications for our

employees the recent growth at United

and our investment in technology for its

Workforce has driven growth for our team

as well we support over 100 products uh

in

operations and we have over 70 designers

is actively working in figma

today United recently hit a milestone of

employing over 100,000 people across

several different operational groups it

takes a lot of people and a lot of

technology to run an

airline United has an aggressive growth

Plan called United next and recently we

have over 200 new aircraft and service

and have hired over 30,000 employees uh

the past couple years

a couple years ago we reached an

inflection point knowing the high demand

that was headed our

way and it begged the question how do we

scale our team to support all this

growth we knew that our existing setup

was not going to scale to support demand

for future work for all the future work

coming our way so our move to figma was

a strategic move that resulted in us

consolid ating uh from three tools for

design prototyping and UI specs to

one in addition to migrating all our

work from sketch to figma we also had to

complete our work in the next major

release of Orion our design system and

also include the uh United brand refresh

in those

updates we had to do all of that while

continuing to deliver ongoing ux work in

our current Port portfolio

and avoid any disruptions to employee

facing applications and subsequently

overall Airline operations at

United given our challenges with all

this parallel work we had to be very

thoughtful and very strategic with how

we went about our migration to

figma I know Jessica said two years but

it was really 16 months uh overall this

timeline looks like 16 months but I'll

break it down a bit to highlight the key

Milestones I think the most important

decision for us was really building out

our Orion Library in figma before

allowing the team to start using figma

for project work this minimized rework

later and ensured that all our project

output was consistent just as it was

with our previous design tool this work

took about four

months sorry once we completed the

library we invited the team to start uh

using figma for all new project work at

the beginning of

2023 and by October of 2023 we completed

work on the Rebrand and also released a

Ryan

2.0 and to date we have 47 projects

either started in or migrated to figma

we still have some Legacy apps that are

in sketch um but we don't have any

current plans to migrate some of them

because we're we're not really investing

in them or making updates but we do we

do keep sketch a sketch license should

we need to make minor uh incremental

updates to those

apps we wanted to show some examples of

our design system elements uh from Orion

for

reference and how they look applied to

real operational applications for

United most of the brand updates were

subtle but our figma library and the

modes feature really gave us flexibility

and how we rolled out these changes to

our users and applications letting them

switch themes uh when the time was right

for them uh for comp by

comparison uh the the up the brand

updates to the mobile app and united.com

all had to happen at

once our upfront investment and our

design system and building out the

library in figma has has really been a

force multiplier for our team and

allowed us to scale and continuing to

deliver highquality design work as I

mentioned we have 47 projects in figma

since the beginning of

2023 and that that would not be possible

without that early upfront

investment to reiterate I wanted to

state that at United We strongly believe

that a good employee experience enables

a good customer experience

thank you

D and so a lot of organizations say that

but I think it's another to invest in

your team that delivers that and I

wanted to bring you just a piece of

anecdotal evidence a couple weeks ago

Dereck and I logged on to LinkedIn and

they all these notifications because

somebody had posted about their

experience as a customer with United

Jeremy does not work for United he does

not work for one North he was okay with

me sharing his post uh in this forum

today um it it went viral I don't there

were 10,000 likes um but I want to

highlight the relevant part Jeremy said

okay I don't know who is in charge of ux

design at United Airlines but you need

to slow down you're making the rest of

us look bad fullon ux service ecosystem

and it feels like it popped up overnight

though I realize this is the culmination

of years of hard work and I think this

is evidence that the customer experience

benefited from Derek and his team's

foresight years ago knowing that they

needed to make this move to figma

because United was buying 200 new

aircraft and his team needed to scale to

support that and so I share this as

evidence that it works but also I share

this because many of you in the audience

you may need to make the case for that

investment to your stakeholders and I

hear people focus on like yes figma is

much better for the designer experience

yes we could probably get you some stats

around improved efficiency for the

design to Dev workflow but I think it

goes beyond that and this is proof of

that I think you need to tie the

investment to figma and your design

system to much bigger business goals um

things like scale customer experience

employee

experience so we're going to wrap up

with just a few Lessons Learned and

final

thoughts we wanted to share our key

recommendations if you're planning your

own migration we know every company is

different but we believe these lessons

are relevant for

all one dedicate resources to the

migration and consider leveraging

outside help to help you with guidance

and

bandwidth to make a detailed figma

transition plan uh have a plan for

sunsetting your legacy

tools and then three rebuild components

within figma all at once do it the right

way the first time rather than peace

meal number four communicate early

regularly and often when Derrick and I

were talking about why their migration

was so successful he was like well we

did all these things like lunch and

learns showcases demos they were

regularly giving people information when

they needed

it and number five start now don't wait

for the perfect time we shared earlier

the United team did this during a

Rebrand during the launch of Orion 2.0

all while keeping 100 products and a

major airline moving so if they can do

it you can do it too and the longer you

wait the more designed debt you're going

to

acrw so I want to bring this full circle

back to the story I told at the

beginning think about those two pressing

questions will the building tip over

where's the closest Starbucks um there's

a real human element in there and I I

see organizations focus on tactics and

new features and sometimes inevitably

adoption can stall a it and the figma

adoption is way more than just the core

product and so in this physical office

move example these two questions were

about more than just the four walls of

the new office this was about the

broader ecosystem this was about the

train stop nearby this was about the

building and so as you think about a

figma adoption of course focus on the

core design tool but then think about

things like fig Jam Dev mode and also

the processes the people and their needs

and their daily

routines one of the most fun Parts about

partnering with Derrick's team actually

had nothing to do with figma but we're

going to share it today anyways we were

brainstorming out about ways to create

sort of internal excitement and

enthusiasm around the migration the

Rebrand the release of Ryan 2.0 and we

said why don't we brand the the design

system so we created an identity really

quickly we made all this swag Derrick

and I are sporting some of it today um

and the team loved it every time we go

to visit Derrick at his office they're

wearing hoodies um and you just see this

sort of rally around the design system

and so for them like that's their

chocolate milk that's the little thing

that they're all getting really excited

about and so to close a couple uh final

pieces of advice you know adoption won't

be automatic their their adoption was

successful because they were really

intentional about every step of the way

so make sure you have a plan for comms

internal enablement and

training as much as we love figma

tooling won't solve your Comm

communication issues so have a plan to

update processes documentation things

like that and finally to reiterate

migrating to figma is a technical

operational and human endeavor and

dererk and I didn't do this all together

so speaking of the humans that made this

possible we want to thank the United and

the one North team that are all sporting

their or here today give them a round of

[Applause]

applause and thank you all for coming

have a great rest of the conference

[Music]