
Airbnb: Building a Visual Language, Behind the scenes of our new design system - kevinwuhoo
http://airbnb.design/building-a-visual-language/
======
enra
Author here. I also answered few questions on designer news:
[https://www.designernews.co/stories/69628--ama-karri-
saarine...](https://www.designernews.co/stories/69628--ama-karri-saarinen-
designer--creating-design-systems-at-airbnb)

------
ehmorris
Surprised they didn't develop something like this earlier, as part of their
rebrand (when they significantly redesigned the website and app.)

------
3stripe
As a digital designer, I can second this... hopefully Sketch or InVision will
make maintaining asset libraries easier in the near future.

"We initially tried to create these components as symbols in Sketch, which
resulted in a mess. Even now, our Sketch files are sometimes challenging to
maintain. Moving forward, we hope to find better ways of maintaining and
creating new components."

~~~
pgz
I agree, I really, really hope design tools and practices evolve more in the
direction of building a design language and components.

As a developer, it would make my life easier as well, when I try to split
designs into components / css.

------
redbonsai
Embarking on a similar process at my company, and hit a similar wall using
symbols in Sketch. They're great, but are a pain to maintain for a pattern
library project.

We had a breakthrough last week when InVision updated their Craft plugin for
Sketch to include Library [1]. Well worth a look, we've tried poking holes and
it's held up. Syncs seamlessly across Dropbox/etc and allows for on-the-fly
updates that go out to the team "magically". Requires education to make sure
our junior designers aren't accidentally updating styles cross-team, but
outside of that works as advertised. Very impressive for a v1!

[1] [http://blog.invisionapp.com/cloud-connected-design-assets-
li...](http://blog.invisionapp.com/cloud-connected-design-assets-library/)

~~~
enra
At Airbnb, we also started building the library with symbols but noticed that
it didn't work, at least before Sketch 3.5 or something.

In our case, we want that people can change the symbol sizes (eg. you need to
fit in more content in to a header). If you need resize or accidentally resize
something, Sketch would automatically resize every instance of that symbol.
That would kill your sketch for few moments and probably mess up your file
permantently (sometimes you couldn't undo the damage you had done.). So we
ended up putting the components in Layer Groups, and let people copy and paste
them.

Newer Sketch symbol support have gotten better, but I'm still hesitant to
change to it, since it seems something they haven't nailed down yet.

------
win_ini
TL;DR I like Airbnb but there's lots of poor experiences that affect 2 people.
Design is hard. I have experienced frustration related to the design of
Airbnb. I complain.

This seems really interesting. If it can help improve the Airbnb UI/UX - I'm
ALL for it. I've been hosting for over 5 years and travelling for 6 on Airbnb.
I like the 'voice' of Airbnb in general and love the company and service. Take
the following rant as feedback - because I've experienced the changes in your
app over the years. And some of them have driven me crazy. Also - every time I
have to call Airbnb or send in suggestions I say "I'm happy to speak with a PM
or designer about how I use the app/service" but never get taken up on the
offer (As a PM myself - I understand why) so this will act as my feedback
outlet :)

A challenge Airbnb faces is that many interactions on the site are SCARY. This
post from a few weeks back was really insightful about designing to address
users implicit fears of screwing up.
[http://product.hubspot.com/blog/designing-for-
anxieties](http://product.hubspot.com/blog/designing-for-anxieties)

The comments below are coming from frustration with a service that brings me
almost $30k each year and has opened new possibilities for my family (pre-
emptive note to Airbnb haters: my place is not in SF). I write this comment
from an Airbnb loft I'm currently staying at.

Still, to this day - I am occasionally shocked at how poor certain experiences
are within the app. Not just that - but as changes roll out - there are some
serious issues that just don't seem to be "thought about".

### New Features

The most recent example - I realize it is a beta feature - "Smart" pricing (I
use quotes because I would more likely use 'dumb'). Who thought it would be a
good idea to let a user shoot themself in the foot by allowing the combination
of Instant Book AND Beta 'Smart' Pricing together? Result: July 4th weekend
booked for less than half of what it was booked for last year (I suspect the
algo doesn't evaluate previous data for my property, whatever etc.) The result
is: I never trust ANYTHING about pricing from Airbnb. It is so consistently
off base, and I consistently get booked when I have prices twice as high as
the system suggests. The other result - an unhappy traveller I need to
apologize to. User Pain within Airbnb is sometimes doubled - because TWO
people are experiencing something shitty.

### Navigation on Web

What inspired he navigation pane on the left - and then the placement in the
top right corner of sub-navigation (ie: go to calendar, change the pricing) -
in non-differentiated colors so it conveniently blends in, in an area you
wouldn't expect as navigation?

### Incentives/Penalties

So, I need to cancel a reso because your system screwed up (this has happened
multiple times - most often because of an unclear or ambiguous UI) I get where
the penalties are rooted in - you need to punish cancellations, etc. However,
by not letting me get a new booking on those days that got canceled - my
incentive is now to basically wait on a reservation request from
HomeAway/VRBO/CL that is twice as much as the original booking - and THEN
cancel closer to their reservation date. That's bad dis-incentive. Bad
experience for me AND the guest.

### Help

I get it - Airbnb doesn't want people calling the support line. Have you ever
evaluated how many clicks people hit while they are looking for help and want
to contact a human (not even by phone, try to find where you create a case -
this has been improved recently). Then, the help is fragmented too. Oh, have
an issue that needs resolution go to entirely different place (oh, and no link
to the resolution page on the case submission page - another 8 clicks of
exploration). In fact I have navigated Airbnb before by using google to search
for the page I know existed in the app, but can't find it.

### Contexts

So, your iOS app has a handy - "Switch to Travelling Mode". I like. I don't
like that it is now completely inconsistent with the web version - as in, I go
to my dropdown menu and it shows new messages and has a "View Inbox" link,
then within THAT screen I have a toggle between travel and host mode. It
messes with my Mental Model of your navigation when alternating between the
app and the web. Either make an aggregated inbox on the iOS app OR have a
'host mode' on the web version for example. Since launching the app a while
back, having separate apps for distinct functions has become a 'thing' and I
could see that working out well in this situation too.

### Transparency/Clarity

I get it, Airbnb doesn't want to bring attention to the fees they charge both
me AND my guest. Showing the fee you extract doesn't make a user feel good.
HOWEVER - when I am making a deal with someone with a new price, Airbnb only
displays to me what fees _I_ will pay. If I tell someone, yes, I'll give $100
off: so new price is $300. Airbnb only shows MY total...so i click "Send
Offer" the guest receives it and it is NOT $300 - it's something like $326
because the fee charged to the guest is invisible to me as I adjust the price.
The UX does TRY to tell me on emails 'what the guest pays' \- but it's not
true: I only see what they pay BEFORE the fee is tacked on. Once again a
shitty experience for TWO people compounding the annoyance and crappy
feelings. Just show me in your neat little price calculator what the actual
total price my guest will end up seeing/paying. It makes me look like an idiot
otherwise. I send too many messages to guests saying "Sorry Airbnb has
confusing XYZ, this is why it happened...". Several have complained to me -
once I actually fiddled with my price to get it to the exact number a guest
and I had agreed upon. I had to send them special offers 3 times to get to the
right price, even then it was off by a bit.

### SuperHost One feature of the program is that "Superhosts get priority
support when they call Airbnb.". Ah, Shucks - that's so nice! I challenge YOU
to find Airbnb's phone number anywhere on the internets. For me - when typing
a search in Google for "Airbnb" \- the suggestion "Airbnb phone number" shows
up as the as item number 5, which leads me to believe I'm not the only one who
is frustrated. Pro-tip: @airbnbhelp works faster than submitting a case very
often.

As I'm sure you're aware - there is so much more to do!

I want to end on a positive note! Airbnb has:

\- courteous support people, they call back and are understanding. They feel
human. Not a cog in the machine.

\- The service has greatly improved its capabilities over time, I am actually
confident many issues above will eventually be fixed by airbnb - I appreciate
their iterative approach.

\- Opened new travel possibilities and enabled me to own a house where my
child can learn about, enjoy and appreciate the wonder of the outdoors

\- Design thought leaders and puts effort into their improvements - and is
shaking up the status quo.

Coolest Airbnb place I've stayed at: Tiny House in Redmond, WA. 320 sq ft. If
you go to visit Microsoft campus for a business trip - it's 8 mins from HQ:
[https://www.airbnb.com/rooms/3603003](https://www.airbnb.com/rooms/3603003)

If you've read this far, Thanks! If you work at Airbnb and want to chat about
anything regarding your service - hit me up.

------
imakesoft
Awesome! I'm a big fan of design languages and systems. Mobile & web designers
have had too much freedom during the past years. Some streamlining and
standards will only do good for the scene.

~~~
cel1ne
I keep repeating this lately :) : check out tachyons.css and react-native-
tachyons (the latter is a port by me)

It uses fixed scales for spacings, typography etc. which are relative to
rootfontsize.

~~~
fitzwatermellow
Thanks for the link to tachyons css. Was just searching for a modular system
exactly like this. Plus, great name ;)

[http://tachyons.io/](http://tachyons.io/)

------
hanief
Out of Topic: .design TLD is new to me. I wonder if new and obscure TLDs like
this will be familiar to non power-user.

~~~
overcast
People use search engines to find websites, no one types out URL's anymore.

~~~
bluedino
What about email addresses?

~~~
overcast
In the corporate world? Nope. Outside of that, people text each other.

