Material Design Awards 2017
Talking design systems and user-first experiences with the winners of the 2017 Material Design Awards
The second episode features the winners of the 2017 Material Design awards, who sat down to talk with Liam while being honored at SPAN Pittsburgh. The creative teams from NPR One, Eventbrite Organizer, momondo, and Blinkist detail how they each built experiences with a distinct personality, and discuss elevating content, the emotive qualities of white space, and how to use the Material Design system as a springboard for unique expression.
Liam: I want to get a little bit of history on the NPR One app, both as a product and especially in terms of its design.
Tejas Mistry: The idea of NPR One was really to reinvent radio in a world where people are interacting with audio content and media content away from the radio, whether it’s on their television or on their phone, in their cars … And so, really trying to figure out how we can repurpose radio for the digital world.
Liam: In terms of its design, I guess, how do you compare where it currently sits to where it maybe began as an app.
Michael Seifollahi: Yeah, that’s- that’s interesting, so it’s- it’s definitely taken kind of a, quite- quite a bit of evolution over the last four years. One of the most important things was determining that core functionality. And from the onset we wanted to maintain … That simplicity of, you can just turn it on and go. You can just press play, and we’ll take care of the rest, you know, should be as easy as turning on the radio. And we still maintain that simplicity with some additional features and representations as we’ve kind of evolved both the content and, you know, the discovery aspects of the app.
So it started with just the now playing, so what you’re hearing now, and that was it in the very first beta. And then, from there we moved on to here’s what’s coming up and here’s what you’ve heard before on the left and the right. And as we introduce more discovery options, we brought in the explore section, which is kind of a personalized grouping of editorial curation and personalized selections for you as a listener.
Liam: I’m interested to know how you accomplished such a consistent experience across so many different form factors and platforms.
Tejas: We wanted to make it as simple as just turning on the radio, as people have been doing for over 50 years. But as folks stopped tuning into radio or don’t have radios anymore, how do we carry that paradigm over to new platforms? So we started at that core and that’s that primary experience that we need to get people to do immediately. Everything else becomes tertiary or even secondary.
Michael: The framework that we come up with for these interactions of, what is the core functionality? Okay, press play and go is the core functionality. And then, if it’s an interactive platform, something with a scr- you know, a touch screen and not a steering wheel, for example, then what are some of the secondary actions? You want to be able to share that item and, you know, maybe save it for later.
If you’re in a different platform that’s maybe screenless or in a car, for example, search might be more important than some of the other discovery features where you’re browsing, because you have less- less ability to read in a car and no ability to read on, say, a smart speaker. So being able to intuitively just search for the thing or say the topic you’re interested in hearing becomes more important on those platforms. So outlining the kind of platform’s standard set of features … What’s primary, what’s secondary, what’s tertiary … And then, finding the right balance of those on the particular platform that the experience is being built for.
Tejas: And our approach, really, when we build any new interface or new interaction, is to think about how it translates to other platforms, so we don’t take a mobile-first or a connected-car-first or a wear-first approach. We really take a platform approach. So we ask ourselves really hard questions about any feature or interaction we build and how it translates.
And if we can’t necessarily solve it for all those platforms at once, we at least have called it out and have it in the back of our minds that we need to come back around to solve it. And it really gets to a point where, we iteratively build something learned from how people are interac- interacting with it, and then come back around and try to figure out that platform solution. So we’re not afraid of experimenting and really, at times boxing ourselves to one platform, but we’re all self-aware that this is meant to be cross-platform and that it will need to evolve.
Liam: I keep thinking about this comparison that we might make between something like the NPR One app and in actual radio, in the sense that in actual radio you turn it on and things are happening, and it has no, like, graphical interface beyond that.
Michael: It opened up some additional, kind of different avenues of design. You know, one of the goals of the design is to get you to press play and then put it in your pocket, right? You know, designing for something that ideally, you don’t have to look at again. Maybe you take it out and hit skip or rewind to catch a name you missed. But, if we’re doing our jobs correctly then you’re just going to continue to hear something informative or interesting or, you know, you otherwise wouldn’t. So bringing that aspect of design also into what you hear next has been one of the really unique and interesting challenges that this team’s tackled.
Tejas: That’s a good point. It’s really the content that shines, whether it’s a Planet Money podcast or that local story from WWNO in New Orleans about race and culture, how do we really elevate that and the sound and the story rather than worrying about the buttons and the opportunity to dive further when the content is really, speaks for the application and the experience in and of itself?
Liam: You know, this is like a very essential, paired-down kind of interface that you’ve created. But I’m interested to know, have there been any unique constraints that you’ve run into, building across all of these different platforms, even with such a minimal experience?
Michael: I mean, there’s- there’s kind of a- a fine line of … Keeping that brand representation, like this is an NPR app, this is an NPR One experience. But also, making it feel like it belongs on the platform that you’re using it.
Tejas: We always say that we take an 80–20 approach, where we try to solve 80% of the problem and then leave 20 on the table. And that 20% is the hardest percent that we kind of incrementally iterate over months or even years. Or even, as new platforms come out, some of these questions don’t even get answered until further down the line.
Liam: So as you’re thinking about both this, like, platform approach of thinking of all platforms at once and kind of this system that you’ve developed … And balancing that with brand expression that’s appropriate to each of the platforms, what is the relationship like with Material Design in the app? Or how has that contributed to or changed the effort to build an experience across platforms?
Michael: Yeah, I mentioned before that kind of balancing act of … Our platform vers- you know, the platform that the user is currently experiencing it on. And Material Design’s principles have been a great kind of expression of that balancing act, helping us to identify and elevate what’s the most important thing in your current context.
So, you know, as we mentioned on any- any platform, pressing play is the most important thing, so bringing an element like the FAB to be the kind of primary action. The first thing you see when you open up the app is the now playing screen with a giant play button. And the promise there is, you press this button and we’ll take care of the rest. And if you wanna go and look for something else, there’s plenty of avenues to do that in some of the secondary navigation and tertiary navigation, based on the content you’re listening to. But, the most important thing there is to just play the thing that’s on the screen or get that flow started.
Tejas: The Material Design guidelines really hone us in on the right approach, and we trust that those have been tested, and other apps are picking up those same patterns. So there’s no need to reteach a listener or a user on a completely new paradigm, whether- whether they’re going from one app to another to another. So we want to stay within those constraints, and I think that’s actually more helpful than that actually being a detriment towards our approach. We’re a very small team, and we have a lot of platforms that we support. So how can we minimize that burden of overthinking solutions, and really just move forward towards shipping, and I think that’s been the real benefit of us moving across platform, is that Material Design has allowed us to adopt newer platforms at a quicker pace than if we were- had to think about this from the ground up every single time.
Liam: Eventbrite Organizer is built for accommodating the wide range of tasks an event organizer is responsible for, from planning to the day of the event and beyond. The app received this year’s Material Design Award for Interaction Design.
In the interview, I learned how Eventbrite integrates Material Design into their own brand identity, how the app enables organizers throughout the event’s lifecycle, and the importance of pausing to take a break.
Liam: Organizing an event is obviously a very complex process. There are a lot of different tasks that organizers need to do and outside of the app it’s, I would say, maybe unpredictable how complex it will be from organizer to organizer. What are some of the concrete approaches that you’ve taken to simplify event organization through this app?
Lumen: I think of the things that I always mention it to Dan was like, we should start using more animation, something that is just, like, delightful, using it more as a tool to remove steps or make people feel that they are not jumping between pages or experiences. So, working very close with engineers and just, like, communicating this and just changing their mindset to be- animations needs to be for us, more about removing that friction between pages and, like, make it more smooth. And then it’s not gonna be about, you know, doing fun things necessarily, because also, if you think about organizers that are using the app to finish something, and they don’t have time to, you know, just see something or play with something. They just wanna get something done, so different from the consumer’s side. It was more about, you know, removing stuff and just making it more, like, streamless than … Just delightful, in a way.
Liam: Yeah, given that the experiences of organizers are so varied, I wonder if there have been times where you get feature requests from organizers that actually don’t make sense in the app, and how you decide what features should be adopted.
Dan: The more we put into the app, the more we are at risk of, just muddying the experience and making it too bloated that people don’t want to use it. But there’s features that we want to put into the app that don’t necessarily make sense being solely native. By solely native, I mean, you know, built out in native experience. The- we’re starting to consider, like, web views and things for small tasks that are really key to an organizer’s lifecycle of, I think we mentioned, payouts and things like that. That are one-time things that we don’t necessarily need to create those services. So those kinds of questions are coming up now was to, like, as we, again, close those gaps.
Lumen: Yeah, just thinking about, you know, making or breaking the current experience just to put something new or, like, add something new. So if- we ask a lot, like, is this gonna hurt the experience? Is this gonna make it more complex? Is this gonna really change how things work right now? And that just inform what we decide to do.
Dan: It is definitely a push and pull of, like, what’s- what would benefit the organizer versus what would be, you know, kind of work but unnecessary to put in all that effort to make it work in that experience. So yeah, I mean this is something we’re facing now. Um, since we’ve got the kind of basic functionality … Like, it’s not quite basic; it’s, you know, quite broad functionality, you know, that’s quite complex. But the more we try and make this app like a superset, almost of what the web does now, in the- in that you can carry it with you, you can check people in, you can scan them with your camera. That kind of stuff you can’t do on web, obviously. So these things, we’re trying to take all of that stuff from web and put it into the app. But it’s definitely a difficult task to kind of decide which pieces go in and how they go in.
Lumen: Especially when everybody is getting excited about putting it in the app. (laughs)
Liam: The first thing I noticed as soon as I signed in to Eventbrite Organizer was this empty state that had, like, kind of hot air balloon, like, swaying in the wind. That reminded me that even staring at the app is, like, its own kind of interaction. So I’m interested in other ways that Interaction Design can influence these kind of, like, blank states or introductory states, both in Eventbrite and elsewhere.
Lumen: Yeah, I think, if you think about an empty state, for us it wasn’t an empty state or, like, a specific page. We thought about, OK, let’s log in. Let’s create an account. Let’s do all of the things. And then the empty state was actually part of the onboarding to us. That was, like, the first point where you can start creating or doing something with the app. So we didn’t want to approach it, like, a negative thing or something that technically is just a negative thing. But for us it was just, like, the first thing that you see actually after you completed your name and last name and all of these things. So that was like, this is like the first phase of the entire onboarding. Like, how can we make it delightful and feel like we are with you. You’re gonna start creating your first event. It was gonna make you successful, because you’re gonna complete something. So that- that was the way that we wanted to approach it.
And then, again, just thinking about that all the time and just, taking a second thought every time that we wanted to add something in the app and think about animations and interaction and being mindful of adding new steps all the time. And we really needed it, we thought about incorporating interactions and animations to that, so it didn’t feel like an extra step.
Liam: Momondo is a travel booking app that received this year’s award for Innovation.
In Momondo, the tasks of booking a flight and booking a hotel are split into two distinct actions in the app and are presented to the user as physically separate, but easily accessible. The unique multi-tasking experience makes Momondo feel like two apps in one, using Material Design’s notions of light and shadow to build a strong and intuitive mental model.
In the interview I learned about the importance of staying curious, how Momondo naturally blended Material Design with their own strong design language, and how they customize components to meet their users’ needs.
Liam: Taking Material Design as a system and kind of pushing its core principles and creating new patterns and really unique interactions like Momondo has done is something that a lot of designers tend to struggle with. So I’m interested in how Momondo manages to kind of strike the right balance between user familiarity and kind of the expectations the users bring to your app from the platform and the totally unique interactions.
Emmet Fërdle: Yeah, we do also have a really strong brand. We have a really good, like, web product and iOS app as well. And I think, as a culture, the way we work … Momondo’s slogan is, “Stay Curious”, and that’s kind of like a call to action for customers to, like, stay curious, but it’s also like a working methodology that we, um, have where we just kind of question everything. So, I mean, I tend to kind of start with pure material, so to speak, religiously following the guidelines and stuff, and then picking it apart and, like, questioning everything and just trying to see if there’s a different way we can achieve the same results, but, um, still remain true to the platform.
Liam: One specific thing that really stands out to me about the app is that inside of the app, you have this kind of, like … Internal multi-tasking structure where a lot of the search functionality for, like, flights and hotels, exists inside of these screens that almost serve as apps within the apps. So you can be executing flight and hotel searches and then toggle between them and the menu space. Because this is such a unique kind of structure for an app, I’m interested in the rationale and kind of how these interactions developed.
Emmet: There’s no kind of linear path in, like, booking travels or, like, we know we have, like, a massively diverse range of users and it- they all wanna book in their own kind of ways, so we kind of use the app to enable their own way of traveling — that kind of menu space and the kind of mini-apps within the app kind of thing conceptually came out of that, like, allowing people to play around and just, like, maybe be surprised by something that they didn’t expect. So they’re looking at a flight ticket and then they can jump out and check if hotels in that city are, you know, worth looking at.
And it’s also like a fun kind of interesting pattern. Cause, I mean, it would have been very easy to kind of stick on a bottom nav or like a hamburger or something. But that wasn’t Momondo enough. And, um, yeah we just wanted to try something a little bit out there.
Liam: I’m interested in other areas where these kind of unique features and components that you’ve implemented end up simplifying what, at least for me personally, can be a very complex and stressful experience of booking travel.
Manu Somonte: Yes, I know that it can be a stressful experience, but I think that’s one of the goals of Emmet, in this case, it- actually he has made it possible to put that stress level away. And I think that’s why his contribution to design in the ecosystem that we have in hand … It’s fresh and it’s- the delivery of the design doesn’t have any ego. And that’s what makes it so good. And we- that’s why we think it’s great. And it creates great value for us. We think that good design generates great value. And we see it on our users, and we see how happy they are of using the product.
Emmet: And just, like, Momondo, like, strongly encourages to travel all the time, so like, we use the product all the time. And just having such a diverse kind of range of people just within our office is, like, a really good starting point to kind of hear people’s frustrations and things and try and solve them.
Liam: It’s funny, I was in Krakow recently, and a cab driver told me that he had used Momondo to book a flight to SF. And then he also used the app to check daily for updates on flights to Hawaii. So that just kind of highlighted to me the kind of, like, global nature of the product. And I’m interested in how you kind of take this highly diverse set of users and use cases into account as you’re designing the app.
Emmet: Yeah, really good question. Um, well we have, like, some user personas that we’d kind of, like, hinge on every now and then, but there’s no, like, right answer to solve everyone’s needs. But we just want to, you know, create a good experience and kind of let people be their own best travel agent. That’s kind of, like, another slogan that we tend to shout about.
And we think, yeah, like, difference is something to be celebrated and, I don’t know, it’s hard to define how we think of our users. Obviously we’re in constant communication with people. Like, we take every bit of feedback very seriously, and there’s always dialogue with them- users from all over the world.
Liam: Blinkist has distilled more than 2000 bestselling non-fiction books into 15 minute texture audio overviews called Blinks. Blinkist got this year’s award for Brand Expressiveness, making bold and intentional statements about its identity in the app. And using Material Design to craft a comfortable, human-centered reading and listening experience.
In the interview I learned how Blinkist used its brand to create distinct personality for the app, how the app uses color as a mode of communication, and why design should be emotive.
Liam: I’m interested to learn, first of all, about Blinkist’s identity. So, I want to know the history behind it and also how it’s changed over time.
Temi Adeniyi: At the beginning of last year, we were all very interested in kicking off a branding project. Blinkist had grown a lot, and we wanted a way to kind of represent that evolution, but also to represent the kind of company we wanted to grow into in the future as well. So from there, we kind of, like, went back and looked at the- the bare bones. Like, on a strategic level, defining things like what should our brand personality be? How do we want to represent ourselves externally to customers? Who are we to ourselves internally? So we kind of put many months into this exploration and after that, did we come on to the actual, like, visual branding design side of it. And in the end, we did basically all the branding in house.
Natalia: In terms of visual design, we decided to go in house. And I was part of this, let’s say, branding team. We had some- several workshop, and we were trying to encompass this product and our product was expanding, with the podcast, a magazine, and a potential to also cover other aspects of the learning experience. And we wanted to shift it away from the visual, literal representation of books. Like, we not only offer books but we offer mobile way of learning.
Liam: A question that I commonly get when I’m talking to people about Material Design is, “How do you brand a material app?” How did you brand a material app, and what was that experience like?
Temi: Yeah, I think for us, I guess we had an interesting starting place, because although the Android app definitely existed before we rebranded, that experience, again, was something that we weren’t super happy with. And we were lucky that we have, I think, a really active customer base who give us a lot of feedback. So, even before we, you know, set about looking at, OK so now we’ve rebranded and now is best- like, the best time to not only just, like, refresh the look of the app but also improve the actual functionalities and so on. So we kind of took all of this information from the- from our customers, but then we also, as having the starting place of this rebrand, looked at our core principles and what we wanted to offer in terms of this visual branding in the app.
I would say, one thing that we defined early was, how should we approach brand expressiveness, if you like, between product and also marketing. So on the product side, what we aim to do is to allow the user to, like, realize that they are using a Blinkist product. But at the same time, to kind of get out of the way. And I think for this, using Material Design to strengthen that was really helpful for us, because we could offer users who were on the Android platform a way to have this familiarity with the other apps that they were using on their device.
But then, kind of taking the core component of our brand, like, certain principles like how we use white space and so on. We could kind of take these core values and make sure that they are, like, presented in the app in a way that, yeah, gets out of the users’ way. We weren’t trying to be, like, pushy with the brand. But at the same time, we wanted the user to feel comfortable that this was a Blinkist experience. But they weren’t using a product that was, like, so so different from the other apps that they had on their device that were use- that were also utilizing Material Design.
Natalia: The design team, we were designing and then we were lucky to have our lead Android engineer that is really proficient in the Material Design, so yeah, it was a lot of front and back, like, look- can we change these, can we adapt this pattern, can we adapt this …
Temi: Just to add as well, like, in terms of having developers at Blinkist that are super switched on in terms of, like, design in general … I think somehow, that’s something we end up, like, being really lucky with. Like, all the developers have, like, really great design eye. But, specifically our developers on the Android platform also are very well versed in Material Design. So as Natalia said, it was, like, a lot of back and forth, which I think was, like, pretty great to challenge us. Like, OK where could we push it further? Where might we need to adapt it so that it still feels like Blinkist and so on, so I think, just … The discussion around it, I think, was, like, really really helpful.
Liam: I want to kind of break into some of those brand components that you mentioned. And I guess we’ll start with typography, because it seems so central to the experience of the app. You know, one of the primary things that people are doing in the app is reading, so I’m interested in kind of the typographic system that you set up, both in terms of typefaces, like you said, and also type treatments throughout the app.
Natalia: Uh, we went through a lot of typefaces. And we were just trying to create all these mockups to see how legible, how would they just appear at the first glance, uh, like for all the apps and our reader especially.
And then we decided to stick with what we already had, which was Tisa Pro. And nobody ever complained, but not only that, people- our users actually liked it. So we thought, like, there’s no point in reinventing the wheel. Let’s just keep what we have. It’s very clear. It’s very legible and very- every letter is very distinct and it really works well.
And then we ended up adopting Cera Pro for also the rest of the app and the web app, which we- again, we really like. It’s clear. It’s very neat. Very simple but at the same time there’s this element … The kerning and the spacing between the letter is a bit wide, is a bit generous. So it works well. And, it not only- it’s really distinct. The first feedback that we had post-rebranding was actually “great typeface.” Very elegant, and some letters are pure, like, they’re very- pure beauty. Like, the Q or (laughs) the B again. And I think it worked well, and it really translates what we were looking for.
Liam: I just wanted to explore, uh, your use of white space, which obviously kind of interacts with- with the typographic system. But I think there’s a common misconception that white space is wasted space. But I think Blinkist does a really good job of demonstrating that it’s actually a really important tool in-in creating visual hierarchy. I would like to get into your approach to white space, especially when you’re designing for small screens like phones.
Temi: So I think for us, like, the main thing that we do is actually really just thinking about it in terms of hierarchy, so … OK, what is the most important element? Or, what do we want our, like, readers to be doing first? And then, once we have that, I think everything else kind of comes, yeah, comes into play.
In terms of the white space, I remember initially when we were doing the first mockups for this and it was, like, so different from the app previously. And it was like, OK, maybe this is wasted space, but when we, I think, when we thought about it some more and kind of, like, slept on, like, these initial mockups, I think one of the main things that we kind of stuck to is what kind of, like, mood that we want to evoke with this app? And I think that’s something that you can kind of lose when designing cool products, is that, design on some level should be emotive, and it’s about creating as well, like a more, like emotional connection and not just, like, purely delivering information in a way.
So, I think the way that I personally like to think about it is, when we use white space, the user should feel, like, comfortable using, like, our product, whether it’s on web or on Android device. I think, it shouldn’t feel cramped. The experience should feel, like, expansive. But, when we take into account as well, what should be priority … We don’t make the user, like, search for things. They are able to do the first things that they need to be able to do. But that doesn’t mean that it needs to be, like, everything needs to be super cramped or something.
Liam: So you touched on, kind of … Using white space as a way to add this emotive quality to the interface. And is that kind of conveyance of emotion part of the identity of Blinkist?
Temi: Yeah, I think so. Like, as Natalia mentioned, with the typeface we didn’t just pick, OK this, you know, type is super clean and that’s it. We were looking for something that had just, little bit of quirkiness. And I think in general, like, with the brand personality, you’ll see it from, like, the choice in typeface, the choice in color, from the way that we communicate.
So then, in terms of creating an emotive experience … We always try and think about, OK, what is the brand personality? So for us, like, in house, we kind of have these values like, it should be human, it should be insightful, it should be curious. And we think about, OK, how can we make sure that we adopt this in all of our collateral, in all of our- all of the things that we do? And basically just make it appropriate for- for each platform, for each touchpoint the customer has.
