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.
