AMA: Karri Saarinen, Designer - Creating Design Systems at Airbnb

10 months ago from , Principal Designer at Airbnb

Hi everyone. I’m Karri Saarinen, a Finnish designer and developer living San Francisco.

In the past, I’ve worked with early stage startups, was a partner in a agency, co-founded Kippt & Inc (Y Combinator) and lead design at Coinbase. I co-started Rails Girls, a non profit for women & girls to get inspired about tech.

I’m currently working at Airbnb. Recently, I was involved in creating the new design language and building a component based design system around it. You can read the summary of the process on our design blog: Building a Visual Language Behind the scenes of our new design system

You can also experience it on our native app update and there also a previous discussion on DN.

You can also find me on dribbble, instagram and twitter as @karrisaarinen.

I’m happy to answer any questions you have about startups, YC, design systems, SF or anything else really :)

I’ll join in Tuesday around 12noon pacific and continue answering though out the day.

29 comments

  • Darin Gordon, 10 months ago

    Are there plans to lead in the open source design movement? Groups such as those from SalesForce have open sourced design systems (lightning design system). This is valuable for bootstrappers who are without the resources to create their own.

    0 points
  • Sam Beaudin, 10 months ago

    It would be really cool if Airbnb opened up their design system (share the .sketch or .psd file) so that we could all see how you're structuring it.

    0 points
  • Stephen Burgess, 9 months ago

    Karri,

    Thanks for opening up the figurative floor for questions!

    When both a design system and development is happening at the same time, it's hard to balance between the two. In a situation where UI elements are being developed for the first time, there may not be an existing library off of which to base a design system. However, using a design system early in development seems like it could be especially helpful. At an early stage in a design system's life, does it pay to do intensive planning? Otherwise, is it better to develop and evolve the design system in concert with that process? Thanks,

    Stephen

    0 points
    • Karri Saarinen, 9 months ago

      Hi Stephen,

      I think it’s definitely a challenge to try to build the system at the same time as product work is happening. In our case, we kind of tried to minimize it by doing and releasing the system in a short timescale (months).

      However, I think is entirely possible and overall easier approach to just build the system over time, and understand that there will be an transition period, where certain things are in the system, and some are not. If you can just get all the new experiences created using the system, over time you should be in a good spot.

      If I would design a new product own my own, would a build a design system first? This is actually a question I’ve been thinking about as well. In a way it’s like a chicken and egg problem. It’s hard to create system if you don’t know what you’re building, and it’s hard to define the system after you have already build a lot.

      After design and building several products, I do now see value of defining a simple system early on. Just even to restrict yourself. I’ve personally spend countless of hours of tweaking margins, types and color, trying to come up the best possible view for an app I can for an app. While do think craft and pixel perfection is important, in the end it won’t usually make or break your company. The wholistic experience and the value you can create to your users always trumps the pixels.

      Most likely I’d try take some hybrid approach. Once I would have general idea of the style and structure of the app, I’d start defining basic things like spacings, type sizes, colors. Are there certain patterns and parts that could be re-used? Name them and define them. Rinse and repeat and try to stick to the system you created, so you can use your time for thinking about other things.

      0 points
  • Szymon Gorski, 10 months ago

    Hi Kieran!

    How was your day?

    I got a few questions - ready - steady - go!

    airbnb it is a big community - definitly - and all design details are super important. How many tests you made before launched current version of website/app? (in meaning of A-B testing) Or maybe you always try to check something new and you testing all the time? Could you tell something about testing while working on that big project with that huge base of users like airbnb?

    I have an idea for app - but I think it's could be useful to make mobile app and website - responsive of course. What do you think - it there sens to make two almost the same projects - one for web and one for mobile app? Is there any extra super profits in that case? We got 2016 - what I should design first? App + simple website or maybe website and next try to design app with no rush?

    What is important when you work with that big base of users like airbnb (except UI/UX)? Maybe do you have some protips for designers - how to reach out for users or how to keep them close? I mean something like "oooh, always try to put little kitty everywhere" ;)

    Take care! S

    0 points
    • Karri Saarinen, 10 months ago (edited 10 months ago )

      Hey Szymon,

      I'm great, thanks!

      airbnb it is a big community - definitly - and all design details are super important. How many tests you made before launched current version of website/app? (in meaning of A-B testing) Or maybe you always try to check something new and you testing all the time? Could you tell something about testing while working on that big project with that huge base of users like airbnb?

      I don’t have an exact number, but we definitely tested a lot, almost on weekly basis. We have excellent researches that come great plans, and summarize what the results mean. We often test with users onsite, and we can also run experiments on our apps. Generally we always still try to think what we want to design or improve. Testing or research, is always tool we can use, but cannot provide us all the answers.

      I have an idea for app - but I think it's could be useful to make mobile app and website - responsive of course. What do you think - it there sens to make two almost the same projects - one for web and one for mobile app? Is there any extra super profits in that case? We got 2016 - what I should design first? App + simple website or maybe website and next try to design app with no rush?

      I think it depends at lot on your app and your resources. Often websites are a great way to test the interest in general. You can come up with a simple launch page, that describes the product, and asks to people to sign up for beta. That way you can see if there is any interest on what you are building. This kind of testing is much harder or often impossible to do on mobile platforms.

      If you have the skills or resources, designing and building an app can work well too, but it can be more risky path.

      What is important when you work with that big base of users like airbnb (except UI/UX)? Maybe do you have some protips for designers - how to reach out for users or how to keep them close? I mean something like "oooh, always try to put little kitty everywhere" ;)

      I think one thing we try to keep in mind that Airbnb is used in many countries, by young and old, and with varying levels of technical skills. We make the product accessible to all of these people.

      Another thing we do is to try to be more human. We have great content folks, that help us create clear and friendly messaging. Simple things like instead of saying “Rate your trip” we ask “How was your trip?”

      1 point
  • ivan volcaivan volca, 10 months ago

    Hi Karri,

    How do you as a team approach collaboration. What do you think increases collaboration across designers and product team in general?

    0 points
    • Karri Saarinen, 10 months ago

      Related to this system we created, we have seen it to increase collaboration. Designers, engineers and product people have a common language they. Also we have seen that designers are more eager to share and adopt solutions from other designers than before. I think it has shifted our thinking more towards boiling a system and experience together and away from individual projects.

      I always think that physical proximity helps too. Also giving opportunities to people learn from each other. Ask engineers to to design meetings. Encourage designers to learn about engineering. More we can emphasize and learn each others viewpoints the more I think we can work together and come up great solutions.

      0 points
  • Kieran RheaumeKieran Rheaume, 10 months ago

    Thanks for joining us today Karri.

    One can comfortably consider Airbnb a design-driven organization, and I'm curious to hear how this manifests into the company's working environment. In your experience, are designers at Airbnb given more representation/respect than at other agencies/product companies you've worked at? Do you find other disciplines (operations, marketing, etc.) adopting design principles across the company?

    Kippes!

    0 points
    • Karri Saarinen, 10 months ago

      Hi Kieran,

      There is definitely more understanding what is design and how it works that many other companies. I think this mainly since the 2 of the 3 founders are designers by training.

      I’d also agree that Airbnb is much more design driven organization. Design and exploration, is almost always considered the first step, and ongoing process, in any project we do. It’s not an after-though. We also pair the design with research, so we make informed decisions before we start building things.

      Design thinking, appreciation for craft, and storytelling is something that visible in our marketing, operations and even the keynotes we do. I think the office design has been also a way to communicate the design mindset. They really want make it feel a good place to work and collaborate.

      0 points
  • Tuomas Sahramaa, 10 months ago

    I've heard one of your strengths is giving feedback on other people's designs. Any tips/tricks on design crits for how to leave your fellow designers informed, inspired, and generally headed in the right/better direction?

    0 points
    • Karri Saarinen, 10 months ago

      Hi Tuomas :)

      And thanks, I'm definitely still learning how to give feedback to people.

      As being designer myself and getting this feedback, I try to think what I’d want in that position and what would be useful.

      1. If the designer doesn’t say, always ask first what kind feedback they want. Everything that comes to your mind might not be useful at that time. Feedback should be different in the beginning of the process (more conceptual) and trying to restrain giving very detailed feedback at the very end (something like fixing a margin).

      2. I try to consider the skill level and personality of the designer. Some people like very direct feedback, some people don’t. Some people need more context and reasoning, some people get bored by it. When I give feedback to more junior designers, and try to give the feedback that they can use and improve on.

      3. I also try to avoid giving direct solutions or prescribing how would I do it, but more framing them as questions “Have you considered doing it like this?”.

      0 points
      • Tuomas Sahramaa, 10 months ago

        Thank you sir!

        Asking them about the kind of feedback they want is an interesting move, it might give them a little bit of the power in the situation. Perhaps that helps their confidence and likely improves the quality of the conversation/debate, if they think you're truly invested in giving them the feedback that's most beneficial to them. Psychological safety seems important for the free exchange of ideas.

        I think it's really important that you consider each person carefully, and that you've taken the time to acknowledge and learn their feedback preferences.

        Keep up the good work -- pidä lippu korkealla!

        0 points
  • Matt Legaspi, 10 months ago

    On design systems:

    • How was this approach to design pitched and subsequently received by stakeholders?

    • Was creating Airbnb's design system a complete overhaul? -- or injected into a current state of the UI and slowly brought along?

    • Were there any noteworthy hurdles in setting up the teams to work this way? (design+engineering+management alike)

    Really appreciate you making yourself available like this. Cheers!

    0 points
    • Karri Saarinen, 10 months ago

      Hey Matt and thanks! To answer your questions:

      How was this approach to design pitched and subsequently received by stakeholders?

      I can’t answer this fully, since I wasn’t part of all the discussions. Overall the company understood that we needed start this work sooner than later and native was the place to start it.

      Was creating Airbnb's design system a complete overhaul? -- or injected into a current state of the UI and slowly brought along?

      We both approached this bot as design and redesign project. Partly we changed the views and flows drastically and added new features that product teams were already planning to build. This meant that some major flows (home —> search -> booking a listing) were largely re-though, where as some other parts, like messaging followed the previous patterns, and just got update in the style.

      Were there any noteworthy hurdles in setting up the teams to work this way? (design+engineering+management alike)

      There was definitely lot of coordination we had to do getting everyone using the system. The core team, who designed and built the system, was largely aligned and we could make lot of progress. However, when the started sharing and including more teams to the system and building it, we started to see that communication and documentation came to much more important. This created some confusion that could have avoided with better documentation and communication.

      I wrote blog post about this process, which just got published today http://airbnb.design/building-a-visual-language/

      0 points
  • Samo DroleSamo Drole, 10 months ago

    Hey Karri,

    How did you approach to different ideas and prototypes in early stage of a redesign? How often have you done user tests and how much of a final design is based on these data?

    0 points
    • Karri Saarinen, 10 months ago (edited 10 months ago )

      Hey Samo :)

      The product teams generally do a lot of testing and user research, and from there had synthesized some basic lessons and our problems areas that we should avoid and possibly fix.

      Since this project was more sweeping design, we had to make some large assumptions towards on the direction and designs. However, while we worked on it, our research teams had and tested the prototypes actual users. We would get this new data and learnings every week, and could fix and adjust the direction if necessarily. Luckily, lot of our initial assumptions ended up correct, and we didn’t find too many surprises from the research.

      0 points
  • Cody IddingsCody Iddings, 10 months ago (edited 10 months ago )

    Regarding your design system you built:

    • Did you use some sort of base (or golden) unit, cascading across all components? I'll assume you did:
    • Tell me more about them! How did you use them?
    • How'd they influence typography?
    • We're these units relative to the device size/breakpoint? Pixels? Ems? Rems?
    • how did you handle sharing the style guide (not online but psd or sketch file) so others can do their work
    • is Airbnb built on a component based framework as well?
    0 points
    • Karri Saarinen, 10 months ago (edited 10 months ago )

      Hey Cody,

      Did you use some sort of base (or golden) unit, cascading across all components? I'll assume you did:

      We wanted to base our designs on 8 and 4 point grid (4 is mostly only used for our icons). However, we ended using 24pt a lot. Basically that was the unit we decided for our side gutters, and that way it ended up, being the normal spacing.

      Tell me more about them! How did you use them?

      How'd they influence typography?

      The grid 8, and the 24 spacing, generally affected our type styles. I think spacing often goes with the typography. What we also knew that bounding boxes, basically the amount of space the type takes on native devices is generally the line-height. So we made sure that the line-heights would align with our grid, and our text size would work on those line-heights.

      We're these units relative to the device size/breakpoint Pixels? Ems? Rems?

      For native we are defining everything in 1x, in points. Basically currently our standard screen size is the iPhone 6 (375x667). The component width and positioning is related to the screen size with, but currently we are not scaling the components based on the screen size. Often the component is defined as relative to the screen size, but with fixed spacing and text sizes. For example a listing card on mobile, is always width: 100% - 48 (gutters), so in that way we always fit one full card on any screen. On tablet the rule changes to use 2 columns, so the size ends up being a width: 50% - 128 (gutters) - 24 (space between)

      how did you handle sharing the style guide (not online but psd or sketch file) so others can do their work

      I described this in another comment, but we use Git to facilitate the process of updating the files. After that we put the updated design component library in to a shared Box folder, which is available to everyone through the Sketch Templates. When ever designer wants the new updated library, they can just go to their chose Templates > DLS > DLS Phone.

      We are also working on a documentation site, that would house our general style guide, as well as have screenshots of the components and have motion examples.

      is Airbnb built on a component based framework as well?

      Yes, for this new launch of our mobile apps and the design system, we build it to be component based. I describe the system a bit more here: http://airbnb.design/building-a-visual-language/

      0 points
  • Santi FoxSanti Fox, 10 months ago

    Cool to see fellow Finns around the block! Would love to link up and even more to see your office! :) @thesanti

    0 points
  • steven villarino, 10 months ago

    Hey Karri, When you joined airbnb, what was your process on influencing change or proposing new concepts for the design system?

    0 points
    • Karri Saarinen, 10 months ago

      Steven,

      I joined the Airbnb in October last year when the Design System project got started. Initially, I worked together with the team defining the basic style guide, like type, spacing, colors. After that, we worked closely together for a month of creating the new designs and defining the components.

      Currently how the contributions work is that we work with teams that want to add something. We also ask them to submit a proposal on changes and a reasoning why they cannot use the existing components. We try to decide on how important is the use case and how universal the solution is. The best case is that the use case is very important, and solution is very universal (can be used in lot widely). When we find the request is sufficient, follows the system and our standards, we officially included into the component library.

      We use git/github currently to facilitate the actual file updating process. We add the new components to our Sketch Library, work with the engineering to make sure we didn't miss something and submit a pull request with a changelog that document the changes.

      We also Sketch templates that automatically update when update the design library, so all the designers have the access the the new files immediately.

      0 points
      • ivan volcaivan volca, 10 months ago

        Few follow-up questions: Can you explain how you work/update components? Specifically how does proposal submission look like? How do you sync Sketch template?

        0 points
  • Bertrand Bruandet, 10 months ago

    Hi Karri,

    Great to see you here! I'm wondering why did you shut Kippt? Because of the growth / revenue or for any other reason? Was that an hard decision to completely kill it after all this work?

    0 points
    • Karri Saarinen, 10 months ago

      Hi Bertrand!

      I’ve been often thinking about writing about what happened with Kippt. People often still also contact me about it, when they are building something similar, which seems that this is an unsolved problem!

      You’re right on the main cause. Like any other startup and company, we relied on growth and revenue, and just could find a way to hit the goals we had set. We had a great community, with lot of people actively using it, but didn’t achieve the scale we hoped to create. Basically run out of time.

      Lessons learned in there, lead us to start considering Inc, basically a Kippt for companies, since we knew many teams and companies were already using Kippt. We decided go different route, developing the product with few companies, only focusing on our paying customers. That actually worked better than we hoped and we got great customers that way. Afterwards, we still decided to move on and got acquired by Coinbase.

      Shutting down Kippt was definitely hard, but after Inc, and now with our new jobs, we just didn't have the time or energy to keep Kippt running in good shape. Rather than letting it limb along, we decided to end that chapter and hope someone could pick up where we left.

      0 points
  • Jake Cohn, 10 months ago (edited 10 months ago )

    Hey Karri - How important do you think the messaging part of your service is when travelers are deciding which BNB to book? Do you think the importance will grow alongside the importance of AI, and can you design the messaging experience to be even more convenient for both sides?

    0 points
    • Karri Saarinen, 10 months ago

      Hey Jake :)

      We generally want people to feel at home in unique places and meet local people when they travel. Personally, I think messaging plays a huge role in this since before you are actually at the place, you will connect with the host. I think there is a lot of opportunity for AI to help make these conversations more efficient but lot of Airbnb is about the human element in these relationships.

      0 points