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

Knowledge / Inspiration

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

Continuous Design
UXDX Community Berlin 2018

Using their own methodology, the presentation is based on how consultancy, Netguru have managed the project management company, Hive's mobile app redesign. The goal was to create a mobile version of their project management tool. Marcin and Wojciech will talk through the requirements, and how they took on the project with a focus on how they prepared illustration sets.

Yeah, so we come from Poland. And we came to you because we want to talk about quite relevant topics, especially from our perspective. And this topic is about illustrations. Yeah, right, because we are product designers, but we are also used, illustrators. So that's the topic of the presentation.
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. Okay, well, let's use this professional term. Actually, this is the way that we work on our products on a daily basis. One interesting piece of information, this is the first time that we are going to show this approach in public, so we hope that you will enjoy it.
Yes. And today's presentation will be based on one of our product is called Hive. And Hive is actually a management tool for managing tasks, storing files, and messaging. And we actually 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 asset.
Okay, so the plan for today's presentation. First of all, we will tell you a little bit more about hive and what it is, because we think that there are parts of this project that you will find interesting. The second part is to trust the foundation of a strong relationship. The third one is five segments of building trust because we actually found these 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 actually share with you our secret that keeps us motivated in our daily life.
Can we start? Okay, let's go. So first of all, have you ever heard about Hive? Oh, that's actually very good for our presentation. Yeah, so let's talk a little bit about this product. Okay, this is the background of our presentation. So what is Hive? Hive is a professional project management tool and collaboration platform. Okay, so it's like trail. This is actually a kind of application that combines functionalities, like messaging, like Kanban boards, like notifications, like seamless file access, you know, to make a long story short, that's a full stack tool that every professional company should have onboard.
And in 2017, John and Eric cofounders of Hive asked us about preparing a mobile version of their existing product. We were super excited for that opportunity, you know, of the project. But it was quite challenging, because of the requirements. So the first Hive's requirements was the fact that we had to prepare, redesign the visual side of their existing products. So you know, 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. I know the requirement was to design everything for React Native Development for React Native Frameworks. So we had to analyze precisely both different platforms, compare them and find some commonalities, for example, navigation patterns.
So it took us more time than usual. But yeah, but we are very satisfied with the product is still in development and few facts and numbers about the product. So 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 and a huge part of the illustrations that will be presented today during the presentation. That's of course, and that's obvious. Yes, animations micro interactions we prepared also some nice looking animations. Yeah. And some of them will show you today as well. So that's the background of the presentation.
Let's go further. Trust the foundation of a strong relationship. And actually, now I have a question for you because we are talking about relationships, right? So I want to ask you because I know that you are the father and you're also the husband. Okay. Yeah, so I just want to ask you, what makes every relationship strong and lifelong. Okay, because I'm very curious about your point of view. I don't know, maybe you have some research about them.
Maybe but now, actually, I think that my personal observation can be used here as a basis of this presentation. But scientists agree on one thing, that building relationships is nothing else than building trust, actually, 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 based on the science that we can all agree for our experience that trust is the most important one.
Yes, I totally agree with you and there is still one thing that we have to say, because you know, in the title of the presentation, we suggest that it's possible to build the relationship between the user and the product. And actually, it was a lie, okay, we cannot build the relationship between the user and a bunch of pixels connected together by miles, of course, you know, that's just impossible. So, in every relationship, both sides have to be empathetic and intelligent. So our presentation, the title of the presentation should be three that should be understood, more like, building a relationship between a user and the product designer. Okay, so the product is the thing that connects both sides. Right? Do you agree?
Okay, so five segments of building trust, and the first one is stay positive. And I think that we can all agree that being positive is a good thing, and it plays a key role in our lives, you know, because if we are positive, we are actually feeling better, we are healthier. Positivity can affect our even our body, you know, things like heart rate, or blood pressure, but not only that, actually being positive and smiling a lot makes us more attractive to other people who knew that but that's actually true and being you know, more attractive to other people gives us easier time of making new relationships relations.
So, you want to tell us that there is a kind of correlation between positivity and a feeling of trust, right?
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, feel safer, actually. And actually, you can even have an easier time with taking up the challenge in the workplace or something like that. And actually, being positive and trust acts as a glue for healthy relationships.
Yeah, and you know, among many visual elements of the layout, illustrations are the most powerful when it comes to evoking some specific spectrum of emotions, and especially positive emotions are very important. Because thanks to them, we can activate it at the very first stage of users' engagement, and very often this stage of engagement is totally unconscious. Okay, so that's a very important thing. And actually how we decided to use this role 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, okay? Joyful Hive where a lot of bees work together, they are excited by the fact that they can work together, they can stay in constant contact with each other.
So it was our intention, our client's intention, as well. And yeah, and we do a lot of positive bees. The first one comes from the messaging app. 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. Okay, so our user can see this illustration when he has no new notification, quite obvious, but totally cool. These glasses work. And last one last illustration that comes from the yeah, and actually, this is quite interesting, because we told you that positive emotions are very important. And as you may see, as you can see from a distance, I hope these characters are sad.
So why are they sad? You might ask me and here is the answer. So this illustration comes from the direct message channel direct message screen. And the user can see this illustration when he is waiting when he is lingering while sending the first message to another stakeholder. So you know, it's a kind of joke, visual job just imagine that these characters are telling to our users, we are sad because of you, you know, it is your fault, because you shouldn't linger with sending the first message on those another stakeholder because you are the employee of a highly driven company. You know, we believe that even if the tool is dedicated for the professional teams, that it always plays, there is always room for some kind of funny aspects, some funny illustrations for example, All right. Okay, let's go further.

Okay, so don't come in uninvited. So most of us, you know, need to feel as some kind of part of some kind of community, you know, and we need this because we will, as a part of community, we feel safer, we get more emotional stability even. But actually, the worst thing that can happen in a relationship and also in the community is ignoring the personal boundaries, know, when someone just goes a little bit too far.
Come into our permission. Yeah, and okay, so do we want to tell me that there is a current if we want to build a healthy relationship with we should also see, you know, perceive, embrace and respect the individualities of other people, right?
Yes, exactly. Because we don't want to overwhelm anybody? And also, we don't want to overwhelm our users in this case.
Yes. And, you know, that's why we actually said we decided to use one safe rule that relates to the frequency of these blank illustrations in a product. We decided to use illustrations only when it's necessary, okay? Every illustration has a meaning, every illustration has a purpose, every illustration is a kind of visual metaphor of the context of the screen, right? So, as you can see 10 examples, 10 screens from the application, and only three of them you can find illustrations, right? So we should stick to this rule. So illustration in the product, oh, there is no shadow behind the bee. There should be a shadow in the background. Illustration should be understood as should be used as an unobtrusive, right. It should be some kind of unobtrusive friend in the context of the application rather than overprotective parents, right? Let's go further.
So answer the questions that are not asked. And actually this time, I have a question for you.
What would you say if I told you that it's totally possible to read someone else's mind. It will solve a lot of my private problems, to be honest. I can pay.
I know how much you earn. But that's not important here, you know, 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 actually being alive over 30 years now. One thing that we as a people, you know, are often afraid to say what we really want to say. Or say what we are really feeling, you know, and we are often really, really scared to ask the question that we would really like to ask, and we don't do it for many different personal reasons, probably. But we as designers, actually being aware of this unasked question can be more empathetic, you know, and we can come up with this helping hand whenever it may be actually needed.
Yes, and you know, especially in mobile platforms, in mobile devices, we have a lot of different gesture patterns, we have a lot of different navigation patterns, some of them may be quite unknown or popular for, for example, older users. So that's why we should inform 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, which you can see three examples from Hive. Users can teach from the screens, what are the most important features in the product, but even more valuable are pop-ups with instructions. Yeah, so some of the animations from the product. And this is also very important, yeah, our 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 just better.
So we are using illustrations and animations. Almost like, for example, a mentor in our company, when we have a new employee, and he's very crystal clear, there's much of the work, he just doesn't know everything yet. And we have this mentor who can help him whenever it may be actually needed.
Yes, yes, exactly. And one more thing, what kind of illustrations should we use on these kinds of screens? This is also very important. So, we think that the illustration also always should be simple and also outstanding, I would say because our intention is to grab the attention of the user, okay? So this is a very important thing to attract the attention and grab the attention of the user. The second thing, which is also very important is the animation. So if we want to prepare some nice looking animations, for example, pop up screens pop up informational screens. The illustration should stay smooth, slow, it should be almost step by step animation. Why? Of course, because we want to teach our users, so it should look like, like a learning process thing.
Okay, next one is rewarded unexpectedly and this time actually, I have a question for the audience: who likes to be rewarded unexpectedly?
Please raise your hand.
Okay, that's great. So maybe the lady with the glasses, I have a present for you. And that's, and that's just a t- shirt. Here you go, how do you feel? Don't be embarrassed, you're just happy. But as you can see, it's really cool to get something unexpected. And to be honest, we have some more stuff to give away. So just please approach us after the talk. But giving the presents actually can be a big part of building strong and healthy relationships.
Yes, and you know, especially, unfortunately, not every idea that comes to our mind may come true. I'm thinking about the features that we can give to our users. Now totally for free and kind of unexpected rewards. Not every idea that we have in our mind may come through because of many reasons. So for example, the business model of the product plans for the product development, clients preferences, clients budget for the product, as well. 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 or our application, right? The first and the second thing are the animation and the micro interactions, right? So we can prepare some nice looking micro interactions, we can animate everything. And these two things will yeah, as I said, increase the value of the product, increase the attractiveness of the product.
But these two things are also I would say, quite obvious, okay? And I wouldn't read them directly as a reward for the user. But there is a very small thing that we prepared for the hive. And this is a great example. This is the perfect example of the unexpected rewards. And these are both refreshing features. So when our user is trying to return the screen of the conversation state, at the bottom of his device, he can see this, you know, tiny illustration. So you know, it doesn't change anything in terms of the functionality in terms, it doesn't change anything in terms of the performance of the application, it also doesn't take a lot of time to implement it. But it's just cool, you know, and if we want to build a really nice relationship, we should also look at our products from this perspective.
Yes, and the last one is, don't blame yourself, but to take responsibility. So in most cases, you know, it doesn't matter of how much work hard work we'll put into something, you know, our project product or anything, it's sometimes also possible that something won’t go in the right direction, and we will mess up, and the worst that can happen in this situation for us, you know, if our misbehavior will affect somebody, we can, the worst thing that we can do is just claim that nothing just happened, everything is okay. Because if we want to build a strong and healthy relationship between our user and us, we need to be, you know, courageous enough to admit, okay, I just messed up. I'm really, really sorry, you know, and sometimes, rebuilding this relationship will take a really long time, and it will be a hard and long process. But if we won’t admit it, then in most cases, it will be just over.
And you know, despite the fact that every application that we publish on PlayStore or on Apple Store is tested many times by our quality assurance team, once a million users use it, something like this may happen. We don't expect that the situation may appear but because we want to build a mature relationship with the users, we are very open to this kind of specific screen into the scope of the product, okay? And because we want to build a mature relationship, we believe that along with the term responsiveness should go another term, which is responsibility, okay? I'm talking about their responsiveness in terms of applications.
So this is very important, but what kind of illustration should be placed on rails screens? Right? We believe that these illustrations should stay wide neutral, okay? We don't want to, I don't know, make any jokes. We don't want to, you know, change the mood of the user or something like that. We just want to show him that we understand this situation, we don't want to make him angrier than he may be already. So that's why the situation should stay neutral in terms of what's the color, but mostly I think about the topic of the illustration, the subject of the illustration. Okay? Yeah, let's sum up everything.
We're almost at the end of the presentation. So today, we talked about building strong and healthy relationships. And the first building block of this is actually staying positive. The second one is don't come in uninvited, 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 is that we are still missing something, you know, because today we talked about our product Hive, you know, we talked about building healthy relationships, and about building blocks of this healthy relationship and trust. But the question is my question for you, actually. Why do we treat this process so specifically, right? Because we could also just do some nice illustrations, more or less fitting the topic, right? Put them randomly in the application. Also, let's say, post them on dribble and get some likes, right? At the end, send the invoice to the client and just call it a day, right?
You are right actually, dribble is very important.
Why? Because like in every relationship, especially this long term relationship with a long story of ups and downs, okay? 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. And actually, we believe that we have this power in our company, we know this power. And this power is called love. Okay, love to our products, love to our users, love to our illustrations. And of course, someone can say, come on. It's so like, everyone claims that he has a love. Love is the foundation of everything. Yes, love is the foundation of everything, but you cannot do something for over 10 years. If you don't love it, if you don't love your craft, and another thing if you're everywhere, what is love? There is also satisfaction and a meaningful life. And actually, this is the question, this is the answer to your question. Okay. That's why we treated this process so specifically.
Thank you for your time.