Building Long-Lasting User-Product Relationships By Using Illustration Sets

Marcin Paluch, Wojciech Wasilewski at UXDX Community: Berlin. Video: https://youtu.be/a-bVsIsa8u4

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

Illustrations, and the project this talk is built on

[00:00:10] Marcin: We come from Poland, from Poznań — to be more precise, not from Poznań. We came to you because we want to talk about a topic that is quite relevant, especially from our perspective, and this topic is illustrations. We are product designers, but we are also illustrators, so that is the topic of the presentation.

[00:00:41] Marcin: The title of the presentation is "Building long-lasting user-product relationships by using illustration sets", and this is our own approach, our own methodology — let's use this professional term. This is the way that we work on our products on a daily basis. One interesting piece of information: this is the first time we are going to show this approach in public, so we hope that you will enjoy it.

[00:01:11] Marcin: Today's presentation will be based on one of our projects, and this project is called Hive. Hive is a management tool for managing tasks, storing files and messaging. We chose this project because the way that we prepared a coherent illustration set for it perfectly reflects our way of thinking about this kind of specific class.

[00:01:37] Marcin: The plan for today's presentation: first of all we will tell a little bit more about Hive, what it is, because we think there are parts of this project that you will find interesting. The second part is trust as a foundation of a strong relationship. The third one is five segments of building trust, because we found social patterns that can be used in different areas of life, not only design. And the last one is the missing piece of Hive, because at the end we would like to share with you our secret: what keeps us motivated in our daily life. So Wojtek, take it.

What Hive is and what we had to build

[00:02:13] Wojciech: Can we start? Let's go. First of all, have you ever heard about Hive? That's actually very good for our presentation. Let's talk a little bit about this product. This is the background of our presentation.

[00:02:27] Wojciech: So what is Hive? A professional project management and collaboration platform. It's like Trello — let's compare it to Trello. This is a kind of application that combines functionalities like messaging, like Kanban boards, like notifications, like seamless file access. To make a long story short, that's a full-stack tool that every professional company should have on board.

[00:02:53] Wojciech: In 2017 John and Eric, co-founders of Hive, asked us about preparing a mobile version of their existing product. We were super excited about that opportunity, about the project, but it was quite challenging because of a few requirements.

[00:03:12] Wojciech: The first of Hive's requirements was the fact that we had to redesign the visual side of their existing product. We had to take all of the components from the desktop application, put them into the mobile device and redesign them, and it was challenging because we knew about the huge number of screens that we had to do, and the deadline was quite tight as well. That's why it was challenging.

[00:03:37] Wojciech: Another requirement was to design everything for React Native development, for the React Native framework, so we had to analyze both platforms precisely, compare them and find common navigation patterns, for example. It took us more time than usual, but we are very satisfied with the product. The product is still in development.

[00:03:57] Wojciech: A few facts and numbers about the product: it took us one month and a half to conduct five full product design phases, to prepare over 100 screens, to draw one coherent illustration set — a huge part of these illustrations will be presented today during the presentation, and that's obvious — and animations and micro-interactions. We prepared some nice-looking animations, and we will show you some of them today as well. That's the background of the presentation. Let's go further.

Trust as the foundation of a strong relationship

[00:04:31] Wojciech: Trust, the foundation of a strong relationship. Now I have a question for you, Marcin, because we are talking about relationships. I want to ask you, because I know that you are a father and you are also a husband — yes, husband, you agree — I just want to ask you what makes every relationship strong and lifelong. I'm very curious about your point of view. Maybe you have some research, maybe, who knows.

[00:05:00] Marcin: I think that my personal observation can be used here as a basis of this presentation, but scientists agree on one thing: that building a relationship is nothing else than building trust. Relationships are built from three pillars. The first one is emotional self-sufficiency, the second one is emotional stability and the third one is trust. But I think that we can all agree, not only basing on the science but from our experience, that trust is the most important one.

[00:05:35] Wojciech: I totally agree, and there is still one thing that we have to say, because in the title of the presentation we suggest that it is possible to build a relationship between the user and the product. Actually, it's a lie. We cannot build a relationship between the user and a bunch of pixels connected together by miles of code. That's just impossible. In every relationship both sides have to be empathetic and intelligent, so the title of the presentation should be understood more as building a relationship between a user and the product designer. The product is the thing that connects both sides.

[00:06:16] Marcin: I agree. Let's go further.

Stay positive

[00:06:20] Marcin: Five segments of building trust, and the first one is stay positive. I think that we can all agree that being positive is a good thing and that it plays a key role in our lives, because if we are positive we are feeling better, we are healthier. Positivity can affect even our body, things like heart rate or blood pressure. But not only that: being positive and smiling a lot makes us more attractive to other people. We know that, but that's actually true, and being more attractive to other people gives us an easier time of making new relationships.

[00:07:05] Wojciech: Do you want to tell us that there is a kind of correlation between positivity and the feeling of trust?

[00:07:12] Marcin: Yes, exactly, because if you feel amused[?] in the presence of somebody and you are feeling that they are true with expressing their emotions, you are more open, you feel safer, and you can even have an easier time with taking up a challenge in the workplace or something like that. Being positive and trust are a good axis[?] for a healthy relation.

[00:07:39] Wojciech: Among many visual elements of the layout, illustrations are the most powerful when it comes to evoking a specific spectrum of emotions, and especially positive emotions are very important, because thanks to them we can activate the very first stage of the user's engagement, and very often this stage of engagement is totally unconscious. That's a very important thing.

[00:08:01] Wojciech: And how did we decide to use this rule in Hive? In Hive we decided to draw a lot of positive-looking bees. Why? Because our intention was to depict the atmosphere of a joyful hive where a lot of bees work together, and they are excited by the fact that they can work together, that they can stay in constant contact with each other. It was our intention and our client's intention as well, and we drew a lot of positive bees.

[00:08:31] Wojciech: The first one comes from the messaging, and this is the illustration that represents this part of the application. The second one, in my personal opinion the coolest one, is the bee with sunglasses, and this is the illustration that comes from the notification screen. Our user can see this when he has no new notifications. Quite obvious, but totally cool. It works, it rocks.

[00:08:58] Wojciech: And the last illustration comes from — and this is quite interesting, because we told you that positive emotions are very important, and as you can see from the distance, I hope, these characters are sad. So why are they sad, you might ask me, and here is the answer. This illustration comes from the direct message screen, and the user can see this illustration when he is lingering over sending the first message to another stakeholder.

[00:09:29] Wojciech: It's a kind of joke, a visual joke. Just imagine that these characters are telling the user: we are sad because of you, it is your fault, because you shouldn't linger while sending the first message to another stakeholder, because you are the employee of a hive-driven company. We believe that even if the tool is dedicated to professional teams, there is always room for some kind of funny aspects and funny illustrations, for example. Let's go further.

Don't come in uninvited

[00:10:02] Marcin: Don't come in uninvited. Most of us, me too, feel like part of some kind of community, and we need this, because as a part of a community we feel safer, we get more emotional stability. But the worst thing that can happen in a relationship, and also in a community, is ignoring personal boundaries, when someone just goes a little bit too close for our comfort[?].

[00:10:35] Wojciech: Do you want to tell me that if we want to build a healthy relationship we should also see, perceive, embrace and respect the individuality of other people?

[00:10:47] Marcin: Yes, exactly, because we don't want to overwhelm anybody, and we don't want to overwhelm our user in this case.

[00:10:57] Wojciech: That's why we decided to use one rule that relates to the frequency of displaying illustrations in a product. We decided to use illustrations only when it's necessary. Every illustration has a meaning, every illustration has a purpose, every illustration is a kind of visual metaphor of the context of the screen. As you can see, ten examples, ten screens from the application, and only in three of them can you find illustrations. We should stick to this rule.

[00:11:27] Wojciech: An illustration in the product — oh, there is no shadow behind the bee, and there should be a shadow in the background — every illustration should be used as something unobtrusive. It should be some kind of unobtrusive friend in the context of the application, rather than an overprotective parent. Let's go further.

Answer the questions that are not asked

[00:11:46] Marcin: Answer the questions that are not asked. This time I have a question for you, Wojtek.

[00:11:53] Wojciech: Go ahead.

[00:11:56] Marcin: What would you say if I told you that it's totally possible to read someone else's mind?

[00:12:01] Wojciech: It would solve all of my private problems, to be honest.

[00:12:08] Marcin: I know how much it would. But that's not important here, because that's a lie. We can't read someone else's mind, at least not yet, and maybe that's for the better. But being alive over 30 years now, I learned one thing: that we as people are often afraid to say what we really want to say, or to say what we are really feeling, and we are often really, really scared to ask the question that we would really like to ask. We don't do it for many different personal reasons, probably. But we as designers, being aware of this unasked question, can be more empathetic, and we can come up with this helping hand whenever it may actually be needed.

[00:13:00] Wojciech: Especially on mobile platforms, on mobile devices, we have a lot of different gesture patterns, we have a lot of different navigation patterns, and some of them may be quite unknown, unpopular or unfamiliar for older users, for example. That's why we should inform, we should teach our users from the very beginning how to use our product in a proper way, and that's why we should enrich our product with things like onboarding screens — you can see three examples from Hive, where the user can learn from these screens what the most important features in the product are — or, even more valuable, pop-ups with instructions.

[00:13:41] Wojciech: Some of the animations from the product are also very important. The user can see this kind of screen, this kind of animation, when he is launching the application for the first time, so he can learn, he can understand the product better.

[00:13:55] Marcin: We are using these illustrations and animations almost like a mentor in our company. When we have a new employee, in his very first month of work he just doesn't know everything yet, and we have this mentor who can help him whenever it may actually be needed.

[00:14:18] Wojciech: Yes, exactly. And one more thing: what kind of illustrations should be used on this kind of screen? This is also very important. We think that the illustration always should be simple and also outstanding, I would say, because our intention is to grab the attention of the user. This is a very important thing, to attract and grab the attention of the user.

[00:14:40] Wojciech: The second thing, which is also very important, is the animation. If we want to prepare some nice-looking animations for, for example, pop-up screens, pop-up informational screens, the illustration should stay smooth and slow. It should be almost a step-by-step animation — illustration, I'm sorry. Why? Of course, because we want to teach our users, so it should look like a learning process.

Reward unexpectedly

[00:15:03] Marcin: The next one is reward unexpectedly. This time I have a question for the audience: who likes to be rewarded unexpectedly? Please raise your hand. That's great. So maybe the lady with the glasses — I have a present for you. And that's just a t-shirt, but how do you feel? Don't be embarrassed.

[00:15:38] Audience: Didn't expect that. Just happy.

[00:15:41] Marcin: As you can see, it's really cool to get something unexpectedly, and to be honest we have some more stuff to give away, so please approach us after the talk. Giving presents can be a big part of building a strong and healthy relationship.

[00:16:00] Wojciech: Unfortunately, not every idea that comes to our mind may come true. I'm thinking about a feature that we can give to our users totally for free, as a kind of unexpected reward. Not every idea that we have in our mind might come true, because of many reasons: for example the business model of the product, plans for the product development, the client's preferences, the client's budget for the product as well.

[00:16:36] Wojciech: But luckily there are some small and safe things that we can implement widely into the product, and these things will increase the attractiveness of our product, of our application. The first and the second thing are animation and the micro-interaction. We can prepare some nice-looking micro-interactions, we can animate everything, and these two things will, as I said, increase the value of the product, increase the attractiveness of the product.

[00:17:03] Wojciech: But these two things are also, I would say, quite obvious, and I wouldn't treat them directly as a reward for the user. There is a very small thing that we prepared for Hive, and this is a great example, the perfect example of the unexpected reward: this is the pull-to-refresh feature. When our user is trying to refresh the screen of the conversation, at the bottom of his device he can see this tiny illustration. It doesn't change anything in terms of the functionality, it doesn't change anything in terms of the performance of the application, and it also doesn't take a lot of time to implement, but it's just cool. If we want to build a really nice relationship, we should also look at our products from this perspective.

Don't blame yourself, but take responsibility

[00:17:55] Marcin: The last one is don't blame yourself, but take responsibility. In most cases it doesn't matter how much hard work we put into something — our project, our product or anything — it's sometimes possible that something will just go in a weird direction and we will mess up. And the worst thing that can happen in this situation for us, if our misbehavior affects somebody, is to claim that nothing just happened, that everything is okay. Because if we want to build a strong and healthy relationship between our users and us, we need to be courageous enough to admit: okay, I just messed up, I'm really, really sorry. Sometimes rebuilding this relationship will take a really long time and it will be a hard and long process, but if we admit it, then in most cases it will be over, it will be all over.

[00:19:01] Wojciech: Despite the fact that every application that we publish on the Play Store or on the Apple Store is tested many times by our quality assurance team, once in a millennium something like this may happen. We don't expect that this situation may appear, but because we want to build a mature relationship with the users, we very often add this kind of specific screen into the scope of the product.

[00:19:28] Wojciech: And because we want to build a mature relationship, we believe that along with the term responsiveness should go another term, which is responsibility. I'm talking about responsiveness in terms of the applications, so this is very important. But what kind of illustration should be placed on these screens? We believe that this illustration should stay neutral. We don't want to make any jokes, we don't want to change the mood of the user or something like that. We just want to show him that we understand this situation, and we don't want to make him angrier than he may already be. That's why the illustration should stay neutral in terms of, I would say, color, but mostly I'm thinking about the topic of the illustration, the subject of the illustration.

The missing piece of Hive

[00:20:23] Wojciech: Marcin, let's sum up everything. We are almost at the end of the presentation.

[00:20:26] Marcin: Today we talked about building a strong and healthy relationship, and the first building block of this is staying positive. The second one is don't come in uninvited, then answer the questions that are not asked, reward unexpectedly, and the last one, don't blame yourself but take responsibility. But you know what, I think that we are still missing something, because today we talked about our product Hive, we talked about building a healthy relationship, and about the building blocks of this healthy relationship and trust.

[00:21:04] Marcin: But the question, my question for you, is why do we treat this process so specifically? Because we could also just draw some nice illustrations, more or less fitting the topic, put them randomly in the application, post them on Dribbble and get some likes, and at the end send the invoice to the client and just call it a day.

[00:21:29] Wojciech: Right. Actually, Dribbble is very important. So why? Because like in every relationship, especially a long-term relationship with a long story of ups and downs, there has to be something stronger, there has to be something deeper, there has to be some kind of invisible power that encourages people to undertake and solve problems over and over again. We believe that we have this power in our company. We know this power, and this power is called love: love for our products, love for our users, love for all the illustrations.

[00:22:02] Marcin: Of course, someone can say, come on, love, it's so not him[?], everyone claims that love is the foundation of everything. Yes, love is the foundation of everything, but you cannot do something for over ten years if you don't love it, if you don't love your craft. And another thing: in every word that is love there is also satisfaction and a meaningful life. This is the answer to your question. That's why we treated this process so specifically. Thank you for your time, and love your designers[?].

[00:22:47] Wojciech: If you have any questions, approach us after the presentation. Thank you very much.