Airbnb: Building a Visual Language, Behind the scenes of our new design system
airbnb.design
airbnb.design
"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."
As a developer, it would make my life easier as well, when I try to split designs into components / css.
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...
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.
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
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
If you've read this far, Thanks! If you work at Airbnb and want to chat about anything regarding your service - hit me up.
It uses fixed scales for spacings, typography etc. which are relative to rootfontsize.
Pretty funny to hear this from a designer. Lets just kill individuality altogether and make every website and application based off of Material Design.