[MUSIC PLAYING]
DOUG STEVENSON: Hey, everybody.
Welcome to MeetFirebase where you can meet the Googler that
make Firebase happen.
My name is Doug Stevenson.
And on the show with me today is Ali Berlin Johnson.
ALI BERLIN JOHNSON: Hey, everyone.
DOUG STEVENSON: So thanks for joining me on the show.
ALI BERLIN JOHNSON: Yeah, thank you.
DOUG STEVENSON: So tell me, Ali, what do you
do with the Firebase team?
ALI BERLIN JOHNSON: So I'm on the Firebase UX team.
And I do a whole range of things related to user experience.
So I do some visual design-- so illustrations,
making sure things are pixel perfect,
using the right colors, as well as interaction design, which
is how the user is actually interacting with the interface.
So our team deals with anything the user might be
interacting with or touching.
So everything from the marketing website to our Firebase
console.
DOUG STEVENSON: I have a lot to ask you about that later.
But first-- I'm really curious-- where are you from?
ALI BERLIN JOHNSON: I'm from Minnesota.
I also lived in Wisconsin for a little while.
So I grew up childhood in Minnesota,
moved to Wisconsin in high school,
and went to college there as well.
DOUG STEVENSON: Tell me, what's something
interesting about where you grew up?
ALI BERLIN JOHNSON: So Wisconsin is known as the Dairy State.
We have lots of cows.
People argue that California is where the happy cows are.
You'll get some strange faces from people
if you tell that to someone from Wisconsin.
But I actually can't eat dairy at all.
So I got the joy of going to restaurants a lot
and asking if something had dairy in it
and getting the response of like, you're in Wisconsin.
It's the Dairy State.
Of course it has dairy in it.
DOUG STEVENSON: That must have been
frustrating to not be able to have the best of what
your state has to offer.
ALI BERLIN JOHNSON: Yeah.
DOUG STEVENSON: That's too bad.
So I understand you've been drawing since a very young age.
Could you tell me about that?
ALI BERLIN JOHNSON: Yeah, so my whole family
is rather creative.
My mom minored in art.
My brother went to art school.
So we always grew up drawing, painting, coloring,
having art supplies around.
So it's part of how I grew up.
DOUG STEVENSON: So I understand you took that
into middle school, and you had some interesting projects
there as well.
Could you tell me about that?
ALI BERLIN JOHNSON: Yeah.
So actually, I'm a self-taught developer.
And I started in middle school.
So I was a member of a Harry Potter RPG website online.
And we could decorate our common rooms--
I was Ravenclaw-- to look like a common room.
So that's when I started first learning CSS.
I also played with flash animation.
So first, just drawing, because I
liked how it made the lines smoother compared to MS
Paint or something like that.
But I also started then figuring out
how to make games or little interactive things,
even if it's a Play button on a little animation.
DOUG STEVENSON: But in college, you
majored in biomedical engineering.
But then you changed to design.
Tell me about that.
ALI BERLIN JOHNSON: So a lot of people
think engineering is way over here
and design's way on the other side.
But they all have the base of the same thing,
which is problem solving.
And so I just realized after graduating and working
in biomedical engineering for a little while
that the thing I liked the most was more
these aspects of design and creating a product
or fixing a problem.
And I've always liked doing art.
So like I said, I've been drawing since I was little.
So just kind of seemed obvious to go into design
for visual and interaction type stuff.
DOUG STEVENSON: So I understand that you've
done some apps of your own.
And I have one here on this phone called Happy Cloud.
And so if I play Happy Cloud-- if I shake the phone,
he gets really upset.
And then if I tap the phone, he gets happy.
And it says, "Happy Cloud is happy," which is nice.
Then if I shake it again, I make him upset again.
ALI BERLIN JOHNSON: Don't make him sad.
DOUG STEVENSON: I just did make him sad.
I'm sorry.
So tell me a little bit-- what was it like to make that?
ALI BERLIN JOHNSON: I made that during a Firebase experiment
week.
So basically, every once in a while,
we have a hackathon or experiment week
to either try out our own features
that we're making for developers--
become the developer yourself-- or to learn something new.
So I usually take it as a time to take a part of development
that I've never done before-- so in this case,
I had never made an Android app before--
and see what it's like, because it's really important if I'm
helping make a product for developers
that I understand what it's like to be in their shoes.
DOUG STEVENSON: So you actually learned some Android
development with this.
And you learned about Firebase, because I
guess it's hooked up so that other people who are playing
this could also see each other's Happy, Sad Cloud that they've
made.
ALI BERLIN JOHNSON: Yeah, it uses the real time database.
So if we're both playing it, they
update on both of our devices at the same time.
DOUG STEVENSON: Oh, that's pretty cool.
One thing that you like that we talked about
is you play this game called Quick, Draw.
And it's a Google game.
Could you call it a game?
It's more of a web app where you can go
and it will tell you to draw something on screen.
And then Google will try to guess what it is.
So it's using machine learning.
So we have some video of you playing.
So what is it like for you to play that game?
ALI BERLIN JOHNSON: It's like Pictionary,
but you're playing against a computer.
And the whole time you're driving, it's being like,
it's a fire truck.
It's a lightning bolt, or something.
So it's guessing the whole time.
So it's interesting to see how it's guessing your in-progress
drawing as you go on.
It's also interesting as it's learning off
of everyone's drawings.
So depending on how you draw, you
may think it really looks like whatever you're drawing.
DOUG STEVENSON: Now with the Firebase team,
you work on the UI and the UX of the Firebase console.
So what does that involve day to day?
ALI BERLIN JOHNSON: So a lot of what I work on
is design patterns.
So I work with the team of designers
we have on the UX team.
We have designers working on all the different features.
And we need to make sure that these features all
feel like one product.
So that's one of the biggest things about Firebase
is it's not just one thing.
It's all these things put together.
We want to make sure that remote config feels
similar to database, and it feels really cohesive.
So working a lot with everyone to make
sure we're using the same kind of patterns and UI elements--
I also do feature work, so mainly
focusing on the developed pillars,
so the back end of the service features.
I also get to do some more visual design related things,
so sometimes illustrations and stuff like that.
DOUG STEVENSON: Yeah.
So it sounds like you've had a pretty big impact on everyone
who's using Firebase.
So they've probably seen something you've done,
even if it's as simple as just logging into the console
or something deeper in one of the features.
So it turns out, you also designed the Firebase logo,
I understand, which has ended up everywhere now.
It's on my shirt.
It's on this mug.
It's on the picture behind you.
It's on this button.
So we had those printed up for when we were in Asia.
And I also had it put on this shopping bag.
So do you know what I call this?
This is the Fire sack.
And you can keep the button.
That's for you.
So tell me, what was it like to go through the process
of developing this icon?
ALI BERLIN JOHNSON: So it was a very collaborative process.
As you can imagine, a lot of people within Firebase
are going to have feelings about what
should be the visual representation of our product.
It also is a little more complicated
when you're taking something that used to be an existing
project and merging it into something that has
to fit within a broader brand.
So before Firebase was on its own,
it was like a little Firebase that was made of fire.
Not only did that not really represent Firebase [INAUDIBLE]
well, but now we have to turn it into something that
fits within the Google family.
So it was working with product people,
working with the Material Design team,
working with the other designers on my team
to come up with something that still felt like Firebase,
still had fire.
But one thing I kept always saying is, we need happy fire.
We don't want scary, burn-your-house-down fire.
It needs to be a happy, little flame.
DOUG STEVENSON: So it sounds like there
was some balance there.
It has to be material-like.
It has to have its own identity within the Firebase platform.
And I imagine it was hard to choose from among all
of these different varieties.
Tell me about some of these varieties.
There's a three-prong flame.
There's a two-prong flame.
There's all these different varieties.
Tell me about how that worked out.
ALI BERLIN JOHNSON: Yes.
So when I started, I just tried to come up
with as many different ideas as possible and then always
thinking, what would make a successful logo for Firebase?
So one thing, we knew we wanted to keep the warmer
fiery colors, since fire is in our name.
So we can't ignore it completely but also
make sure, like I said, it wasn't scary fire.
It was a happy, little flame-- something guiding,
like a light to guide you to make your app.
So yeah, we tried a bunch of different variations.
I also even did some folding paper studies in the beginning
to get in the groove of material,
because it's really based on physical materials and paper.
DOUG STEVENSON: Yeah, it does look like an origami kind
of a thing.
But I think we picked the right one.
I can't imagine it any other way.
Speaking of drawing stuff, I have a game for us to play.
It's a drawing game.
So our producer will give us some things to draw.
And then we'll have 15 seconds to draw it.
And after the 15 seconds, we'll compare.
And then you can see which picture you prefer.
Now I suspect I'm not going to do very well at this game,
since you're the professional drawer.
I think Nate may also have something
to contribute to this.
Let's go ahead and play.
So let's get our tablets out.
SPEAKER: All right.
Ready?
First, we have soup.
ALI BERLIN JOHNSON: What?
DOUG STEVENSON: Soup?
SPEAKER: Yes.
DOUG STEVENSON: OK.
Ready, set, go.
[TIMER TICKING]
[TIMER STOPS]
DOUG STEVENSON: Oh, that's time.
What did you get?
ALI BERLIN JOHNSON: I even included a person who's
excited to eat their soup.
DOUG STEVENSON: I see that.
I made a cup of soup.
And it has alphabet soup.
That's why there's an A and a B in there.
SPEAKER: Cool.
Ready for the next one guys?
Developer.
ALI BERLIN JOHNSON: Oh, god.
DOUG STEVENSON: I don't know what a developer looks like.
ALI BERLIN JOHNSON: Mine's awful.
DOUG STEVENSON: Oh, boy.
What does your happy developer look like?
That's right.
I think mine actually might be a little bit better.
I don't know.
They're both pretty awful, though.
ALI BERLIN JOHNSON: Clearly everyone types like this.
DOUG STEVENSON: Actually, I knew a developer who did.
He was a two-finger hunt and pecker.
And he was fast.
SPEAKER: The next item, we have camera crew.
DOUG STEVENSON: Camera crew.
[TIMER TICKING]
[TIMER STOPS]
This is not flattering for our camera crew, I have to say.
ALI BERLIN JOHNSON: Mine's a very rough sketch
of what's right in front of me.
DOUG STEVENSON: Oh, really?
I just put a couple dudes' heads behind cameras,
because that's all I see is just dudes' heads behind cameras.
SPEAKER: Next item, Google I/O.
DOUG STEVENSON: Google I/O-- let's go for it.
[TIMER TICKING]
[TIMER STOPS]
DOUG STEVENSON: What did you draw here?
ALI BERLIN JOHNSON: The stage--
DOUG STEVENSON: You drew I/O.
ALI BERLIN JOHNSON: --with the I/O logo on it.
DOUG STEVENSON: That's very good.
Since I was very in tune with the I/O event last year,
we had tents out.
So I drew a tent with the Firebase thing and people
inside there.
And I don't know what that box is.
ALI BERLIN JOHNSON: Nice Firebase logo.
DOUG STEVENSON: It's hard to do with your finger.
What did you get, Nate?
Have you been to Google I/O?
Oh, nice.
SPEAKER: All right.
We've got the next item. [INAUDIBLE] draw Nate.
DOUG STEVENSON: Nate.
[TIMER TICKING]
[TIMER STOPS]
DOUG STEVENSON: All right.
ALI BERLIN JOHNSON: I'm ashamed.
DOUG STEVENSON: That will be fun.
ALI BERLIN JOHNSON: I'm ashamed of mine.
DOUG STEVENSON: Well, what'd you get?
Very nice.
Ours is roughly equivalent, I would say,
except I'm [INAUDIBLE].
ALI BERLIN JOHNSON: I couldn't find the eraser.
DOUG STEVENSON: All right.
Well, good job.
Nate, did you draw yourself in this one?
Beautiful self portrait.
Good job.
Thanks for playing, Ali.
ALI BERLIN JOHNSON: Yeah, that was fun.
DOUG STEVENSON: And for everyone at home,
be sure to chime in on the comments to say who you thought
did better.
I'm sure it wasn't me.
Well, that's all we have time for.
Be sure to check out Ali's work on the Firebase console.
And also, follow her on Twitter.
Now be sure to subscribe to the Firebase YouTube channel
to get updates on all our video content.
Thanks for watching.
See you next time.
[APPLAUSE]
[MUSIC PLAYING]