Episode 39 features Tim Allen, Partner at Microsoft. Before joining Microsoft, Tim worked with a number of incredible companies including Adobe, RGA, Nike, Amazon, and others. He now leads Microsoft’s Fluent Design System and Inclusive Design teams. Tim has honed his design and leadership skills from a young age, since starting his own airbrushing business while in high school!
In this episode, Dan and Tim do a deep dive on what it’s like to be a designer at Microsoft and how the Fluent Design and Inclusive Design programs are changing the design landscape. Tim also shares how Inclusive Design not only helps the underrepresented folks they’re designing for, but benefits everyone.
This episode is brought to you by Wix. Push the limits of design and start creating beautiful, impactful websites that are uniquely yours at wix.com/dribbble.
Links Mentioned in Overtime
- Tim Allen
- Tim on Twitter
- Hang Time Seattle
- Claudio Guglieri
- Albert Shum
- Microsoft Design
- Microsoft’s Inclusive Design
- Microsoft’s Fluent Design System
- Xbox Adaptive Controller
- Microsoft on Dribbble
- @MicrosoftDesign on Twitter
Dan: Microsoft is into some really, really interesting things these days. Today we’re going to talk about Fluent Design, their Fluent Design system. We’re going to talk with Tim Allen, who is a partner there at Microsoft, super smart guy. They’re doing awesome stuff with Fluent Design, but also we’re gonna talk about Inclusive Design, their Inclusive Design efforts that Tim’s really behind. This is really, really amazing stuff.
Dan: Last May at Hang Time Seattle, our design conference there, we had Claudio Guglieri from Microsoft give a presentation on some of the aspects of Fluent Design, and I was blown away because there’s some really, really interesting research that went into a lot of the aspects of their interfaces.
Dan: What’s cool is we get to talk to Tim today and get a behind the scenes peek at the thought behind all this, and the cool efforts that are going on. He’s working on some really interesting stuff, so I think you’re gonna enjoy this one. Check out fluent.microsoft.com if you’re not familiar with it. Honestly, it’s some really fascinating work if you’re into UI, UX, you’re gonna definitely want to know what’s happening over there and learn from what they’re presenting.
Dan: Once again this episode is brought to you by wix.com, push the limits of design and create beautiful impactful websites that are uniquely yours with Wix. We’ll be hearing a little bit more about Wix later on in this episode, but for now let’s get on with our chat with Tim Allen from Microsoft.
Dan: Hey, welcome to Overtime, Tim Allen.
Tim: Thanks a lot. Glad to be here.
Dan: Yeah, it’s really great to have you on because there’s a lot to talk about, a lot of things that I’m excited to talk about. I just got back from Seattle and Hang Time, which was one of our events that we threw. A colleague of yours, Claudio, gave a great presentation about, specifically about Fluent Design and the stuff going on at Microsoft Design. It was eye opening for me. It was really cool to see what’s happening there and how open you guys are, in terms of the process of creating what’s the next phase of interface for Microsoft. I guess to start off there, how did you come to Microsoft, and maybe why you decided to join the team there, and where you came from before that?
Tim: Yeah sure. My passion as a designer is really all about the combination of functional utility and emotional resonance and cultural connection. How does something make you feel, and then also how useful is it for you, and how does it apply to your life?
Tim: What’s really interesting about Microsoft is, I had a pretty long-term relationship with Albert Shum; he’s my manager now, and he helps to lead, our design effort across Microsoft here. When we’re talking about Microsoft, and this is something I saw even as an outsider, it’s like the what of Microsoft was starting to meet the how. Meaning, especially with Satya taking over the reins, you still have the scale and the power of all this great technology that’s everywhere and sort of enterprise-ready and so forth, but on top of that you had this approach to creating it and the impact it would have on humanity, that was almost poetic in the way that Satya was positioning it. Those two facets coming together was pretty amazing for me. That’s what drew me. Then the teams that I lead are almost direct reflections of that.
Dan: Yeah, that’s great. A couple of things I know I want to cover today, in terms of Fluent Design system and also the Inclusive Design that you have going on there, I wonder if you could tell us a little bit more about those two efforts, and how they might have differed from Microsoft of the past, the way it worked in the past?
Tim: Yeah. Well, for one we have this new direction to empower every person and every organization on the planet to achieve more. Some people, maybe you’re drinking the Kool-Aid, or sometimes corporate statements are just corporate statements, but I think what’s interesting, it’s been documented that, that mission has started to fundamentally change the culture at Microsoft. People truly believe in that and are passionate in bringing that to life, right?
Tim: As a manifestation of that there’s a whole team dedicated to Inclusive Design, which is all about how do you use the breadth of human diversity, all of the things that make us unique in terms of our abilities, our preferences, and the way that we learn, to innovate with our products? As opposed to addressing them sort of at the end of a product cycle, we use them at the beginning to create new avenues and new points of value. That’s sort of our approach at Inclusive Design.
Tim: In terms of our execution we have Fluent Design, which is our universal system across all of our products and services. That’s still in its early stages, but it’s meant to tie together and create a more cohesive and more natural and intuitive system for interacting with all this stuff.
Dan: I imagine a lot is driven by the way technology has progressed. We’re not just behind desktop screens anymore. We’ve got VR and AR and little devices. I would assume that’s part of the challenge, too, right, to make this cohesive interface across everything.
Tim: Exactly. Yeah, and to make an interface that is cohesive, but then also intuitive and empowering as well. You have little screens you put in your pocket or that you wear; you have large screens that are on walls; you’ve got, like you said, desktops, laptops, and then you have head-mounted displays and AR and VR and so forth. Then you have no screens at all, which is kind of getting closer to Zero-D, or zero interface device as well.
Dan: Zero-D, I haven’t heard that before. That’s cool.
Tim: Right? We talk about 2-D interfaces and that’s done. It’s almost been perfected, really, if you talk just in terms of journal interface and experience design. Then this 3-D world, that’s fairly new, and we’re getting our feet wet there, but then this Zero-D world where its headless devices, that’s yet another layer.
Dan: Wow, and that sound plays a big part in that obviously.
Tim: Yeah, sound and voice. For each one of those -
Tim: Yeah, gestures. You have all these input modalities. We’re used to keyboard and mouse, but now you have, like you said gaze, gesture, pen and ink, and so forth.
Dan: Wow. I love this. It’s funny it almost feels like the real world becoming more a part of the design and the execution of this stuff. Maybe because the technology is there now? I don’t know.
Tim: Yeah, I mean I think the logical conclusion would be that we experience technology the way that we experience the world, or interact with other people. Hopefully, all these new ways to interact and use technology brings us closer to the goals we want to achieve. It doesn’t make us adapt to the technology, the technology adapts to us.
Dan: One of the things that’s fascinating to me about what you’re doing there with Microsoft Design and Fluent Design and all, is it’s a very much an open process, it appears. It’s almost like … I read somewhere … Someone was comparing it to … It’s almost like you’re looking at it as software as a service thing, but it’s actually, you’re creating a design system for interfaces. In terms of the transparency you have and the sharing of the process, do you think that’s new for the team there, and/or for you as well?
Tim: Yeah, I think it’s definitely new for Microsoft. I think in previous design systems, whether that be Metro or anything before, you could spend a lot of time perfecting that design system, it could be years even, and then you’d have this “Ta-da! Hey, here’s our design system.”
Tim: Go forth with it.
Tim: This time it’s a different approach. I think it speaks to the speed of technology, so that’s sort of one logistical angle. Another angle just culturally, we realize the impact that the community of our first-party developers or our internal developers and designers from Xbox, to Office, to HoloLens, and so forth, but then also externally.
Tim: There’s still many developers that we can learn from, and if we take this sort of stair-step approach, releasing and understanding, experimenting, and incubating ideas publicly, we will end up with a better system quicker.
Dan: Yeah, which is awesome. This is awesome to see. I don’t know how to ask this without sounding offensive, because I don’t want to sound offensive, but is there … The design community in Microsoft, for instance, seems like in the past there’s been maybe more of a chasm there than there is now, and that’s why it’s amazing to see what’s happening now. Internally, is there a shift in terms of embracing the design community more? It just seems like there’s a lot more effort going on with this, or at least maybe it’s just that it’s out in the open more?
Tim: I think that it’s definitely out in the open more, but I think the value of design as a strategic business differentiator has been blessed and been recognized. The fact that we can help breed more confidence and advocacy and more of an emotional attachment to the things that we make, and also influence what we make, as well. …Bringing in Inclusive Design is it’s a very powerful weapon in the arsenal, and we’re almost at the beginning of reaching its potential; there’s still a lot left.
Dan: Yeah. I just saw recently some articles about parts of Fluent Design making it into Windows 10, for instance. It does feel like it’s, you’re just sort of getting started with this stuff.
Tim: Yeah. It’s what you were talking about earlier, we’re very open about where we are, but I think the potential of us being able to deliver on that promise I mentioned earlier, there’s 7.4 billion people in the world, it’s crazy.
Dan: Yeah, it is crazy.
Tim: We really want empower every single one of them, and there’s a difference between its functional, utilitarian design, which I think may have done well at in the past, versus click this button, the machine does this. For something is much more visceral and much more tied to the way you experience the world. That evokes a different response for people.
Tim: So it doesn’t just work, it works well, and to use an overused term, it’s delightful and it’s resonant as well.
Dan: It’s amazing to hear that many, the number of people in the world and that’s the goal. I always cringe a little bit when it’s like a company that’s … I’m just going to make something up here … A company that is making a paper towel that’s going to change the world or whatever you want to say. Paper towel’s a bad example. Let me think. A coffee mug, they’re going to revolutionize coffee mugs and it’s going to change the world.
Dan: I sort of cringe when I hear that because it could change some people’s lives in a small way, but Microsoft really has that unique position to actually be able to say that with some confidence, right, because they affect, the products affect so many people throughout the world.
Dan: Was that something that was attractive to you, in terms of coming on board there? The scale at which you can work?
Tim: Definitely. The scale that we work at is tremendous. The sectors and industries that we’re part of and the products that we make, that we have in market now and the ones that we’re cooking up as well, this is an impressive inventory. And then the what and the how, how we make them, that’s kind of standing for something culturally means a lot. It means just as much as what we make too. Actually, how you make something is a direct reflection on what is made.
Dan: Yeah. This goes back to, reminds me of Claudio’s presentation on … he sort of went into some of the research around Fluent Design and how you guys have been coming up with the different facets of it, and it’d be cool to touch on those, because some of them are just really super fascinating. One is the sounds in the interface, and not to get too into the weeds, but it’s fun stuff. The research around listening to an alert message in different languages and how there’s a cadence and a melody to them, and that informed how a sound, a universal sound might appear in the interface. I wonder if you could go into that a little bit, in terms of the research around … we can start with sound, but there’s a few different other aspects of it too that are fascinating.
Tim: I think the way I would explain it, again, through that kind of function and emotion. If you’re creating a notification sound, any sound will trigger the fact that something has occurred. But we think sound is so essential to the way we communicate with the world, and we found that all spoken languages have this musical pattern, right? A speech contour, especially in terms of different phrases.
Tim: For example, “Ready to go.” If you say, “Ready to go” there’s a lot of contour between English, obviously which I just spoke, Japanese, Mandarin, and Spanish, and other languages as well. If you look at the contour of that and that intontation and the melody and the rhythm, you can use that to signify, “Way to go!” Which is maybe a notification for a new message or a reminder. And not only signifies something functionally, but emotionally, it’s sort of unconsciously registering as well.
Dan: That’s just fascinating to me. Like, “Ready to go!” I’ll have to insert some sounds into this to show, because that would be, this is an audio podcast, we haven’t the opportunity to do that, but the “do-do-do-do”, several of those just made a lot of sense and hopefully were universal, regardless of what language you’re speaking. I suppose that goes back to the overarching, Inclusive Design mandate. That’s part of it.
Tim: That’s totally part of it. I think we all have our unique abilities and ways of learning and limitations, but then there’s universal themes and universal goals and universal understanding that we all have as humans as well. It’s the interplay of those and the respect of each one of those, too, that really drives Inclusive Design. I think that sound example is a good example of that.
Dan: It really is, it’s awesome. I was blown away when I heard … hearing all the different languages and then what you ended up on, just really, really cool. That’s same sort of research, I think, goes into other aspects of it too. For instance, light, there’s a demonstration of how you’re using shadows and light on what are 2-D pane windows really, 2-D panes that we’re familiar with as a pattern. I was amazed at how the difference in shadow and light can make those dimensionally seem more real, I guess. I wonder if you could speak to that a little bit as well?
Tim: We’re trying to map how we interact with the world and understand the world into our experiences, not necessarily for the sake of aesthetics or skeuomorphism, but just to enable you to understand hierarchy better and understand the way you perceive and organize the world, and apply that to our experiences. In terms of emotion and depth, when something’s coming at you or especially when it’s coming at you quickly, you have a different reaction than something that’s receding or not moving at all.
Tim: Bringing that together in a way that’s digitally appropriate, because there is a translation there. It does bring that visceral reaction that you had when you saw the light interacting with the 2-D panels and creating that shadow. It’s less about the shadow and more about what that does to your mind and your understanding of that space.
Dan: I see. The patterns that we’re used to in the real world, triggering those in digital world, it can be helpful, sure. That makes sense.
Dan: And then there’s acrylic and light, the feel of things, material of things, that there’s some really interesting things going on there with the way material travels over other things. I’m describing this terribly, I realize. This is what’s hard about audio podcasting, when we’re talking about interface things.
Dan: Was there a lot of using physical things first and seeing how those react to, for instance, light and … or was it entirely digital? Did you even need to use real objects?
Tim: Yeah, it was a combination of the two, physical and digital. That really understanding what materials mean in the real world, right? So real materials, they bend, they bounce; some can glide, some shatter, some are rigid, and how do you understand that visually? Also, when you interact with them, when you touch them or when you feel them, and what does that mean? Translate that digitally so you can have the same triggers and expectations that implicitly.
Dan: Well, at the same time, not being, like you said earlier, not being completely skeuomorphic about it, and making it … It doesn’t need to look like wood grain or whatever it is. It could be more implicit, right?
Tim: Yeah, exactly. You don’t need a copy, but I think you do translate the meaning.
Dan: That’s great. I love it. I love where this is all going. What’s the most exciting … what’s the thing you’re looking forward to the most, in terms of being able to use these interfaces? Is it AR, VR, Zero-D, my new favorite phrase, by the way. Or is it a combination of all? What aren’t we using today that you’re most excited about using in the future?
Tim: For me, it’s about uncovering new interaction models. Like I said, I think a lot … we’re just habitualized to 2-D, because we’ve been limited to the 2-D for so long. To a certain extent, we almost kind of perfected it a bit, especially mobile, with touch; but if you go past 2-D planes and what does that open up? 2-D rectangular planes, what does that really open up? Especially when you think about people’s natural way of going through multiple devices within an hour, much less a day, right? What are all the new types of patterns that we could create and build on, based on that type of context?
Dan: Yeah. That is exciting, actually. I suppose in a small way, voice command is something that’s been fun to watch evolve and take hold and actually be useful.
Tim: And it’s voice—something that you carry around with you, and you always have depending on your ability to vocalize. This design, what does it mean for a Zero-D product to interact with someone that may not be able to speak. Can it recognize other forms of input as well? But just you, being the in control and your ability and yourself and your identity, being the center of experience, and you take that with you, obviously because it’s your cell, everywhere you go, and have the technology respond to that, because another exciting path.
Dan: Super exciting. We’re living in the future. It actually dovetails nicely into … one example of Inclusive Design that you also have released recently, and actually, I don’t know, maybe it’s a prototype; you can correct me there. But it’s the inclusive gaming controller that I was watching a demonstration of this and it was pretty amazing. I wonder if you could tell us about that a little bit?
Tim: It’s really just about having everyone enjoy gaming despite whatever your physical limitations are. It’s mainly built around the needs of gamers with limited mobility. The adaptable controller has these huge, large, programmable buttons, so it’s easier for people with mobility impairment. But then you also can connect it to external switches, buttons, joysticks, and different mounts made accessible. So it’s almost infinitely customizable to suit whatever your situation is.
Dan: Yeah, which is awesome. The demonstration was amazing. I had a couple thoughts to … one is I’m terrible at games that require a lot of buttons, so I’m myself I’m not mobility impaired, but I want that controller with just a couple buttons on it that are big; but also they were demonstrating how you can play a game, and I can’t remember the name of the game now, but it was a driving game. Someone could use one leg, basically, to play the game and by moving their knee back and forth to steer and then press a pedal to shoot. I was blown away. This is amazing.
Dan: Was it really gratifying to create something like that and see people use it and get their feedback on it?
Tim: Yeah, it’s a beautiful thing to see people that weren’t able to do something be given access to be able to do it and to adapt and do it in their own way. One of the principles for Inclusive Design is that you design for one and scale to many. Not only are you helping that fairly underrepresented population of folks, but then also everyone else benefits. Xbox also has a co-pilot feature, and with the adaptable controller … I just had a little boy, so maybe in the future, I’ll be doing this with my little guy, but you could map either jumping or steering or something like that to a controller and have a little one with natural limited mobility and then you could control other specs.
Tim: That’s something that everyone… so when you take care of the edges, we say that the whole is impacted as well. The Inclusive Design is not only to create things that are more accessible but also benefit everyone else.
Dan: That’s great. That’s a great way to look at inclusiveness and accessibility and that it does benefit everybody. That’s awesome. Tell me about your path. How did you start with design? Is it something that came early on? How did you get to where you are, I guess?
Tim: I’ll try to sum that up quickly. I was one of those kids that was always drawing, and fortunately had some parents that fueled that. And one day, at the beginning of high school, my father bought me an airbrush. That was back in the day, right, so airbrushing and tagging was pretty hot. It’s actually kind of coming… this whole 80s thing’s coming back.
Dan: That’s true. That’s true.
Tim: I immediately took that and ended up by Junior year, I had my own airbrush business, and that was the first time understanding that okay, there’s a difference between art, which I was doing before, like drawing, and then like designing shirts and we were doing motorcycles and boats and just kept expanding. It’s almost like branding. That got me on a path that book that I used to sell airbrush clothing or whatever is the same book I used to get into design school; and then I, after design school, got into gaming and speaking of gaming, and that led me into interface design, so you’re kind of going from fine art to experience design. And then led into Adobe and started working with Nike through RGA, Nike Plus, which was for me, again, that perfect blend of this visceral, emotional brand that is almost palpable in terms of the way that people feel about it but then delivering on that through what we created, which was like digital sport and Nike Plus and enabling people through technology to deliver on the promise of the brand, by running better and tracking and being motivated, that’s for me where the gold is. From then, with Amazon and we sort of landed here at Microsoft.
Dan: Wow. That’s a cool journey, from airbrushing early on to empowering everyone on the planet.
Dan: This week’s episode is brought to you by wix.com. With Wix, the web is your playground, start with a blank slate and design your website in any layout you want. Work with advanced features like retina-ready image galleries, custom font sets and sophisticated design effects. Each feature is intuitive to use, so you’re in control from design to live. With Wix, you’ll have real creative freedom to tell your story online, exactly the way you’ve envisioned it. Push the limits of design and start creating beautiful, impactful websites that are uniquely yours. Go to wix.com/dribbble to get started today. That’s W-I-X.com/dribbble. Wix, what will you create?
Dan: How, in terms of the Microsoft design team that you’re in charge of there, is it a large group there? How’s that structured?
Tim: For me, I’m a part of a fairly large design team that covers experiences and devices, hardware and software across Windows and Office and all the products that come out of that. There’s about upwards of 500 designers, content strategists, writers, researchers, all the design disciplines. My team within that, and typically those teams are organized in verticals, right; so you have the Skype team, the Office team, the Windows team. My team is a little bit differentiated, because our sole purpose is to be horizontal, so both Fluent Design and inclusive design are horizontal teams that work with all the other teams to equip them to make better experiences.
Dan: Gotcha. Is that new for the company you think?
Tim: I think there’ve been horizontal teams before for the company. I think it’s combination of how we design Inclusive and in what we design in Fluent is definitely new.
Dan: Are you guys physically all in the same place in Washington?
Tim: Yes we are. We’re all in Redmond, as a matter of fact in Washington, in our studio here, it’s co-located.
Dan: Gotcha. Okay. You guys are doing some amazing stuff. I’m so glad that you’re sharing the process too. Taking an iterative approach to it, that’s got to be challenging though with all the different products that there are and trying to inform the design of those, not at the same time, but along the same ethos or whatever. What’s the biggest challenge do you think for your team in doing that?
Tim: I think the biggest challenge is to be more efficient. What I think what Satya’s trying to do with the company and that’s been written about, is to bring people together in an organization or a company that is used to working in verticals or “silos” is a strong word, but how can we break out of our organizations and find ways to empower more people and add more value by working together?
Tim: Just being a part of that has been challenging, but we can’t really move forward without jumping on that opportunity.
Dan: Totally. I feel like once I got a sense of what you guys were doing there with Fluent Design, I just want to know more about it. What’s the best places to go to get involved or to learn more about what you guys are doing?
Tim: The best place to start, especially if you are part of the design discipline, is Microsoft.com/design. There you can learn about Fluent Design, you can learn about Inclusive Design, and not only can you learn about it, but we’re really trying to equip people to act on it as well. So with Inclusive Design, we have toolkits, we have short films to create empathy and understanding and even curriculum that we’ve open sourced. And then for Fluent Design, of course we have our guidance, our controls, our patterns all laid out for folks to either use technically or learn about.
Dan: That’s awesome. That’s amazing that you’re that transparent about it. Was there ever a worry in doing that, in open sourcing this stuff or in being so open about what you’re doing?
Tim: Not necessarily, I think that the benefits definitely outweigh some of the cons, but one thing that’s challenging though, as you create something that is on a journey, is to … There’s a lot of energy around Fluent Design; one of my concerns, personally, is how do you keep that energy on the rise or sustained as you develop more and more components? And how do you do it at velocity? I’d love to continue to iterate, but I do it quickly and give more things out to the public so that they’re more available.
Dan: That’s been helpful in terms of speeding that process up? Maybe just getting feedback quicker than, say an official release?
Tim: Correct. How can we be just a bit more agile there? So we’re working on things to enable that. Right now we’re sort of locked into the rhythm of Windows releases.
Dan: Right. That’s awesome.
Dan: What can we look for next from Microsoft Design? Is there something … well, I don’t want to be that guy that says “there’s nothing that we can announce” but I just mean is there something that’s upcoming that you can mention that you’re excited about?
Tim: I would say, you’ll see more examples like the adaptive controller that are designed well and great products in and of themselves, but how they came about creating products like that and for whom we’re creating those products for, I think you’ll start to see that more. There are Microsoft Learning Tools, and one of the tools is for dyslexia. How do you incorporate, not only people with diverse physical abilities, but diverse cognitive abilities? We’re using the OneNote platform to allow students that have dyslexia to grow up to be more creative and to understand communication and language better.
Dan: That’s fantastic. You’re doing some amazing things. This is been so fun to hear a little bit about what you’re working on, Tim, and I just want to thank you for being with us, because I think it’s going to open, hopefully just getting the … not that we need to get the word out for Microsoft, but in a sense, for me, it seems like a newer initiative that is super interesting for people that are doing this stuff for clients or working for their own teams or whatever. I really thank you for sharing it, because I think it’s helpful in a real global sense, you know?
Tim: Thanks for highlighting it. It’s definitely been a pleasure and I said, it’s a journey, so a part of this is also connecting more with the design community. We talked about the impact that design’s having within Microsoft internally, but then externally, we want to share that as much as possible and give feedback on it and it be as much of a part of the design community as we can.
Dan: That’s awesome. Everyone should follow Microsoft on Dribbble. Shameless plug, but because you are sharing a lot of cool stuff around this right on Dribbble so you can see visuals of what we were talking about and…
Tim: Fluent Friday on our Twitter account which is @MicrosoftDesign, as well, so it’s just a community of folks can basically submit Fluent Designs or quick creations and we just celebrate them and review them.
Dan: Super cool. That’s great. Thanks again, Tim, this has been awesome. Can’t wait to see what you guys continue to share with us. I don’t know, I can’t wait for the future, using all this stuff.
Tim: Same here, man. Thanks a lot. Appreciate it.
Dan: Take care, Tim.
Tim: Take care.