Journey Into Imagination 💫

Rachel White

Recorded at JSConf US 2018

Get notified about Rachel White

Sign up to a email when Rachel White publishes a new video

I'm gonna put Figment up here since I'm
too short for the poor tech podium
anyway all right so hi everyone I'm here
today to take you on a journey into
imagination I think my slides just cut
out though can you confirm that okay
there we go
HDMI old MacBook it's fine cool so I'm
gonna tell you a little bit about me
first my name is Rachel white I'm the
developer experience lead at American
Express which basically means it's my
job to help improve the developer
experience of learning and interacting
with our API is internally so helping to
fix pipelines and make things easier for
our developers whether you are an
internal employee the one that are
building those or if you're an external
you know partner and you're wanting to
integrate with our stuff in addition to
that I'm also on the community committee
for nodejs
where we deal with the non code side of
maintaining an open source project so
things like evangelism
internationalization inclusivity the
node website etc etc and probably most
importantly I care a lot about the
creative thought processes especially
when it comes to programming so this is
going to be kind of a weird talk which
is nothing new for me but this one's a
little more cute than weird so as a
excited to use the sparkle transition
I've never gotten to do that before and
I felt like this was like the perfect
excuse to finally get to do it anyway
this is me I don't know how old I am
probably like under 7 I don't understand
children so I've been to Disney over 50
grew up near Disneyworld and I've been
going since before I could even talk I
have like some old home videos of me
when I was a baby and my aunt is holding
me and she's like Rachel look at look at
Mickey and my foots in my mouth
so but the thing that I really like
about it is the immersive experience
that you have while you're in the park
and the kind of escape from reality that
it provided it was always like really
thrilling and really exciting to me and
that probably correlates with my love
for Tiki bars I just like not being in
the regular world and whenever I
couldn't go to the park for a few years
and I'd visit again there would always
be something new to see thanks to the
Imagineers and I started thinking a lot
about the experiences that I had as a
child that helped shape me to Who I am
today professionally and realized that
Disney was a big part of it and while
yes I loved Disney World I'm gonna tell
you about the park that I love even more
and that's Epcot so I fell in love with
Epcot the first moment that I can
remember experiencing it which was in
the late 80s
Epcot stands for the experimental
prototype community of tomorrow
and there's two major parts of the park
the first one is the World Showcase and
dedicated to the celebration of human
achievement namely technological
innovation and international culture
it's also often referred to as the
World's Fair the World Showcase has 11
sections representing different
countries most people know about the
World Showcase because that's one of the
places that everybody that's over 21
goes to to get drunk in the Disney parks
but then future world is a variety of
pavilions that explore innovative
aspects and applications including
technology and science and so while I
could go on forever about all of the
things that I love about the park in
general we're going to focus on one
major part and that's the
imagination pavilion which is why
figment is here today and why I decided
to match so the imagination pavilion had
colorful and fun inside and encouraged
kids to be creative and adults
associated with the imagination pavilion
where the dream finder who is the non
dragon and figment who is the dragon so
the best part about the imagination
pavilion was a section inside called
image works and it lasted from 1982 to
1988 I was born at the end of 1985 so
I'm surprised that I can still remember
some of this there were things that you
could interact with like these step
tones where guests could create music
file by stepping on the different lights
and making different tones and then
there was also this coloring book thing
where you had paintbrushes and you could
like paint the colors and it all filled
in with light there were a giant touch
pin tables so you know like those things
that you can put your face into and all
the little metal pins it sounds gross
when you think about all the people
touching it but it was pretty cool it
was just really really fun and
encouraged you to like do things with
technology but creatively and inside the
imagination pavilion was a dark ride
which is what the rides and Disney that
are in the dark are called who would
have thought it was called journey into
imagination and the inspiration for this
talk is where I got the name from so
this one lasted from 1988 III until 1998
and in the ride the dream Finder
introduces himself and says he uses the
dream mobile to collect dreams and ideas
to create all sorts of new things so
then he creates a figment of his
imagination and I wanted to show you
some footage from that ride I found from
1996 so you can experience the same
thing I got to as a child because this
ride has had two other iterations after
it and they're bad they're really bad so
enjoy this video it's two minutes and
second so here we go
all right so one thing this video also
shows is that people have been taking
bad video since before cellphones code
so except it was just also like really
big and on your shoulder so after that
part of the ride you go through and
explore a bunch of different kind of
creative applications and they talk
about science too and they talk about
how scientists and like astronauts and
using your creativity you can be
whatever you want and how you know
creativeness can apply to anything it
doesn't just have to be like the arts
and I was like that's awesome
so the experiences that I had as a kid
with the imagination pavilion there's me
sure it's not the same one they look a
little different but and Epcot's
emphasis on technology and feeling
nostalgic for those moments of
exploration led me to do a lot of
research on the things I loved about the
park so the blend of the education and
the creative learning and I wanted to
know more about how they did it so I
started reading up more about the
Imagineers and I found this quote from
Walt Disney that says there's really no
secret about our approach we keep moving
forward opening new doors and doing new
things because we're curious and
curiosity keeps leading us down new
paths we're always exploring and
experimenting we call it Imagineering
the blending of creative imagination and
technical knowledge
so imagine years are responsible for
designing and building Disney theme
parks resorts cruise ships and other
entertainment venues at all levels of
project development so they do the rides
but they also do like the interior of
the restaurants to the menu design it's
everything everyone is an Imagineer
there's over a hundred and forty
different job titles that fall under the
banner of Imagineering including
illustrators art
engineers lighting designers show
writers graphic designers so all these
people that are multidisciplinary
they're all using the same principles
for when they create I read a few books
on Imagineering and I realized how
perfect it was for what we all do every
day so I know that not everyone likes
Disney and that's totally fine but I
think is the most important thing from
this is how successful and how adaptable
their model for creating is and that's
something to learn from
so why apply this to software you're
probably like okay this is this is for a
theme park but how can I possibly
utilize this in my day to day and I'm
gonna tell you don't worry I'm not just
rides all day although that would be fun
for me at least so basically from the
moment that you get in line for an
attraction at Disney the Imagineers know
how to keep you captivated and shouldn't
we be doing that for the people that are
using our code they're also responsible
for crafting your entire experience from
start to finish and making sure that you
stay engaged and wouldn't you want
someone that's reading your
documentation or going through your
demos to feel that way as well you don't
want to lose their attention in the
middle of the important things that
you're telling them so basically all of
the Imagineers go by these Mickey's Ten
Commandments and Mickey's Ten
imaginary named Marty Sklar and they
were from his experiences and learnings
early on in his 56 year career at Disney
and they're basically the basis for how
every imaginary tackles a project and I
think they're extremely helpful for our
own processes we talk a lot about
strategic thinking or thinking like more
technically and this is the opposite of
that they're all centered around the
experience of the Park goer so for each
of the Ten Commandments I'm going to
talk about Disney's reasoning behind it
and how I feel that we can all utilize
that with our own users and our own code
so number one is know your audience
number two is where your guests shoes
three is organize the flow of people and
for create a visual magnet 5 communicate
with visual literacy 6 avoid overload 7
tell one story at a time 8 avoid
contradictions maintain and tight
identity 9 for every ounce of treatment
provide a ton of treat and the easiest
one for me to adapt to programming keep
it up
maintain it so let's just jump right
into it for the first one know your
audience Marty Sklar wrote that how you
communicate and what you communicate is
totally influenced by who you identify
as your target audience Walt Disney
started out planning for Disney by going
to other amusement parks with his
daughters and sitting on a bench and
observing seeing what worked what worked
and what didn't and he didn't start his
vision for the parks without knowing who
he was making it for for us as engineers
it's also important to know our
audiences more well established projects
track metrics and behaviors of their
users but that's already people that are
using a product so what can we do to
plan before we even write a piece of
code if we have an idea for the end
result why don't we take a look at
similar projects or projects that you
aspire to be like how do the users
interact with it what could you possibly
do better so this can be something like
what languages do they support in their
api's or are we going to use NPM or yarn
and someone who does this Fanta
fantastically not someone a project that
does this fantastically is no BOTS so
the way that they cater for every single
skill level in their documentation makes
the process really fun and engaging so
if you don't know what you're doing it's
okay because they have the documentation
available so that you can find the
pieces that you need and piece it
together to like get what you need to
get done they're aware that a lot of
people that are using no BOTS or
venturing into hardware for the first
time so they make it easy for them to do
that but if you're somebody that's more
you know advanced there they have a
gator room where you can chat and harass
them in the in a friendly way to get
done this
number two is where your guests shoes so
in Disneyland early years Walt insisted
that every designer had to go to the
park at least every other week and stand
in lines to understand you know how the
guests were experiencing it so when
writing your documentation give it to
somebody else to try see if it's written
plainly enough and accessible to all
levels appeal to more than just the
Senior Programmer the more open you are
to all levels of skill enables more
adoption for your project more people
will talk about it and they'll encourage
more people to use it early on in my
career I dealt a lot with undocumented
code bases and documentation for
libraries that were too hard for me to
use because there wasn't a level of
thought and care put into it for the
user since then I told myself that I
make sure anything I have my hand and
making won't treat people the same so
here's an example of that this is this
is webpack a poor example of this in my
opinion is what webpack has on their
landing page webpack is a super
important bundler that a ton of people
use but I can't tell you the amount of
times that I've heard programmers say I
just don't get it or it's too hard so
it's that simple is really you know not
a great thing to say and I gave a quick
version of this talk at Brooklyn Jay s
as then I spoke as quickly as I could to
try and fit all of it in ten minutes and
I went over but at the end of it Jen
shipper came up to me and was like
Rachel stop being negative which is true
I should stop doing that but she also
told me that I should reach out to Sean
Larkin and suggest to change it because
it would be way better case study than
just coming up here and being like
webpack is bad so I messaged him and he
was pumped he was totally chill about it
he agreed with me they opened up a pull
request and her workshopping a better
title for that section so don't be
afraid to reach out to maintain errs
with suggestions for you know better
language in a project or suggestions for
any kind of improvements you're helping
them the next one is organized the flow
of people and ideas
so the important part of this is that
good stories and experiences have logic
and sequence that pay off for the time
this care into your documentation don't
just give code samples and call it a day
craft an experience for the users give
them a backstory on one you built the
thing and what you were trying to
achieve with its creation give them all
of the instruction in the tools that
they need to provision their machine
before even getting to the code that you
wrote include a section with a link to
commonly encountered errors or issues
that people have each step along the way
will set them up for success a company
that does this fantastically is Twilio
when you sign up for their services
during the signup process they ask you
what language is your primary language
and then when you're done with the sign
up and you're going to their projects
the things that you're looking up are
already there in the language that
you're looking for so you don't have to
go digging for it and that's great the
next one is create a visual magnet so
Disney has visual magnets throughout the
park and they draw you in from a
distance to a specific part so
Cinderella's castle the rocketship in
Tomorrowland spaceship earth and Epcot
they serve as a visual line but also a
point of reference for park goers so you
can coordinate meetup plans with these
visual targets and everybody knows what
you're talking about
so in programming one way that you can
do this is by being unique with your
demos create something exciting for
people to build while learning to how
while learning how to use your code
it'll definitely stick out more than
giving them a generic hello world or a
to-do list somebody that does this
fantastically is West boss the react for
beginners course you build a really fun
seafood ordering an inventory page it's
different and it like grabs your
attention and it helps explain props and
States super well it's one of my
favorite resources to use whenever I
need to go back and like refresh react
stuff which is all the time because I
have a terrible memory
um and I can associate the things that I
learned from him with each unique step
of the tutorial that I went through
which is really memorable and important
the next one is communicate with visual
literacy so Imagineers use a ton of
nonverbal ways to communicate in order
to be an effective communicator make
sure that you take advantage of the
nonverbal tools you have at your damat
your command so how is your
documentation is it all just sample code
what could you do in order to improve
the users experience so many people that
are coming into programming or coming
from non-traditional computer science
backgrounds or are changing their jobs
later in life they're coming in as
visual learners and they need diagrams
and drawings and cartoons two graphs
concept concepts that might be new to
them so use them and somebody who does
this great is Lynn Clark so Lynn's code
cartoons are super helpful and they
explain a lot of concepts really
visually and it just helps it make sense
versus reading an article about Redux
which who wants to do that so the next
one is avoid overload when Imagineers
take on a new project they learn as much
as they can about the story assignment
but then their second task is to reduce
all that to what's important so you want
to have a lot of information in your
documentation but you need to structure
it well don't just have one really long
page going to all of the information
surrounding the API break it up into
different parts one section for getting
started another for an API reference
another one for code snippets a company
that does this fantastically a stripe
their documentation is really clean and
you know where to go exactly where you
need to go for when you need it
they don't overload you with too much
information at the get-go and they don't
overwhelm you the next one is tell one
story at a time stick to the story line
good stories are clear logical and
consistent Disney invented the story
board in the 1930s which I didn't know
about before I started this research
which was cool and the whole point of it
is to create a story line that holds
together from end to end it's to create
a clear story that they can review with
anyone even if they're not involved in
the process and they'll be able to
understand it so storyboard your
documentation as well think of where you
want the user to start out and at the
and what knowledge you want them to come
out that they didn't have at the
beginning if it's just an API reference
that's one thing but for something more
technically written perhaps come up with
a scenario and tell it that way case
studies and user stories are also a
fantastic thing to use for this but was
that a double sign sorry about that
alright storyboard that was double okay
sorry about that
the next one is tell one story at a time
which I should have taken for this talk
cuz I just got confused um um oh wait no
I see what's happening that went double
okay here we go
keynote listen I worked on a Windows
machine for the last year and a half I'm
getting used to this again okay here we
go somebody that does this really well
is d3 so well not being the like
cleanest of the presentation of examples
they have a whole section of real-world
implementations of d3 being used which
is really helpful because you can see
the source and find parts that you can
implement into your own projects and a
lot of libraries don't take advantage of
this and it really is the easiest way to
show somebody implementations that they
can take and build off from to just get
started really quickly because sometimes
a working real example of code is better
than snippets that they can just piece
together the next one is avoid
contradictions details and the design
details of Disney's Main Street is
friendly and complimentary the City Hall
doesn't conflict with the Opera House
nothing is screaming out with you for
the graphics are equal in representation
you know where you are and the details
make for a really pleasant experience so
leave out the details of wants and
things that didn't work out in your
documentation keep only the positive
messages sometimes people explain
hardships that they experienced while
making something or something that they
wanted to do or didn't get to I'm guilty
of doing that before just leave it out
don't include negativity unless it's
something that you actually learned from
and there's a lesson there so one of
those good things is know to dues and
let's make some issues instead so people
don't want to get involved with your
project can see it and see the things
that need to get done and just don't
talk about the things that went wrong so
next is for every ounce of treatment
provide a ton of treat Disney educates
but they don't tell you that they're
doing so they let you discover and learn
but while being surrounded by fun and
excitement so I gave a talk last year at
Jay s coffee you about learning how to
program like insights before Stack
Overflow and hacker news where they
gamified knowledge sharing and how much
more fun it was then try and go back to
the feeling you had when you were first
learning how to code and the excitement
of learning something new and try and
add that magic and fun into your project
somebody who does this perfectly is
Saylor HG Amy makes these amazing and
fun cute super informative Xian's about
computer science concepts through
creative projects they're really
engaging and they keep you interested in
and the last but probably the most
important commandment is keep it up
maintain it disney is spotless and since
it's kept so clean the guests inherently
also keep it clean not wanting to
contribute trash to an otherwise
nice-looking area without thinking about
it you're wanting to find the nearest
trash can so that you don't contribute
anything bad to a spotless park the
rides are always well-maintained and
that takes a ton of effort if everything
wasn't functioning the way it intended
it wouldn't be the same Disney
experience so the same principles go for
our code maintain it pay attention to
the users don't ignore pull requests or
people that are eager to contribute
iterate as you learn more and make it
better and I know that's hard for a
really big project so just try and keep
that as a basis for everyone that's
involved to just like you know check in
every once in a while and see if there's
people in there that are wanting to help
so yeah check these things not saying
what project this is for it's big anyway
so basically what I'm trying to say is
a creative thinking process is
beneficial to technical material it
allows us to reach more people than we
would if we stick to dry documentation
with a lot of technical jargon putting
care and attention it in tracking all of
your potential users will make your
project better in the long run so a lot
of my research for this talk came from
this book which is one little spark it
goes over all of the 10 commandments and
tells you about how they apply to the
Disney parks and how Imagineers use them
in practice it's really interesting if
you want to check it out and if you like
what I had to say today or if you want
to yell at me I don't know you can find
me a couple places I am
oh-hoh on Twitter I've also been
streaming coding content on Twitch every
Monday Friday and Sunday at 4 p.m.
Eastern 1 p.m. Pacific we're starting
World War I I started with free code
camp so I started all the way at HTML
I'm gonna make my way all the way to
InfoSec which I know nothing about and
I'm just streaming to try and like show
other developers that vulnerability is
I had a test go wrong when I was trying
to write a horizontal rule tag and I was
like ok I know I know what a horizontal
rule is there's no way that there's
something wrong here and I had to live
like search free code camp test broken
and I was right and I was like I knew I
was right
I'm also going to be creating fun videos
on YouTube of programming and hardware
for non-programmers so like cosplayers
hobbyist stuff like that and I'm calling
both of these what the help because it's
cute and I'm also on drip which is
Kickstarter's like patreon like platform
this was journey into imagination I'm
Rachel white thank you