Config 2024: Taking flight: lessons learned on adopting Figma at United
Summary
TLDRIn 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
🤝 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.
🛠️ 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.
📈 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.
🚀 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.
Mindmap
Keywords
💡Employee User Experience Team
💡Design System
💡Figma
💡Migration
💡Digital Agency
💡Stakeholders
💡Metaphor
💡Customer Experience
💡Operational Groups
💡Rebrand
💡Internal Communication
💡Adoption
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]
Посмотреть больше похожих видео
Config 2024: From paper to pixels: why great ideas start on a napkin (Raphael Schaad)
The Art of Creating Great Digital User Experiences
No tenemos que cambiar la empresa para trabajar en la mejor | Manuel Suárez | TEDxUCHILE
Migration का हमारी Mental Health पर क्या असर पड़ता है? - BDK S3 EP12 - #zindagiwithricha
Webinar #7 - "Benessere digitale" con Monica Bormetti (Hacking Creativity)
Ditching My Web Host: Step By Step Plan - A WordPress Hack Story & My Unconventional Fix
5.0 / 5 (0 votes)