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.