small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

What Is the Open Web?

From Design System to ‘NFT Design System’: Creating TinyFaces

<p><a href="https://stories.uplabs.com/a-chat-to-solve-communication-problems-480383d05a7e?source=rss----ce6e361fe827---4">Design, Code and Prototyping &mdash; Medium</a> | Gleb Sabirzyanov </p>
<h3>Designing a chat app to solve the communication problems of the world</h3>
<h4>There is always a better way.</h4>
<p>We are two UX designers, developers and entrepreneurs who aim for the improvement of the future of humanity, we call ourselves <strong>Wersatiles</strong>. UpLabs <a href="https://www.uplabs.com/challenges/chat-interaction-challenge">challenged</a> us to design an improved chat app. We accepted the challenge and designed a solution for better chatting using the Design Thinking framework, and our hackers’ mindset, knowledge and creative problem solving skills. In this post we want to show the process, the results we’ve got, and the decisions behind them. If you like our work, consider<strong> </strong><a href="https://www.behance.net/gallery/56058533/Pinky-Chat"><strong>voting for us</strong></a><strong> </strong>in the challenge.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*JiHm4yQ7mVlSPDde37gQvg.png"></p>
<h3>Emphasize</h3>
<h4>Communication crisis</h4>
<p>Recently we got to know that communication is a big problem nowadays. One of us heard a term <em>“communication crisis”</em> that was mentioned in a very unexpected place — a <a href="https://vk.com/video84785784_456239047">stream about neurobiology</a> (this stream is in Russian, unfortunately, sorry those who don’t understand). And while no one of us can find any other references to it, we can clearly define it as <strong><em>an inability to communicate every piece of information that a person needs or wants to share</em></strong>.</p>
<p>Some may say that such crisis can’t happen in the information age, because people have so many means of communication, that they can tell anyone anything they want in a matter of seconds or minutes. Yes and no. With a lot of verbal and nonverbal, digital and “traditional” ways to share information it may seem like people don’t experience any “crisis” at the moment. However, our brains collect and process enormous amounts of information every day, and it’s much more than we can communicate by any means. <strong>It’s always easier to consume than to create.</strong> So, we decided we should improve this situation at least by a little bit.</p>
<h4>Research</h4>
<p>As always, our design thinking process started with a research to find what problems are people usually facing with chat apps. Due to the very limited time frame, we haven’t conducted in-depth interviews like usually, instead, we asked our friends questions and utilized simple yet effective observation method.</p>
<p>While doing quotidian tasks our team paid more attention to strangers using phones for communication and remembered facts about seeing such people in the past. This stage helped us to make a lot of assumptions. They were turned into questions that were then posed to our friends. These questions allowed to validate the assumptions. Some questions were about chat apps in general, and some were about specific points like voice messages. We made a mistake here by asking too broad questions that didn’t give much valuable feedback. The question, “Why don’t you use voice messages?” gave us a lot more than, say, “How do you use voice messages?” We will leave more open questions for in-person interviews.</p>
<h4>Analogs analysis</h4>
<p>There are so many chat apps nowadays, it seems like the new one appears at least every day if not faster. Even in the Samsung IT School where both of us met and learned to code — many students had some kind of a chat as a part of their graduation projects. There was no time to analyse every single app that exists on the market, so the three most used by us and our friends were compared: Google Hangouts, Telegram and WhatsApp.</p>
<p>The focus of the analysis was on the features each app has, and reviews by users. It was quite interesting to see how marketing worked for those apps: some reviews matched value propositions of the apps almost word-for-word. For example, in Telegram, whose message to users is, “Telegram is a messaging app with a focus on speed and <em>security</em>, it’s super-fast, <em>simple</em> and free.” — a lot of reviews emphasized it’s <em>simplicity</em> and good <em>security</em>. There were some negative comments about the apps, we found many of them informative. Also, a lot of users pointed to the problems they face, some of which were discovered earlier in the interviews.</p>
<h3>Define</h3>
<h4>Insights</h4>
<p>Next step was to get everything in one place. The simplest way of doing it is putting every piece of information gathered from the empathy stage on a sticky note and then clustering them. It didn’t take a lot of time and soon we understood the main problems people encounter while communicating via chat apps. Apparently, most of them were something already known by us, but all hypotheses are just hypotheses, and they needed to be validated anyway. In the end, we came up with five user stories about discovered pain points in chats.</p>
<h4>User stories</h4>
<ol>
<li>“I’m not comfortable scrolling long conversation list in order to find something.”</li>
<li>“I spend too much time choosing emoji.”</li>
<li>“I can’t type in crowded buses.”</li>
<li>“I can’t listen to voice messages without headphones when people are around.”</li>
<li>“It’s hard to distinguish between voice messages if someone sends a lot of them and they are about the same length.” — “There are no titles on them,” — said one of our interviewees.</li>
</ol>
<h3>Ideate</h3>
<h4>Brainstorming</h4>
<p>One of the most fun parts of the whole process where creativity and divergent thinking are turned on, and the criticism and rejection are turned off. Since our team consists only of two people, the rules for the brainstorm session change a bit, but the general principles stay the same. Sometimes we also use techniques developed specifically for small numbers of people, but this time so much information has been gathered that our team could brainstorm without any problems.</p>
<h4>Five concepts</h4>
<p>We came up with different solutions for every problem and then created a small proof of concept for the solutions we found most promising. In total five working solutions were created, each of them helped people to communicate in a faster and easier way… in theory.</p>
<ol>
<li><strong>Emoji drawing</strong> — user would be able to draw emoji on the screen and they will be recognized and added to the message. A lot of problems and limitations arise from this solution, such as differentiating between 😊and 🙂, and adding something more complex like 🤡.</li>
<li>Create conversations from scratch every day and <strong>archive old messages</strong> to remove clutter — this solution needed more work obviously. And it may even have a negative impact on users.</li>
<li><strong>Message map </strong>— the new way to represent messages in a shape of a tree, or a mind map. This removes problems with linear chats — undoubtedly, people’s dialogues and thought processes are not linear, so it could be easier to navigate through nonlinear chats. And there will be no more forgot topics or unanswered questions. However, this could get messy…</li>
<li>Every talk can be broken down into smaller chunks or <strong>themes</strong>. Another attempt to break linearity in chats is to make users be able to chat about different topics in separate threads. Later we discovered that Slack does something similar.</li>
<li><strong>Turning voice messages into text</strong> would work for our last three user stories. It also would work for communication crisis solution the best of all ideas above.</li>
</ol>
<h4>Evaluate</h4>
<p>During this stage, our team switched from divergent thinking mode to the convergent unbiased one and arranged the solutions on the decision matrix. Ideas were ranged in a diagram based on the impact on the communication crisis and innovativeness/creativity of the solution — the set of criteria that is most useful for the challenge. Implementation effort was not considered as it was not the point of the competition, but anyways we ended up with a solution with decent user impact and very low implementation effort (standard criteria for the decision matrix) — because every developer can build speech recognition in a mobile app nowadays.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*JXHI283nK4PbhX9Kth43IA.png"></p>
<h4>Final idea</h4>
<p>Decision matrix clearly shows that the best solution for the contest and for the communication crisis is turning voice messages into text. But why does such a small feature make such a big impact?</p>
<ul>
<li>It consumes less time for communication. There is a <a href="https://en.wikipedia.org/wiki/Words_per_minute">speed gap</a> between information consumption and creation, that’s why the phenomenon of communication crisis exists. <strong>Reading is faster than listening, but speaking is faster than typing.</strong> Typing speed for composition is about 19 wpm, while speaking can be as fast as 100 wpm. And reading is 160 wpm on average, so if the typing is removed from the communication chain, there will be a rapid speed increase in information exchange.</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*60hL1QxO7za4A_T1fxNERw.png"></p>
<ul>
<li>It works in situations described in <a href="https://stories.uplabs.com/#0111">user stories</a>. <strong>People don’t have to listen to voice messages</strong> because they can read them. And it’s also easy to distinguish different messages as their whole content is visible.</li>
<li>The regular voice messages don’t appear in the search results, but the voice-to-text messages do! People can <strong>easily find the voice messages</strong> just like the regular text ones.</li>
<li>Some people use voice messages more often than text ones. Such addition to the chat app <strong>does not break their habits</strong> — they are still able to record voice messages in a simple way.</li>
<li>This AI system has the <strong>low cost of being wrong</strong>: if some word is not recognized, the voice message could still be listened and understood; and the <strong>high probability of being right</strong>—thanks to all the genius machine learning scientists and researchers in natural language processing field.</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nyJPQl7zBV34OKcvSBchWg.png"></p>
<p>We were very happy to choose this idea because we specialize in designing and developing products that use artificial intelligence to improve the experience end-users. <strong>We want to make humans and AI friends.</strong></p>
<h3>Prototype</h3>
<h4>Features</h4>
<p>Usually, features are selected in the decision stage of ideation, but our solution is a single feature itself, so it can’t be broken down into smaller features. What could, and <strong>should</strong> be done, however, is writing down how it works and what it does.</p>
<ul>
<li>A person records a voice message, another person receives it with the text recognized by AI in the recording.</li>
<li>A person using the app could listen the recording in two ways: either by tapping a “play” button or by tapping a specific word — then the voice message will be played from this word.</li>
<li>If the recording is currently playing, tapping a word will make the message to continue playing from this word.</li>
<li>The timeline shows which word the recording is currently at. <em>Works like subtitles in karaoke.</em></li>
<li>While the message is being played, the “pause” button could be pressed to pause the playback. The recording will start from the place it was paused on next time, the timeline shows it.</li>
<li>The timer shows the duration of the recording and turns into the current time indicator when the message is being played.</li>
<li>The certainty of the speech recognition algorithm is represented by the opacity of each word: the lower the probability, the less opacity the word gets.</li>
<li>This feature should appear in chat apps without removing any currently existing features like text messages because voice messages have limitations and can’t be used always.</li>
</ul>
<p>There was an idea to make texts editable after they are sent, but it would break the whole idea of faster communication. People would spend time editing messages, while those edits are not necessary.</p>
<h4>Deliverables</h4>
<p>Finally, Wersatiles could get their hands on making prototypes! Not that fast. One more decision had to be made. What kind of prototype are we going to make? “It would be so cool to create a working app!”— at first we were considering developing a small app for Android based on the Firebase or Heroku for message exchange. However, it couldn’t have been done because there is no easy way to extract the recording from native SpeechRecognizer API and we were too limited in time to search for libraries that could work. (Please, tell us if you know the easy way.) So we abandoned this idea.</p>
<p>For sure static images wouldn’t have worked, so we couldn’t just make mockups in <a href="https://medium.com/u/bf1152b11387">Figma</a> and upload them directly. We usually use <a href="https://medium.com/u/206c13695d27">InVision</a> for prototyping, but this time an animated timeline was needed, so it didn’t suit either. We looked at several other interactive prototype creation tools, but we came to a conclusion that a video should be recorded anyway, and with the video all the interactivity would have been lost. Another option was to set up a website on GitHub as all prototypes can be converted to SVG, which is easy to animate in HTML5. but UpLabs don’t allow interaction with the website directly, it has to be opened in the other window. So, in the end, the good old Adobe After Effects was chosen to help us bring the screens made in Figma to life.</p>
<h4>Prototype!</h4>
<p>After writing a scenario for the animation and creating a small fictional dialogue of two friends, we finally opened Figma and the fun continued. <a href="https://www.behance.net/gallery/56058533/Pinky-Chat">Find all the details about this stage of the process on our Behance</a>. Most of the design decisions that were made are described there (with images, storyboards and more!).</p>
<h3>Test (?)</h3>
<p>The last stage of Design thinking wasn’t made because of the very limited resources of time and money for this challenge. However, we are interested in continuing to experiment with this idea and explore it more, so popular chat apps would get it in the future if it’s successful.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DjPeO3BmEPEzV5dAv1_5Og.png"></p>
<h3>Final result</h3>
<p>We are very happy how it turned out, and we are very happy to share the challenges we came through to make it and to show how intentional everything is in this app. It also proved us that design of even a small thing takes a lot of effort. We learned a lot from this project, and we hope that you did learn something new from this post too.</p>
<h4><a href="https://www.uplabs.com/posts/pinky-voice-text-chat"><strong><em>Vote for us</em></strong></a><strong><em> </em></strong>in the challenge if you like it!</h4>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F230340630&amp;url=https%3A%2F%2Fvimeo.com%2F230340630&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F650886438_960.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1080" height="1880" frameborder="0"><a href="https://medium.com/media/ecfa723ab9154b460959f9b138d9554f/href">https://medium.com/media/ecfa723ab9154b460959f9b138d9554f/href</a></iframe></p>
<h4>Check <a href="https://www.behance.net/gallery/56058533/Pinky-Chat">our Behance</a> for more details on the project.</h4>
<p>We are Wersatiles, a team of two young hackers who want to design and develop for humans. <a href="mailto:wersatiles@gmail.com"><strong>Hire us!</strong></a></p>
<h3>Thank you!</h3>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=480383d05a7e" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://stories.uplabs.com/a-chat-to-solve-communication-problems-480383d05a7e">Designing a chat to solve the world’s communication problems</a> was originally published in <a href="https://stories.uplabs.com">Design, Code and Prototyping</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Designing a chat to solve the world’s communication problems

Designing a chat to solve the world’s communication problems

Designing a chat app to solve the communication problems of the world

There is always a better way.

Top Stories