Material Design Awards, 2019

How four teams harnessed Material’s components and code to craft award-winning experiences

In this episode, Liam sits down with the winners of the 2019 Material Design Awards — Scripts, Trip.com, Reflectly, and Ruff — to discuss how they each adopted and extended Material to build expressive, inspirational experiences.

---

Scripts

Liam: All right, Maja, Thomas, welcome to design notes. 

Thomas: Thank you so much. 

Maja: Thank you.

Liam: So I wanna start off by getting the history of Scripts both as a product and it's designed direction. 

Thomas: Yeah. So scripts is an app that anyone can use who wants to learn to read and write in a new language, in a new alphabet or new character-based writing system. Scripts is our second app. So with Scripts, we're sort of like expanding our learning platform and now we have an app that is completely focused on teaching how to read and write. I think the main thing with Scripts is that we're trying to make it very interactive and fun to learn and very effortless. 

Liam: How would you define Scripts' identity and how does that come through in the app? 

Thomas: Everything in Scripts is trying to make it easy to form a habit of learning. So it is by a couple of different things. One, it's we're trying to keep the learning, the daily learning sessions, uh, short. Um, so you practice for five minutes every day, and usually even if you have a very packed schedule, uh, you can usually find five minutes to practice every day. 

Also, these sessions are quite fun and interactive, so you're drawing the characters and it's a pretty enjoyable experience. Finally, the look and feel of the app is quite colorful, uh, and vibrant and I think that just brings a pretty positive experience to the whole thing. 

Liam: So, Scripts won the award for experience. And I'd like to know a little bit more about how Scripts has created this unique experience with writing characters and learning new writing systems. 

Thomas: The way we teach character, uh, drawing in Scripts is, is literally by drawing on the screen. So you'll be using your finger and following some of these [stem 00:02:35] cells in the app. And in the beginning it's going to be quite easy. So you'll be getting a lot of guidance on like how to draw each character. But as you go along, some of these sort of guys are going to start going away and it's going to be harder and harder. 

I know this is really meant to sort of like build up your muscle memory in drawing these characters. Also, some of the characters that we are teaching in the Scripts, uh, each character has a specific meaning and when that is the case, we actually have sort of a visual representation for that character. So, um, we show a faint image of what the character means underneath the character. 

For example, what would be the, uh, the character that means tree or wood in Chinese, when you're drawing it you will be seeing like a faint image of a tree underneath the character. And this really sort of like reinforces your understanding of the character as you're drawing it as well as your recognize Busch shapes that you're drawing. 

Maja: Yeah. 'Cause you know the character actually is shaped similarly what it means. So it's just dream versus that.

Liam: Something that stands out to me from a visual design perspective is the system of color and gradients in the app. And I'm interested in learning more about how you think about that and what the system is like. 

Thomas: The colors in the app serves two main purposes. One, I think it changes your mindset from it being like a a chore or like a productivity task to being quite joyful and colorful. So it brings us in a game like a experience to it. 

And then we also map colors to different stages in your learning. So, depending on the difficulty level of the character that you're drawing, we will have a specific color for that type of game interaction. 

Maja: From a brand perspective, I think it's also a very easy way to like when you have the app open, you know it's the Script app, you have open, 'cause every screen we'll have a very unique way of looking at these colors, these gradients. So it's just um, from a brand point of view it's really to reinforce even your image of a script. 

Liam: I'm also interested in the connection between learning to write characters that have specific stroke orders and doing that onscreen, using your fingertips and then carrying that knowledge over to offscreen where you would actually be writing it with writing implements.

Thomas: In certain language, it's like the, the order of the strokes is paramount. So when that is the case, we actually show you like a number, and a dotted line and it's a sequence of drawing the, the character. So like the lines in the character and by doing this and like over and over and over again, you're building up your muscle memory. Not only like the shape of the character but also like the sequence of the strokes and that comes across when you're done moving from the screen over to like a physical media.

Maja: We realized that everyone uses their phones or their laptops to write these days like [inaudible 00:05:33] I think is still a thing, but most of the time we use our devices and swiping is just such a, an everyday interaction these days that I think is just a very nice connection that we teach something in such a digital way that you can later take and use even in an offline setting. 

I just think it's a very nice feedback we had from actually someone in housing the team that they have, uh, these graph here, and they said that for them being able to write on a screen, they're actually like learning the character is on a bigger scale as well. Like if you would just write it on paper, it makes it so much easier to learn it than if they had to, uh, write it on a paper with a pencil. 

Liam: So even if you carry that knowledge over to typing on a laptop, having that kind of intimate familiarity with how the character is structured is really helpful. 

Maja: I, I think so. 

Liam: Do you think that there are other unique challenges to learning a new writing system that are uniquely addressed by technology or by touch screens? 

Thomas: Yeah, I think technology can make something that is quite monotonous and make it a more engaging experience, a bit more vibrant and interactive. So I think that's a pretty big thing is, is moving us from like being quite a chore to pretty joyful experience. I think also the way I see it is like your phone is probably the thing that a lot of people ... it would be the least likely thing to forget when you're walking out the door. 

So, I think that combined with short, fun learning experiences makes it a pretty, uh, likely chance that you will form this habit of learning using technology.

Maja: And you don't need any other tools. If you have your phone, you're set. 

Liam: I'm interested in some of the smaller ingredients that go into building an engaging experience in terms of things like haptic feedback or animations. How do you see those contributing to reinforcing learning? 

Thomas: We use both, uh, haptic feedback and animation to bring context to the drawing. So for example, when we first present the characters here in the app, we, uh ... just an animation of the character being drawn in front of you. And I think that's the like prime to you on like, "Okay, so now I'll be drawing this myself." And also gives you like a, a rudimentary understanding of like how it's being drawn, and then when you actually draw with yourself, we have haptic feedback at the beginning of the stroke and also at the end of a stroke. And I think that just gives you a better sense of what's going on with a system and how it's reacting to your finger when you're drawing. 

We also have haptic feedback in animations when you make a mistake in a drawing, in a sort of like shaking his head and uh, you know, giving as if, if, you know what's going on and then you can correct. 

Liam: Something else that I noticed when I was trying out the app was that as I went through actually drawing characters, the app made me feel like I was doing a really good job because it took the stroke that I drew and kind of smoothed it out-

Thomas: Hmm.

Liam: ... and made it into the right shape. So I'm really interested in little small touches like that that kind of make the user feel like they're doing really well. 

Thomas: Yeah, a lot of it is probably like building up your confidence so we're not trying to drop you in the deep end right away. Uh, it's sort of like a gradual progression of ramping up the difficulty and I think that can just like give you a little confidence boost at the beginning of drawing.

Maja: Yeah. Which is actually my favorite thing about the app is this, that at first you already look like a pro doing it. So even people who think like, Oh, I would never be able to learn decent that alphabet because I just don't have the talent to draw like that even." I think it's a very encouraging way to get started by seeing that, "Oh my God, I'm doing well." And then later on as you are given more freedom, then you can actually see that you did learn how to write these characters. 

Liam: Another interesting point is that as a person whose native language is written in a Latin script, I feel like often when learning new languages that also use a lot in script writing is not necessarily something that comes to the front of my mind. So I'm interested in how you think about the relationship of learning a language and learning to write. 

Thomas: Yeah, I think basically both, let's say like learning to bright and uh, learning, let's say like vocabulary, which we also teach with our other app. Both of these are core fundamental building blocks of language learning. And I think basically no single app or no single experience will get you all of the way there with uh, learning a language. 

But I think having this focused experiences and building up these skills like yeah, independently in many different ways can really help you get there. 

Liam: Something that I like to ask everyone is about the future. So I'm interested in the areas that you see Scripts design moving into in the future as technology evolves and all of that. 

Thomas: Something that we did very recently was to release a ASL in the app, which is moving us in a, in a slightly new direction. Uh, so is LST American sign language for the deaf community and where that we actually worked with an illustration artist called Yiqiao Wang from Gallaudet University and she's deaf herself. 

And the way she had drew the illustrations had just all of the depth in the knowledge of the details that I think only someone who is likely deeply familiar with the nuances of it would be able to do. I think taking it in this direction and, uh, working closely with other collaborators is probably something we want to keep doing. 

Liam: All right, well thank you both for joining me. 

Thomas: Cool. Thank you very much.

Maja: Thank you.

---

Trip.com

Liam: Welcome to Design Notes. Why don't we start off, uh, with the introductions. So, what's your name and what do you do?

Momo: My name is Jiamin Wu, you can call me Momo. I'm the director for trip.com.

Hazel: Uh, my name is Hong Cheng [phonetic 00:00:22], you can call me Hazel. I'm the head of marketing design.

Liam: All right, so to start out with, I want to get a little bit of background on the history of trip.com and its design approach.

Hazel: Well, at first, hm, we aimed to create a tool which provides a convenient travel booking service, but we are now trying to, uh, become user's travel mate, accompany our users during the whole travel process.

And from the design aspect, at first we simply used the blue and the orange, which make up our logo, but from September 2018th, we started to build up a brand new branding system of our own, which contains cars, phones, uh, electricians and so on.

And then, following the release of our new brand identity, we also developed a new branding, uh, design concept of: your travel mate, always by your side. And from this year, February, we started to apply this new design system to the UI of the new version of our mobile app, making use of all the elements from the branding system for the first time.

This was a major update for us, and, uh, we made a comprehensive change to six aspects: the structure, the colors, the shapes, uh, the icons, the materials and th- the shadows.

Liam: And so, I'd like to know a little bit about what role material plays in this new approach.

Momo: Well, material design gives us a desired direction to begin with, and from there we can proceed with the design thinking, get inspired during the process. For example, since we have a main design concept of being a user's travel mate, and we also draw inspiration from the layout section, we designed our app's lay out structure more clearly to help users locate the information they want much easier, and, uh, to let them know we aren't the app. They are.

We also pay close attention to the material design feedback section. Since it placed, the important role of guiding users through the next step, uh, explaining the situation. That's why we designed so many different ways to express feedback in the app. Not just a button, but a set of illustrations and animations to display when there is no such result.

And also, a series of transitions between the pages. These pages help to show the users the relations, shape between the information, and, uh, show them where they came from, and, uh, and where they should go. And go next.

Liam: Trip.com won the award for universality this year. Uh, and I'd like to hear a little bit about how trip.com thinks about designing inclusively.

Momo: As a global travel plan from covering 23 countries and the regions in 19 languages, trip.com brings a high quality, unified and intelligent experience to its users around the world. 

Following on from our brand renew project, we have continued to improve our brand design to be more concise in the own trade. We also, uh, customize th- the design in terms of font, font size, light height, [inaudible 00:04:43], and other minor aspects, in different language, to suit different reading habits around the world, and then to insure our brand is consistently present.

To be consistent with our brand image as a global online travel agency, we also created a group of highly representative illustrated characters from around the world. They come from different countries and they speak different languages, but they all help bring to life trip.com's brand starring. 

Liam: How does trip.com think about accessibility? 

Momo: In terms of accessibility, besides what I mentioned before, that we took, uh, the font into account. We also paid close attention to color contrast. To be specific, all of our color combinations are now including test buttons, illustrations, meet to the international standards, in order to make sure the text and the background colors have sufficient contrast. 

And furthermore, when considering the people who are visually disabled, like color blindness and the color weakness, the use of color alone is not enough. So it's necessary to combine color with other methods. 

For example, on our booking detail page, we combined color with illustration and test explanation to distinguish virus order status. 

Liam: I'm interested in how trip.com manages to create an information architecture that helps people through that process. 

Momo: Well, I believe that many of us get frustrated by a complex booking, so it is important to- to simplify the whole process to users with a clean information structure. To improve the experience, we guide users to finish the process step-by-step, with the help of smooth, uh, transition animation. Besides that, if users from different countries don't have to change their habits when booking a product, the process will also become much smoother. Take the calendar design as example. Our China and Japan size, both Saturday and Sunday are highlighted. Why on the South Korea side only Saturday is highlighted? And as for the Russia side, that has its own unique design. 

Furthermore, efficiency is also important, you know, for success, for information infrastructure. Uh, we will say that although they are diversified products in our app, the actions and designs for each one are consistent. For example, our search page allows users to search for all our different products on a single page, create a unified feelings. 

Liam: Following on from that, I'm also interested in where you see trip.com's design going in the future. 

Momo: Well, in the near future, according to the guide of taxing, we will introduce trip.com dark version, which fits our branding system. So, we can look forward to that. And in the long-term, on the one hand, we will adhere to the concept of being a travel mate when designing, and, uh, try to provide users with a closed loop design before, during and after traveling. 

On the other hand, we are in the [inaudible 00:08:30] to be a group with strong responsibility, and we hope our designer can deliver the concept of traveling responsibility to make, you know, all our users more responsible travelers. 

Liam: Well, thank you again both of you for joining me. 

Hazel: Thank you. 

Momo: Thank you.

---

Reflectly

Liam: Jacob, welcome to Design Notes.

Jacob Kristensen: Thank you. Happy to be here.

Liam: So, to get started I just want to get a little bit of history on Reflectly, both as a product and it's design direction. 

Jacob: Reflectly actually started back in the beginning of 2017. We were a small company doing a lot of consulting work, and we had a hard time tracking our, I guess you could say, mood, because internally in the company we had, you know, some battles with consulting work. And, essentially we were feeling a bit down, a bit under the weather sometimes because, you know, the work was kind of a big load. So, we actually built this tool to kind of help us track, essentially, kind of our small wins and losses throughout this period. And quite quickly found out this was actually a problem for a lot of people not only in regards to consulting work but just in regards to like general problems they had in their lives, and kind of tracking their mood and seeing how they developed over time. 

So, we actually turned to the consumer-faced market with this product and looked at, essentially, what problem are we solving in the world that is at the center of this problem for people who have in their everyday lives? Essentially we were looking at going towards the Instagram generation, because we were just seeing a lot of people resonating with this project and the value proposition that we were putting out, especially in regards to having this safe space where they could essentially just vent. 

Essentially, you're seeing the world through the Instagram keyhole with the nice filters and everything looks great. Your friends are always on vacation, and you have this ideal that you strive towards obtaining but it's always unobtainable, and you always got to get more problems in your personal life.

Liam: Yeah, nobody's taking pictures of the bad stuff.

Jacob: No, everyone knows their own bad stuff but you don't like know your friend's bad stuff. We see a lot of people who take upon themselves to tackle these internal problems, and because it's Instagram, the generation, and because they're actually looking at, "I have this façade I have to keep up," a lot of people have a hard time even telling their best friends, or their family, the truth of what they're going through. And that's why we ... We see a lot of people who come towards a product like this, because it's a little personification of a, essentially a little robot that you're talking with, and you're just able to very freely, and very honestly, put in all your thoughts and all your feelings, and that's the barebone essential of kind of the core of what journaling actually is. It's off-loading all these feelings and knowing that they're stored somewhere.

Liam: So, this idea of forming a relationship with this little robot and being able to tell it all of the things you're going through is very central to the product. I want to know how you approached designing an experience around that that kind of reinforces that feeling.

Jacob: So, essentially, the first screen you're greeted by, actually at any point in time when you open Reflectly, is like a hello screen where Reflectly, as you would with a new person you meet, introduces itself. And then you go through a flow of getting to knowing each other. Essentially, Reflectly's asking you, you know, the first screen after you start onboarding the App is, you know, what do your friends call you, to kind of get a personal level of interaction, and without pulling out too much information from the user, because we essentially just need to know what they like to be called.

From there it kind of funnels down into a deeper relationship, so over time you build this level of trust with the App, which is kind of propagated through these flows that you go through within the App. So, you go through flows of questions, where you every day come through a series of different questions that you can choose to answer. But instead of actually going in and just giving people a blank page, which is actually where journaling fails, because a lot of people have a very hard time articulating what they're thinking, this rambling head just full of thoughts and putting it into words. That's actually a good gift to have, but very few people have that gift and ability to just like have a blank piece of paper and just like write. 

So, that's actually why we break it down to microinteractions where Reflectly will ask you a question and then instead of you writing something down you interact with a given piece of UI. For example, selecting an icon that represents how you feel, or you can use a little slider to kind of define your mood. It's all these small microinteractions which are designed to be very delightful, actually help build that relationship with the robot. So, the trust quite quickly is apparent for people and they quite quickly build that relationship themselves.

Liam: I'm interested in what role Material Design has played in inspiring the visual aspects of the App.

Jacob: Mm-hmm (affirmative). So, very early in my career I was kind of a quick adopter of Material Design. I love the idea of having a unified system for all your interfaces. And, this was back in 2014, '15 that popped out. And, on the flip side of that I also quite quickly recognized that it's hard to get, at least at that point in time, a unique feel for your App, or a unique look for your App, like very, very brand-specific look, because it was very much the same all across the board.

But, the very core principles of Material Design, you're having a piece of paper, and having elevation and, you know, giving it physical properties that they can't bump into each other and just like things can't merge through each other, the very core principles, I think, have stuck with me for a very long time, and still do today. So, a lot of that is rooted in what you see today in Reflectly, that you have a "material" that kind of morphs and animates into different shapes and sizes but also you have, you have a very physical restraint in the App that things can't merge through each other. They can't bump into each other. You have different levels of elevation. You have animations that drive the App. So, a lot of the things that, I think, were some of the core principles in Material Design I've kind of taken with me throughout the time and helped guide the way of how we designed Reflectly.

Liam: I also know that Reflectly, it's UI is built using Flutter.

Jacob: Mm-hmm (affirmative).

Liam: And I'm interested in if you think that that has given you like additional design affordances compared to other options, or like what role that's played.

Jacob: Yeah, Flutter was great for us. Previously we were using another cross platform framework which just wasn't really living up to the standards we had, and hoped for, to actually have a cross platform framework that just worked. That being said, we were, of course, looking at a lot of different options, even just writing it natively, just like in pure IOS and pure Android. But, Flutter we were quite early in the Flutter wagon, and we were in very late closed alpha when that popped out. And, it was great for us because we were actually able to see the performance level across the board, and we were able to do a lot of the complex UI that we had designed and hoped to be able to implement, like very easily. We also got quite a lot out of the box at some points in time. 

So, for example a key transition in the App is where the user clicks one of the cards in their journal and it kind of morphs into a new page and you have this very nice transition where you feel that some elements are carried over. For example, the key [real 00:07:22] image is carried over, and that is natively done in Flutter. So, they have a hero widget for that and it kind of makes things fly across screens and you get these lovely transitions, and it really helped the user know where they were coming from and going to. So, that is kind of all the way through being a lot of basic ideas of Flutter that we can implement or re-implement ourselves, but always on the backbone of the platform.

Liam: Reflectly won the award for innovation this year. So, I'd like to hear about specific things, or specific ideas, that come through in the App that make it innovative.

Jacob: I think a lot of the things that we do in Reflectly, again going down the path of keeping it, capturing a complex idea like an emotion of a human in a simple way very difficult, and you have to have a balance of keeping it understandable for the user so it doesn't get too complex, but also allowing them to have enough room to actually capture the given thing that they want to capture. For example, being it emotion in combination with different activities, in combination with random thoughts. Getting that boiled down and being able to interact with that in an easy intuitive way I think is an innovative approach we've taken. 

Another thing is we also use quite a lot of animations in the App, so we actually go in and use animations to drive affordance at a lot of places so you could, for example, see the main journaling page some things animate in, in like a staggered way so you kind of get this natural flow, but also things animate in a way that the main cards in your journal actually animate in from the side, staggered. So, you can quickly understand the forms of these cards of this block of widgets is that they slide left-to-right instead of going horizontal in the scroll. As you can quite quickly understand across a lot of the UI of the App that the animation actually helps the user know what the affordance is of the object and how they can actually interact with it.

Liam: So, with things like your systematic approach to motion and communicating things to the user that way, is that something that you've iterated on over time or what does that look like?

Jacob: The bareboned ideas of an MVP when you launch that is, you know, launch quick. So, back then it was very rugged, very bareboned, and over time we've really iterated on the idea of how we can implement more both delightful animations like the user feels playful when they interact with the App because they love the small microinteractions. But, also because the animations help us really dive deep into how the user should approach a different object. Also, if you look at a, let's say, again, the journal listing page, like the big journal page that we have, back when we started it was just, you know, everything loaded instantly. It isn't the best experience. You kind of just get everything thrown in your face, and the human mind actually naturally reads left to right and top to bottom, so having things stagger in in that order gives a very peaceful and natural way of looking at a UI and kind of getting introduced to it every time. So, that actually happens in a lot of places in the App where we kind of stagger things in for the user instead of it just plopping in their face.

Liam: Finally, where do you see Reflectly's design going in the future, like what's the next iteration on top of this?

Jacob: Yeah, so actually now we're in the process of redesigning a lot of the App. We call it version 3.0. So, we've taken essentially what we've learned throughout the last 24 months of being in the market and really diving deep with our users and hearing what they want in a product, but also seeing how they're using the product in a certain way that might not be as what we intended originally. Some, of course, very positive that they're using it in a different way than we intended but, of course, on the backbone of the platform that we've built. But, on the flip side also some things that aren't quite clear for users. So, we're actually going to be breaking a lot of the interaction down even further, kind of into what we, again, call microinteractions. So, instead of the user having going through these long defined flows that you would, you can draw the analogy over to going to the therapist, having a 10-minute therapy session every day. 

And, in the long run that might for some users get a bit hard to deal with, instead of going in and quickly logging down some thoughts or quickly putting in some emotions. So, that is, I think, what we will be looking into further going forward. I also think delighting users, giving them playful interactions. We just launched a new filter page which kind of has these little wobbly sliders so you can navigate them up and down, and when you release them they kind of wobble back and forth, like a very small thing but just a thing that feels so delightful and so playful you want to play with it a lot. That also is the idea of a very approachable and friendly UI, going deeper with that, actually adding as much empathy into the UI as we can. 

Also, in the response when a user's having a bad day actually changing UI to catch them and pick them back up, compared to when they were having a good day. Looking into that dynamic of the split between what a user is willing to interact with on good days versus bad days, something we're going to go quite deep with, because we can see it worked very well.

Liam: It strikes me that as you talk about the interface being able to pick users up and respond to what they are thinking or feeling that maybe the interface is always the conversation.

Jacob: I think very much so. The context that the user's in matters, you know, the most. Bringing stuff into the context for the user, and actually allowing them to have different experiences, novel experiences, throughout their time within the App, so it's not just like the same experience they go through every time, but it actually caters to their current mood and their current need is something we're looking a lot into. We've kind of dipped our toe in that world today, but going forward that is going to be a lot like a cornerstone of the App, even more than it is today.

Liam: Well, thank you again, Jacob.

Jacob: Yeah, you're welcome. Great being here.

---

Ruff

Liam: Bardi, welcome to Design Notes.

Bardi Golriz: Thanks for having me, Liam. It's pleasure to be on.

Liam: I want to start out just with the history of ruff as an app and its design approach.

Bardi: There are a couple of different sources of inspiration/motivation for the app. I mean the first one is from quite an unlikely source and that's Notepad on the computer. For as long as I can remember, I've depended on Notepad as a safe space for me to dump text into, basically.

For example, if I have an important email I want to write, or I much prefer the comfort of drafting it first in Notepad, and then once I'm happy with it, for me to move it elsewhere to the email client.

Or for example, I could be on a call with someone and there happens to be something I need to write down, I happen to be in front of a computer, I'll open up Notepad, I'll dump the text in there. So I mean, in both examples, and there's many similar use cases, the text is essentially in transit in Notepad.

The second source of inspiration was, there's an app on the App Store called Edit for iOS by The Audacious Company. And it's just a single page of paper. That's all it is. And when I came across it, I linked that back to Notepad, the way I've been using Notepad over the years.

And I was like, "I would like something that accomplishes what I use Notepad for on the computer, but for mobile basically." Whereas Edit is just that single page of paper, I decided to take the concept a bit further with ruff, by allowing people to set aside text to come back to later, which is a concept that I refer to as stashing.

Basically what that does, that increased utility basically gives the app a lot more versatility that enables the experience of using ruff, to be potentially unique per user. So for example, if you're a writer, you could be using it to draft different versions of a blog post, for example, or you could be using it a bit more conservatively, like a conventional note taking app, or it could be used as a clipboard.

Basically ruff, gives you the freedom to use it in whatever way you see fit, whatever suits you. It doesn't want or need to replace your text editor. It doesn't want or need to replace your to-do list. What it wants to essentially be is a springboard for your text when you're writing on the go.

And that's where the FAB actually comes into play, where the act of sharing becomes a fundamental interaction point. I wanted ruff to be something that is a pleasure to write in, but I wanted it to be as fast and easy as possible to move writing out of the app as well.

Liam: So you mentioned the FAB is a specific component that's helped with the functionality and the character of the app, but I'm wondering what other areas material played into creating this experience.

Bardi: So once I decided I wanted the app to be more than just a single sheet of text, when I introduced the concept of stashing, that's when material depth became a much more prominent UI element.

That's where the bottom sheet comes into play, where you can move between different elements that you've stashed, that you can fetch. Other influential elements was definitely the color system. The material color system played a big role, because I was well aware ruff is, what it may lack in functionality, I needed to more than make it up in terms of personality.

I mean, something I hear a lot of people say these days, but it was actually a legitimate requirement for the app, to be delightful to use. The reason being I was of the perspective that if it wasn't fun to use, then it would be a much less attractive proposition compared to, let's say, more feature rich alternatives.

Also, typography was as well for obvious reasons, a key element for the app and what I love about Material was the fact that it gives this non uniform flexibility to go with the style that best suits the content that's being presented to the user.

So that's why, given the transient nature of the text, that's where, for example, I decided that the default font should be a monospace font, for example.

Liam: Ruff won the award this year for theming. So I'd like to go a little bit deeper into how you thought about theming while you were designing the app and how you made some more of those decisions around what colors represent the app, what shapes you would use? That kind of thing.

Bardi: Like I mentioned, given the intentionally narrow scope, I knew that it needed to make that up with lots of personality and that sort of theming definitely came into the forefront.

I wanted ruff to present the writing environment that removed friction from the very idea that, okay, you're writing on your phone. So I wanted it to be pleasant to look at, and actually fun to interact with as well.

I wanted the branding to hit something of a sweet spot in terms of I wanted it to be warm, but not overbearing. I wanted to exercise restraint, but also to have a point of view as well.

So I mean, it's not something that I've actually ever done with my previous apps, but it was a core requirement going into the app's development for branding to have a starring role in terms of its development.

For example, it was really important for the entire development stack, from say, copywriting all the way to marketing, for there to be personality in the app. I mean, it was a first for me, but it definitely won't be the last.

So, I mean, in terms of the colors used, I wanted something distinct because there's millions of apps on the Store, and whatever app you're creating there's probably hundreds, if not thousands of apps doing that same thing. So it was important for me to create something unique and distinct, something that can stand out in terms of competition.

Liam: I'm also wondering what it was like from the perspective of a developer implementing theming. So the actual code behind it, and whether that experience actually informed any of the decisions you were making, or if you found unexpected things that may have changed the direction.

Bardi: The thing that definitely helped was the Material Components. The documentation was incredibly helpful in terms of providing just the right amount of guidance and flexibility in order for me to put my ideas into practice.

For example, with the color system, that's something that I constantly refer to throughout development, in terms of picking the right colors for the job.

That's where a lot of the basis for the three different themes where you got light, you got dark and you got black. A lot of that was on the back of having that reference point where the Material color system provided.

And in terms of the shapes and everything I used, a lot of it is all these different components within the library. Me kind of doing my own remix with them, putting them together. So you got the bottom sheet, then I've got the FAB that goes with it. It was a really fun experience because this was like the first time where I've had this impressive toolkit to work with. And I only had my imagination as a constraint in terms of how do I get these pieces to work together.

Liam: One other thing that I've noticed is that even since the awards were announced, there have been updates to ruff and it still manages to maintain this really strong focus on the sheet of text that you mentioned before. As the app continues to grow, how do you think about adding new features to an experience that has to stay so essential?

Bardi: That's a really great question because since it launched in the summer, it's been evolving quite a bit, but I'm quite conscious of the fact, like I mentioned at the start, the core simplicity is like a fundamental design choice.

So I'm conscious of the fact of introducing more and more features based on feedback at the risk of adding complexity, unnecessary complexity that makes the app lose its core essence. So I'm being very carefully considered in terms of what I add into the app as I go along.

So for example, like you got the bottom toolbar, which didn't exist when the app launched originally, but it was something that a lot of people were asking for. And I took my time in terms of how do I introduce this functionality without taking away from having a clear, simple sheet of text for people to write into. So I took my time with that.

With everything that I do, it's just finding that sweet spot, design sweet spot to make sure that I manage to add more utility, but at the same time, maintaining, preserving as much of that core simplicity that made the app, let's say, popular with its original set of users.

Liam: And taking that bottom toolbar as an example, what was your thought process on how to add that? And how did you come to the implementation that you did?

Bardi: One of the core requirements with the app was for it to be optimized for single handed use. And I don't normally enjoy the process of writing on the phone. It seems like something of a chore. And I think part of the reason is because it could just be a personal thing, but I tend to use my phone with one hand. And so a lot of the design decisions are motivated by the fact, how can I introduce feature X or Y while being optimized for one handed use? So that's where the bottom toolbar, it became an obvious choice. It needs to be within reach. So it makes sense for it to be at the bottom. By being in the bottom, also away from the text, because the other main requirement was for the text needs to be the primary focus at all times, Content over Chrome. So that made an obvious choice, an easy decision almost for it to be at the bottom.

But then, some of the details behind the final implementation of the toolbar was that I could have everything displayed at once, but then they would result in smaller target areas for every button. So for example, I can have the options to add bold formatting, italics, underlying. I could squeeze everything so it's visible at one time or I could do something different. I could double down on the whole concept that this is an alternative way of doing things. Instead of having, for example, just a B to represent the changing the text to bold, have the entire text show. So it says bold instead of just the B. There's pros and cons under our approach. It means you can see less things at a time, but also means it's much more difficult to make mistakes, for example.

So that's where the whole concept of the scrolling list came into play. So you have this horizontal scrolling list that in theory, I could continue to add different functions to. So it gives me that flexibility. So it's kind of future proof in a way. And it also gives me the flexibility where if you scroll onto one side, you get the quick settings as well. It's kind of like, how do I get what people want, which is formatting options, but how could I do it in a way that is potentially better? Because doing it different is easy. Different is always easy. Different is not difficult to accomplish, but I want it to be different, but also be better as well at the same time.

Liam: I always like to close by asking a question about the future. So we've talked a little bit about how you plan to kind of evolve ruff's functionality in the future, but I'm interested in your thoughts on where the design or even the personality of that might go.

Bardi: At the moment, it's intentionally a single sheet of text. That was quite intentional, but definitely something I'd like to explore is the possibility of having multiple writing surfaces. I don't know whether I'd be able to accomplish that, but that's definitely something I want to be exploring.

Because, like I said, that versatility, I think it could open up the app to do many different things that it's not currently capable of doing. The other areas of improvement that I'm currently looking at, probably more realistic and more in the short term is this whole concept of stashing and accessing items within your stash. Because originally to go back a bit, the original designs of ruff in order to access the items that you've stashed away, they were a right swipe away. So the thinking being, okay, I want that main view to be completely focused on, right? Nothing else, no other UI, but it just didn't feel right.

In terms of, it felt a bit too disconnected both physically and conceptually from the main writing surface. So what would happen was it felt a bit more like a conventional text editor. It felt like I was loading files rather than fetching texts, if that makes sense. And it felt as though whenever I was loading things, it was loading to a new writing surface as opposed to over the existing one.

So that never felt right. So what happened was I decided that's where everything moved into the bottom sheet overlay, where it just immediately, everything felt more right. Conceptually and physically, it felt connected to the main writing surface. Like I was actually writing over the main text area and I also didn't feel like I was dealing with files, in terms of loading and saving files.

There wasn't that much personality within the app in terms of its visuals. But that's something that I'd been gradually adding into the app. So for example, you have, when you swipe to stash text, you got this icon of a dog with a piece of paper in its mouth. So that kind of thing is stuff that I like to sprinkle across the app more. And it's something that I've been doing progressively, but yeah, it's definitely, because I think in terms of an app's overall personality, the fundamentals are there for me to work with and to improvise further. So that's definitely a goal moving forward.

Liam: Well, thank you again for joining me, Bardi.

Bardi: No problems, Liam, it was a pleasure.

Material Design Awards 2018

How four teams harnessed Material’s components and code to craft award-winning experiences

In this episode, Liam sits down with the winners of the 2018 Material Design Awards — Anchor, KptnCook, Lyft, and SimpleHabit — to discuss how they each adopted and extended Material to build expressive, inspirational experiences.

---

Anchor

Emmi Hintz: My name is Emmi. I’m the lead product designer for Anchor.

Michael Mignano: My name is Michael Mignano I am the co-founder and CEO of Anchor.

Liam Spradlin: I’d like to get a bit of background on Anchor as an app. So, how did it start? Uh, what is the philosophy behind it?

Michael: Sure. So, my co-founder Nir and I had both become fairly obsessed with listening to podcasts but when we tried to make one on our own, found it to be extremely difficult. This was around the time that podcasts were starting to have their resurgence and renaissance, you know, around the time of serial and startup and podcast like that. We felt there was an opportunity to make the entire process much, much simpler both from a creation and consumption standpoint. The very first implementation of that idea and that notion was to remove as much friction as possible on both sides, and the result was basically (laughs) a social network of course. It was a stream of, of content.

We thought of them as like miniature podcasts. We called them waves. I think we found pretty quickly that the consumption experience left something to be desired. It was very sporadic. It was hard to get in a rhythm of listening. I think we learned pretty quickly that we were probably best serve to just make it easy to podcast. Make a normal podcast like we’re creating right now especially as the medium picked up more and more steam and became more and more popular. Many, many more people that wanted to create podcast but no simple end to end solution that did everything.

Liam: Right. Yes. Speaking of someone who makes a podcast, there is like a ton of overhead to that.

Michael: Yeah, totally.

Liam: I think listeners who have been listening for a while probably know that Design Notes used to be an independent project that I just recorded from my apartment, and at the time, I was like, you know, I don’t know where podcast come from or like how people get a podcast onto a platform in the first place.

Michael: Yeah, there’s a ton of education that goes into it. I’m sure like one of the first things you did, tell me if I’m wrong, is you probably googled, how do I start a podcast?

Liam: Right. (laughs)

Emmi: Yeah.

Michael: You know, there’s buy the expensive microphone. You know, uh, figure out how to edit audio.

Liam: Yeah.

Michael: Upload and host it and pay for hosting and then oh by the way, you have to like submit this RSS feed to all these different places and that whole thing just seemed nuts to us. It was like this is we, we all have these smart phones that are connected to the internet. Why isn’t this way, way easier?

Liam: So, Anchor won the award for adaptation and obviously it has a really unique aesthetic that flows pretty seamlessly between iOS and Android but it manages to feel organic to both platforms. I’m interested in getting a little bit of history of Anchor’s design up to this point and also how you were able to enable this really consistent experience.

Michael: I think, you know, thinking back to the early story of Anchor that I just told, um, especially when it was, um, more of a social experience, we had this very strong perspective and philosophy in a concept. We were referring to as audio first. It was really kind of a design concept where every experience we designed was not only meant to put the audio sort of front and center but also imagine a world in which you weren’t interacting with a screen and touching a screen. It was, “Okay, let’s design things for a screen that can function if and when the screen disappears.” And, I think what became more important to us was just familiarity across all platforms, right?

Being able to pick something up on your phone and then finish it on your desktop or on your tablet or something like that. And, I think the other thing that we really kept in mind from the beginning was, how do you make podcasting feel fun and light and playful and intuitive? Kind of all these things that I think people don’t really associate with podcasting. You know, you think of podcasting and you think of, you know, person in a professional audio studio wearing headphones and, you know, a big microphone.

Honestly, similar to like what we’re doing now but in like a, a state of the art studio that probably cost, you know, thousands and thousands of dollars to build. You don’t think of fun and, you know, mobile devices, and color. And, so I think from the beginning, the other thing that we felt very strongly about was, “Let’s make podcasting seem accessible. Let’s make it seem kind of less formal and maybe in a way that like doesn’t take itself too seriously.” Um, and I think both of those concepts more the latter are definitely still relevant in the product today.

Liam: I think that’s a super interesting point because the conceit of podcasting is that it is an open platform where people should be able to express whatever they want, but obviously if that’s difficult to do, then it’s not really living up to its purpose. So, I think that’s a really interesting approach. I like to know what the role of material design has been in your approach to crafting that experience.

Emmi: I was using material when it first came out. And, I think it initially came out as kind of like an Android specific design language, but now over time it’s evolved into like so much more than that, and that’s why I think it works really well for us because it’s become just a philosophy of design to kind of simplify and create an experience that’s easy for people to use and just a lot of the components like the floating action button for example, something that we use to kind of help people understand like I said the main focus of the app which is to create your podcast and all the tools that we have. Uh, we also kind of used the choice chips to help people select and understand the right way to create their podcast hour and then we also use it … the tabs in our profile to help organize, you know, where your podcast are distributed and all of your episodes and just to help people really be able to organize and create their podcast in the most easy way. So-

Michael: Yeah, and just, just to add to that, um, what Emmi said about how it felt like early days material was specific to Android, but you’re starting to see the influence of material everywhere and on every platform. Even just this morning, I for the first time, I don’t know if this is new design element or something that they just shipped, but I was using the Twitter app for iOS and I noticed that Twitter for iOS has a floating action button for composing a tweet. It kind of struck me that the influence of material had really spread far, far beyond Google and Android from when we first recognized it a few years ago.

Emmi: Yeah, and I think it was just like the tangibility of material design, um, with visibility with recording, you know, the action that we have of pressing this big red button to start recording that something that I think we really utilized and has helped people kind of, you know, feel more natural for when they’re recording a podcast like they’re pressing this button and it makes them just feel, you know, more connected to it. And, and, I think just makes it a lot more approachable and easier for people to express themselves.

Liam: Speaking of seeing a floating action button on iOS, I’m interested in some of the components from material that you’ve used that maybe you’ve had to adapt or tweak between platforms and what that experience has been like.

Emmi: Yeah. So, I think we actually in our first version of 3.0 did a version of a FAB that had multiple and it was a little bit too overwhelming for people, so we went back to the one purple plus button that brought you into this creation experience. I had done Android design for a while and then coming into this … doing both iOS and Android it was very easy for me to, you know, have it work for both iOS and Android and I think it’s just a concept that users are very familiar with that when any time you wanna add something in a specifically for a creation I think it makes a lot of sense. So, the floating action button just was a natural fit for iOS as well.

Liam: You’ve both said now that color and animation are very important to Anchor and I think as a designer the color story comes through really clearly to me. As a user, people might not notice it but I do think it forms a consistent story in the app and I’m interested in more detail on how you approach color from a systematic perspective.

Emmi: Yeah. So, I think the way that we’ve gone about using color is each tool, um, has a color it can identify with. And, we, you know, use that color to represent the tool. So, anytime you add content to your podcast from that tool for example are transitions or all pink or recordings are all red, music is all blue, and I think that helps people to identify, you know, when they’re looking at creating their podcast, they can see clearly all the different components that go into making a podcast. I think that really helps people understand the concept behind podcasting, which is, you know, it’s all these audio components that come together to form one awesome audio experience.

Michael: There’s also like a branding exercise there as well. I think the colors are definitely useful for identifying what these tools are and then I think it also help soft of establish them under these sort of like sub brands of Anchor which gives them more weight and feels a little more special like, “Wow, this is the recording tool inside of Anchor. It has this identity.”

Liam: So, it sounds like there’s a really interesting relationship between Anchor’s identity and how the components of that identity function to create this consistent experience in the app that flows between platforms. I’m also interested in things like portraying the recording itself. I think that podcasting has this interesting relationship with the imagery of broadcasting or older means of audio production. And, because Anchor wants to make podcasting feel accessible and fun and like I guess modern or contemporary rather than referencing old modes of production, I’m just interested in like how you think about that relationship.

Michael: This is a really interesting point and something we think and talk a lot about. If you try to think through some of the visual representations of audio, you’ll naturally at some point land on your classic traditional waveform, right? Like the actual scientific waveform that represents the sound and, uh, it’s, it’s always tempting I think as designers to lean into that because it is like one of kind of a few visual representations you can really come to when you’re thinking of sound, but it’s also a very technical and very intimidating. And, and I think for that reason, uh, for a long time, we were kind of like, there should never be a waveform in the app because that’s too unapproachable. The representations of audio have been less useful waveforms, like less useful representation of the sound but more just sort of representative of the sound.

So, we’ve had the smooth rolling animated waveforms that don’t really carry any visual information about the actual content of the audio, but indicate to you that there is sound. It’s funny we actually just for the first time, the company has been around for three years, just what like two months ago for the first time ever did a waveform like make it’s way into the product when we released mobile editing tools. We used to have editing tools and we will probably revisit them at some point that were purely based on the transcription of the audio. We would transcribe the audio into text and we would let you work with the actual words to edit your audio.

But, um, the truth is we have more and more users using the app now that are maybe slightly more professional or want a little bit more power in their control of the audio, and the bottom line is the only way you can really get that precision is with an actual waveform. And, so, we kind of gave in on that recently and accepted like, “Okay, for editing, this, this level of editing like we just need waveforms.”

Emmi: Yeah. So, we’re kind of trying to be a happy medium between professionals and, you know, new podcasters. And, I think our philosophy is to simplify down to the most basic form the editing tools and create something that everyone can use but still powerful enough for professionals.

Liam: Right. Well, thank you once again for joining me today.

Emmi: Thank you for having us.

Michael: Yeah, thanks Liam.

KptnCook

Liam: KptnCook helps users decide what to eat, providing three unique options each day with large compelling imagery, step by step directions, and easy shopping functionality. KptnCook won this year’s award for expression building a highly expressive yet focused and restrained inspirational experience. In the interview, we explored the app’s unique approach to imagery and iconography, how strength can elevate expression, and lessons learned along the way.

Eva Hoefer: My name is Eva and I’m the co-founder of KptnCook. Uh, at the moment I have the role of the COO, and I used to study design actually.

Lene König: And, my name is Lene, and I’m the visual designer of KptnCook.

Liam: I like to get a little bit of background about what KptnCook is. I’m interested in how you think about the product and what the motivation was behind creating it.

Eva: KptnCook is all about simplifying the daily dinner decision so that everyone has a- each day the question “What’s for dinner?” and doesn’t know what to cook. And, we really wanted to give people a simple solution for this. And, that’s kind of the core motivation that we had when building the app. We present only three recipes per day which, uh, changing everyday so people can discover each day new content. And, all of our recipes are connected to the inventory of supermarkets, so people can get, uh, inspired online through the mobile app again … then can, uh, get to the next store actually and shop the ingredients.

Liam: Briefly, I’d like to know about the history of KptnCook’s design as an app. Uh, so how has it evolved over time?

Eva: So, the core idea for the app hasn’t changed so much, um, through the history but I remember when we started we even thought, “Hey, it would be actually nice if people don’t need to shop actually themselves but rather implementing an online ordering connection.” But at that time, we were looking at the market doing some interviews and we’re realizing that people actually do, uh, still shop offline and 99% actually go to the next store and do their weekly grocery shopping there. So, then we, uh, switched kind of a little bit, uh, the initial concept and really supported this offline shopping at your local grocery stores. So, recently, for example, we did a new version where we have a shopping list that can be built out of more than one recipe, because before that, each recipe had it’s own shopping list, but people were telling us, “When I go shopping, I usually don’t shop for just one recipe, but I wanna shop for two or three meals.” So, that’s why we changed again or developed it further in order to support that customer behavior.

Lene: Also, with that, not to use, um, images but ingredients so that it’s even like easier for the user to see at first glance what, what ingredients they need for the recipe.

Liam: I think you touched on how you represent ingredients in the app which leads to something that stood out to me which was the custom iconography that you’ve developed inside the app. So, I’d like to talk about first of all how that icon set was created or developed.

Lene: We decided to make, like, very light, um, outlined icons, um, so they don’t have very much weight because I think what is always our focus are our pictures actually because we present them, um, full screen, and they’re, like, very present, and very chunky, and very vibrant, um, and colorful. So the whole design itself is stepping back a little bit, so also the icons are very light and, um, very reduced. They’re not colorful. We only just use them in the, like, white color.

Eva: We did, actually, a test also in the beginning, and we used color, but then we found out that when … as soon as color, people will click on it, and you can’t really click on the icons, so they are not buttons, so nothing’s happening. And that was another reason why we really had this more minimalistic approach. So they are just there for information, so if it’s either a vegan recipe or with chicken, or with pork, so it’s just there for information and not really for interaction. And that’s why they are really minimalistic and … yeah. Simple.

Liam: You raised an interesting point. I think that oftentimes when we think about building something that’s highly expressive, we think about adding visual information. But since you have this focus on imagery, it sounds like your approach is actually paring that back, and forming, like, a reduced expression that actually gives more power to the imagery.

Lene: Exactly. I think that’s what it is. Just giving, like, most of the attention to, to the pictures and taking everything else back as much as possible.

Liam: As you’ve developed the visual design of the app, have you continued to find things to remove or refine?

Eva: Yeah. Definitely. For example, I mean, um, we show only three recipes per day, but we allow people to save recipes that they like in their favorite list. And, uh, in the beginning, we were not so much thinking about what’s happening in the favorite list, actually. Um, because people were saving 10 recipes and 20 recipes. But as soon as there are more recipes in your favorite list, of course you need another filter because you search for chicken or a vegan option, and that’s where we thought, “Okay. How can we make a nice and playful filter which is not just a normal search, but really, uh, motivates people to use it and is really delightful and engaging?” So this was another component, then, that we added on later.

Liam: And taking that philosophy and returning to the conversation about iconography, I’m very interesting in how you approach creating a new icon for something, so how you go about translating an idea into a very simple, kind of light icon that can fit into the interface.

Eva: I think it starts with a sketch, and then maybe you have different ideas on how the icon show look like and then transfer it into a vectorized, uh, graphic icon. And maybe have even some tests where we show people if they know what this icon means, and when enough people know what it means (laughs), uh, that’s sort of our internal test. Yeah. We, we put it in the app and then, of course, we see how users also use the app. We look at data in the end and see how everything works when it comes together.

Lene: Also we have a combination of, like, self-made icons and Material Design icons in our … like, we also use Material icons, for example, for the [inaudible 00:19:26] because for [inaudible 00:19:28] users, it’s just they know those icons and they know what they mean, so it’s also quite helpful to use the Material Design icons.

Liam: How have you found the Material icons to interact or relate to your custom icons? How do they work together?

Eva: So actually, each icon set has sort of different functionality. So Material icons we use mainly for, uh, for example for the navigation, the main navigation bar-

Lene: The profile, the setting page.

Eva: … the profile, and the customized icon that we did, uh, has the main function of, um, categorizing the recipes, actually. So it’s a bit of different places where people would find those icons.

Liam: I’m interested in maybe other examples of where Captain Cook has used this philosophy of restraint and, like, paring things back to actually create a more expressive design.

Eva: Yeah. So actually, what we are trying to achieve is really guiding the users through the whole customer journey. So we have these big three parts which are inspiration, shopping, and cooking. So although this is quite complex in the first place, we really thought about how on each of those touchpoints within the user journey, how can we help the user the most. And this means cut down. Don’t have too many interacts, too many options what the user can do, but have really this minimalistic approach to guide the user.

Lene: We’re not using a lot of colors, so I think we have a primary color which is, like, a copper red. We have a secondary color which is a cream, which we use for buttons, as well. And the rest is mostly … like, we use a lot of grays. I think that’s also restraint, not to use too much color because we’re having these vibrant images, so they don’t compete with each other.

Eva: Yeah. And also, with the Material Design in general, it’s so great that you don’t have to invent everything from scratch. So the system is there. The basic layouts and the grid is there. So you can first start when developing the app with the system. And the second step, ask yourself, “Okay. What elements can we add to make the app really a Captain Cook app, and that it’s really different? Uh, “What, what differentiates us?” And, yeah.

Eva: And the, the most important thing, I also think, are the pictures. So we really looked at how can we make the pictures as big as possible without losing so much space with navigation bars and so on.

Liam: Speaking of imagery as one of the primary components of expression in the app, I’m interested in, you know, the editorial approach that you might take to choosing imagery or ensuring that the imagery that’s showing up fits with the aesthetic that you’re trying to build.

Eva: Mm-hmm (affirmative). So first of all, what we do is we don’t use user-generated content. So all the images are shot by ourselves, by our internal content team. So although the authors of the recipes might be food bloggers or other people, we sort of do the whole production to really keep a consistent look and feel, uh, throughout the whole app. Yeah.

Eva: And the imagery is, I will also say, colorful, bold, full of contrast. And also diving a little bit deeper into this, also for each dish, we think, “Okay. What’s the main characteristics of this dish? Is it a light salad? … Or, speaking of food photography, we put it on a light background, lots of white … “Or is it moody atmosphere?” Maybe you have a nice comfort food dish.

Eva: So also there we put a lot of effort into thinking how can we not just present the images within the app, but also the dishes within the images sort of.

Liam: So it sounds like kind of a parallel process, just comparing it to creating an iconography. In both cases, you’re determining, like, which details are the defining pieces to each thing, and then kind of bringing those to the forefront. Cool. Well, thank you both again for joining me today.

Lene: Thanks for having us.

Eva: Thank you.

Lyft

Liam: Lyft won this year’s award for innovation, using Material components like bottom sheets and extended floating action buttons in impressive and unexpected ways, extending Material to craft a unique and a highly-custom experience. In the interview, we unpacked the experience of customizing Material, the importance of design systems in growing teams, and plans for the future.

Linzi Berry: I’m Linzi. I’m the product design lead on our design system called Lyft Product Language, uh, that was released as part of the redesign of our new passenger app.

Lin Wang: And I’m Lin. I’m the lead designer on the, uh, Android passenger app from Lyft, and we, this year, just launched our redesign.

Liam: Great. So just to get started, I would like to hear a little bit about the history of Lyft’s design overall.

Linzi: So Lyft’s design overall started, I think, like, seven years ago, um, with a really small team. And over time, we went from a team of 20 people up to a team of now 100 designers (laughs). And as soon as you go through rapid growth like that, you start looking at the benefits of a design system, um, and we looked at Material Design as a best-in-class system, uh, as a way for us to, like, start building our own and taking the things that worked well from Material and then expanding on it into our own world for our own use cases.

Liam: You mentioned kind of looking at the benefits of adopting a design system. What are some of the things that stood out to you as being beneficial?

Linzi: A big thing for us is we have two different apps that have to interact with each other all the time. We have a passenger app. We have a driver app. And if those two things, even in those moments, look different, then it can cause, you know, panic potentially (laughs) to be like, “I’m a passenger getting in this car. I see this app that looks nothing like mine. Do I know that I got in the right car?” Right? And there’s, like, moments there where we can use design to make people feel more comfortable and at ease with our product.

I think another side of that is reduced time and tech debt from designs and development in general that they don’t have to redesign or rebuild buttons or things that are super simple over and over again.

Liam: So Lin, you lead the design on the Android passenger app specifically. What is the experience like of implementing the design system that Lyft has? And what’s the back and forth between those two things?

Lin: (laughs) Yeah. So the implementation was, uh, pretty interesting, and that’s another reason that we love the Material Design because a lot of our Android engineers, they already have a lot of knowledge about how Android apps works. So, all of this comes very natural when you work with the Android engineers. It just makes everything easier, and they actually also really appreciate that we adopt Material Design because we work in the, on the same goal and the same kind of belief in how interaction should be. It actually was a very pleasant process.

Liam: Lyft won the award for innovation which entails taking Material, but also building on top of it and taking it in new directions. So I want to hear about just some examples of where Lyft has been able to do that.

Linzi: So last December, we ended up working with the Material Design team. Uh, we did, like, a workshop sprint with them. And one of the things that we came out of that with was in regards to elevation in particular, Material’s system went from, I think it’s, like, zero to 24DP. And when we showed them what we were dealing with was essentially, like, a map world and then a panel world that lived on top of that map, that elevation system didn’t work 100%. So we ended up working with their team to come up with essentially a split elevation system that would work for our map world and then also our panel world, which is pretty cool.

And then we also worked with them on our fab. We have essentially a elongated version that Material added as part of this new release, uh, and the original circular one, and then how does it actually, like, animate in between the two, uh, when we’re going through particular flows.

Some of the things that we’ve done are around when we’re talking about legibility as well. Uh, we scale our type for our driver apps to make sure that they can still read it when it’s at, you know, a 24-inch distance versus a 12-inch distance, which is handheld. Uh, so it was even taking that Material items that existed and, like, making a bigger version for everything that we needed.

Liam: You mentioned the [inaudible 00:28:10], like, really quickly. Um, I actually do want to turn over that leaf a little bit because I think something a lot of folks struggle with when they’re adopting Material is the relationship between Material components and other platforms’ components, like those on iOS, and how to negotiate which things belong to which system.

Liam: So how do you think about that?

Linzi: Yeah. That’s a great question (laughs). On my team in particular, uh, it’s usually myself, uh, an iOS engineer, Sam, and our Android engineer, Kathy, and we will have- Yeah. Kathy’s awesome. Shout out.

Lin: Hi, Kathy.

Linzi: And we’ll have conversations at the beginning of every element that we do because we want to make sure that, like, when we name something in our system that we share it across design and engineering, and that means across iOS and Android as well. And sometimes we’ll go like, “Okay. Well, what does Material call it? What does the [inaudible 00:29:08] call it? How do we split the difference? Or which one actually makes the most sense for us?” We’re gonna learn the best from both, and then we’re gonna say, like, “Hey. This is what we think we should do based on, like, all of the research that we’ve done across both of them.”

But I think that, like, in general, Material’s pretty agnostic sometimes. Like, there are some Android-specific paradigms within it, but I think across the board, it’s been really good at thinking in the forefront of not just being for Android, that, like, they can solve it for iOS, too. And that’s obvious with, like, the iOS apps that follow Material.

Liam: So you mentioned using the extended fab in a lot of places and the version of that fab that Lyft uses is pretty heavily stylized. You have this very strong edge, the elevation you mentioned, as well as, like, a gradient color and typography, and things like that. So I’m interested in some of those moments where you implement Material principles or components in a very customized or novel way. Um, what were some of the constraints that you ran into, and how did you handle that?

Linzi: I think that there are some elements that are highly customizable, and we’ve had, like, no problem working within those constraints. I think the extended fab and button in general are ones where, like, the Android team has praised how easy it is now, especially with themeing and everything else, that they can, like, build it pretty quickly and within Material’s guidelines, and the extended fab being one of those things.

Linzi: But I think there are others where, of course, like, we’re trying to push it almost too far outside that spectrum, and that’s when they’re like, “Okay. This, like, might break down (laughs) in this scenario.” Like, text field … we’re trying right now our best to be like, “Okay. Can this fit within this world? Like, what do we need to change based on how this works across both iOS and Android?”

Um, so I, I think overall the experience has been pretty great with the new release of how easy it is to style it.

Lin: Yeah. And they can just share components. It’s very easy to tell them, “Oh, you know, you can find this component from this library.” It’s a lot easier to communicate what they need to build, and then they also have a point of reference so things are more consistent and result in higher quality, which is what we’re going after. So I really like how we built all these components and it became like a communication tool for designers and engineers.

Liam: Are there still places in each app that you want to push Material in the future? And if so, how?

Linzi: I think that right now where the limitations might come from Material is depending on, like, how strict it will remain to be, or how open it will become because I think right now it’s in the very unique place where themeing is now available. You can change certain elements, but other ones are still restrictive. And I think where it will come into play is, like, for us in particular, we have tons of discussions around elevation, because elevation in that world, especially in Android and how it’s built in, it changes depending on if an element is at the top of the page, or if it’s at the bottom of the page, and how the lighting will hit. And now that we have this, like, split world scenario happening, we got some, like, rogue shadows in there. (laughs)

Liam: (laughs)

Linzi: And I think depending on, like, how much it will scale and the flexibility of where it’s going, like, I think animations is where I’m super excited to see where material can go, ’cause right now I think like animations, at least from like what is available in building it versus, like, it being more of a guideline is an interesting place. ’Cause the guidelines are phenomenal, but actually building it would be really, really valuable. And I know our team in particular has been talking with the material team on like how can we make this super dope? (laughs)

Liam: Yeah. (laughs)

Linzi: And mapping, and map styling, if, if that ever gets added would also be phenomenal. I would love to see it.

Lin: When we were working with maps, there were a lot of, uh, constraints, and then there’s a known … Like, what’s the best way to interact with the map? We’re just kind of learning along the way, but if there could be some guidance around how people interact with map and how we can do that on IOS and Android that feels just natural to you, even if you switch platform, that would be really great.

Liam: Just to wrap up, I wanna ask a more general question about how you see Lyft’s design and Lyft’s design system evolving into the future.

Linzi: I think Lyft’s design is in a really interesting place right now. But I think that, like, we … We have such a focus on quality right now and I think that, like, as we go forward, looking at really making, you know, design in the forefront of what we’re doing. And I think, like, from a user perspective, like, how can we start looking into, like, personalization with that as well.

Lin: Yeah. Similar to what Linzi said, like, how we adopt material design or the system design, and how do we create the best experience for our users. And also, I just think Lyft should be a very universal app that anybody, in any situation ideally, should be able to use it. So a lot of the usability, accessibility stuff, I really, really think should be, like, what Lyft really focus on all the … whenever they design anything for Lyft. So-

Linzi: Yeah, caring about all of our users.

Lin: Yeah, caring about all of our users. Yes.

Liam: Cool. Well, thank you both again for joining me.

Lin: Thank you, yeah-

Linzi: Yeah, thank you Liam, this has been great.

Lin: Thank you for having us. Yeah.

Simple Habit

Liam: Simple Habit helps users relieve stress, clear their minds, and even get better sleep through short, guided meditations from a number of instructors. The app won this years award for experience with innovative interface patterns, branded typography, and subtle motion cues that guide users successfully, no matter when or how they approach the app.

In the interview, we unpacked building a holistic experience that works for users in different situations, and what it’s like add new features to a product that already feels complete.

Michael Xia: I’m Michael. I am the CTO of Simple Habit, so I run the engineering team.

Valentin Drown: And I’m Valentin Drown. I am Lead Product Designer.

Liam: Cool. And first, just to get started, what is Simple Habit? Or how would describe it as product?

Michael: First, Simple Habit is a app for daily stress relief, so we want to make reducing stress as simple as just taking five minutes a day. And we sort of present this in our app for people to consume this content so they can, you know, relieve their stress, improve their sleep, and feel happier.

Liam: I’d also like to know just a little bit about the history of Simple Habit as a product. What are its origins and how has it evolved over time?

Michael: Yeah, so our founder, you know, had this idea, had this dream when she was working on her first startup. And by working so hard, she would really stress out, and meditation sort of helped manage her stress and, you know, improve her sleep. And she really got into meditation. But the problem she found is that all the meditation apps that she tried really had only one instructor. And she wanted to build a platform where there’s a variety of experts to where people can choose based on their need, and essentially become a marketplace for meditation content and go beyond that. So that’s when she started exploring certain features.

Valentin: She imagined, like what if there was … almost like a Spotify for meditation and mental wellness content that can help people gain those types of releases that she saw from using meditation.

Michael: And she wants to focus a lot on helping, like, busy people. So that’s why she focuses more on initial ability and five minutes meditation. So make sure that’s … people who are not … no more regular working people are busy with their lives can just taking a break and get benefit immediately from the app.

Liam: I’d like to also move into the design of Simple Habit. And Simple Habit won the award this year for experience, which is a really broad category that kind of encompasses everything, including the entire user experience from interaction design to the navigation structure to even the content of the app. So I’d like to get a little bit of an idea of how Simple Habit thinks about its experience as this holistic thing.

Valentin: Mm-hmm (affirmative). So alternately, we wanna create an experience that is, like, super straight forward and easy and practical. And, like, it’s a really intuitive to find, like, the right sessions for whatever problems that you’re dealing with in your life, whether it’s stress, anxiety, or inability to focus. But on the other hand, many people come to the app not knowing all the potential ways that meditation can really benefit them. So that’s where we use a lot of, like, interactive moments, emotion, and story telling to try and express, like, those benefits in a way that, that addresses, like, users’ unique ways, where users can use therapy or audio therapy and meditation to reduce their stress and gain more mindfulness or clear their mind. We wanna really understand, like, our users’ unique needs, so we try to learn about users by asking them directly in the product experience by checking in on them, by caring to ask users how they feel learning about what’s been bothering them, helping them set goals. We try to understand them, like, more on a, a human level.

Liam: I think there’s something interesting in Simple Habits’ experience in that because it’s a meditation app, the main activity that you’re doing in it, which is, like, listening to a guided meditation, probably requires you to not be looking at the app. So has that affected the design of the app at all?

Valentin: Yeah, definitely. The actual experience of when you’re meditating is something where we’ve actually tried different things and we’ve run tests where we’ve even, like, had subtle animations that might, like, if you had your eyes open, help you guide through your meditation. But what we’ve found is really, during that meditation, trying to, like, avoid extra interaction during that time really helps people get through the meditation. But the reason there are all these other opportunities to get to know the user better is because people are not always ready to meditate when they open the app. Um, you know, sometimes it’s just not the right opportunity, especially somebody might have heard from a friend, you know, that they should try meditation, but they happen to be in a place where they wouldn’t feel comfortable listening. That’s where we still have other ways to gain value from that happen to learn about yourself and be a little bit more mindful about going through, like, check in questions that help us understand, like, what types of meditation will help you later that we can then remind you about at a later time.

Michael: right. And just to add on that is, we know that most of the users come to the app feeling stressed, or want to sort of calm their mind. So, um, we want to make sure that the initial experience, like, from … through onboarding and through, uh, just the presentation of the app. Like using the … Using of the color, using of the, the layout to, to sort of get them into that calm ex … experience. So we don’t want to have a lot of, like, flashing things around, or like, just to … We know that the basic new for the user are to find the right meditation for them. So that’s what we’re focusing on. We don’t want them to feel overwhelmed trying to look for the right content, uh, at the moment.

Liam: Right. I think often, when we think about the experience of an app, we’re thinking about these kind of broad strokes of, like, navigation, content, and with the overall aesthetic. But I think there are also a lot of small details that contribute to the feeling that you get of experiencing an app. In your minds, what are some of the details of Simple Habit that folks might not notice immediately, but that you feel might have a large impact on the overall experience?

Valentin: One of the areas where we really like to be very deliberate and precise, and we use a cross app, is our use of motion. And it’s something we’re bringing to more parts of the product. We don’t just use it to create small, delightful moments, although it serves that purpose for us. Uh, we try to use motion for much more than that. Like one of the ways we use motion is to create a time-based visual hierarchy. So not all motion, uh, is equal at capturing our attention. For example, uh, an option that slowly fades in, uh, is gonna grab a lot less attention than something that moves from the side, or especially something that starts out very small and then grows much larger, creating the illusion that it’s coming to get you. Our brains respond to those different types of motions very differently. And by understanding how we perceive different motion to guide attention and communicate the different levels of importance that the different objects of the screen have.

Valentin: So much like traditional style principles used in still and motion can go even further with capturing our attention and helping guide the user’s attention to what’s important in the moment. You can see this in the onboarding, to declutter the interface by taking advantage of the timeline. So instead of showing, like, a lot of the stuff all at once, you can kind of present things in an order, and in a way, it leads to, like, a more natural, almost like a conversational-like experience that you might have with a person where, you know, they’re not … they don’t give you all the information all at once. It allows you to understand, uh, what’s going on at, like, a natural pace. And especially for people that are either very stressed out or anxious in the moment, you know, like, there’s already so much clutter.

Liam: So it seems clear to me that Simple Habit cares a lot about not only how the user encounters the content in the app, but also how it’s presented and when, and how you would navigate through that. And one thing that really stood out to me, which I think is an example of this, is the On The Go interface in the app, where you’ve got a wheel that gives you different context that you might be in, or activities that you might be doing, and a selector for, like, how much time you have to meditate, making it really personalized. I’m interested to hear where that idea came from.

Valentin: The idea for On The Go wheel, I think, was born out of a problem of lack of prior exposure to meditation, because a lot of the users that come to our app are not people that experienced meditation before. So some of the users on Simple Habit don’t really know yet, like, all the ways that meditation can really benefit their day-to-day problems that they encounter. And so the wheel, uh, surfaces many of these daily problems or situations through, like, a fun and very inviting, interactive experience. It basically helps people find the right content to their particular situations quickly. Or another user may open a meditation to prepare for, like, an important meeting at work, and that’s also something that, you know, you, you can see in the wheel. By seeing those situations there and interacting with them and seeing the different ones, you can imagine in the future how you would use meditation for those.

Liam: Serving a dual purpose of getting you into the right kind of meditation, but also exposing you to the fact that you could also be doing it in these other contexts.

Michael: Yeah.

Valentin: Yeah, exactly.

Liam: You’ve crafted a pretty novel experience here. So I basically wanna know how you think about new features in a way that either preserves or enhances that experience that you’ve built up.

Michael: Yeah. So I think we really want to keep, uh, [inaudible 00:44:44] developing features, want to keep the ease of use in mind. Like when can you use the metrics? Like what’s the percent of users who finish a meditation in the first 10 or twenty minutes after signup? So, like, give the indication of how easily they can find the right content. So for any new features from now on, we’ll make sure that we are not compromising that experience. Uh, we may [inaudible 00:45:07] building out features like social features. But we’re constantly asking ourselves, ‘Are we adding those? Are we potentially hurting our core experience, which is finding the right content for the moment?’ So we try to always keep that in mind. I have sort of metrics in place, I have dashboard in place to tell the house of data that we, we care about as we add new features.

Liam: Thank you again, both of you for joining me.

Michael: Thank you.

Valentin: Thank you.

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.