Sending text messages is probably the most common way of our communication in 2017. We constantly chat during commute, in the school, at work or at home lying on the coach. According to a study, Messenger and Whatsapp processes more then 60 billion messages every single day.
The importance of sending messages on mobile devices was the reason why I decided to participate in the UpLabs Chat Challenge. The brief of the challenge was to create a chat interaction flow for an app or website, with the following points in mind:
- the interface has to break to rules of the conventional boring chatting interfaces
- users must be able to attach files seamlessly without affecting the ongoing chat
- users should able to shift easily between several chats
- it has to be unique, also it has to solve the UX problems we are facing in the today world
Defining the Key Pain Points
Since I’m one of the Y generation folks, I’m pretty much glued to my phone all day long. While it has many disadvantages, it also allows me to have a deeper understanding of UX problems, which are not obvious when we text on our phones.
You must be familiar with the feeling when your chat partner asks more than one question right after another, so you always have to address in your reply which question you are answering at the moment. This slows down the chatting process and it also gives opportunity for big misunderstandings.
Another big pain point during texting on mobile is when you chat with multiple people and you constantly have to go back to your inbox to select the other conversation before you can start typing.
So we have two key pain points to solve during this challenge:
- How to indicate which question is answered when receiving more than one question at the same time
- How to switch between multiple conversations without going back to the inbox screen every time
Demonstrating the solution for this problem will definitely require an animated prototype, but before jumping to the prototyping phase I always start with designing in Sketch.
During the design process, my goal was to create a familiar look&feel to the interfaces of the most popular chat applications we use today. I didn’t want to create a completely new chat interface, which looks and feels alien to the potential user, since that would make harder to process and notice the small details.
In order to have a familiar but different design language for this concept, I combined elements of the most popular chat applications: iMessage, Messenger and Skype in a visually pleasing and non-distractive way.
During the prototyping process my goal was to use short, quick and playful animations (mainly spring animations) to create a fast, responsive and reliable feedback of the overall chat interface.
Solution for the first problem: Inspired by the drag&drop approach of stickers in iMessage, I created a flow, where users can also drag&drop messages to certain parts of the conversation, this way you can just drop your answer bubble right on to the question you’re replying to.
Solution for the second problem: I created a solution where you can switch between the most recent conversations with a simple swipe or you can swipe down from the top of the app to have a better access to the people you’re chatting with.
This side project/challenge was super motivating for me to increase my awareness for small design problems we face from day to day. I believe we shouldn’t be satisfied with the existing solutions without questioning them and trying to constantly improve them even if we fail many times during this process.
This article originally appeared on Muzli
Want to improve your User Experience?
There’s a lot to think about, when it comes to user experience. That’s what we’re here for and it’s what we love doing. We place people (users) at the heart of everything we do throughout the design process
It’s our aim to make our clients users lives easier and more successful.
If you have a UX project you want some help with, whether it’s an app or a website. Email us at email@example.com or visit our website https://origin-interactive.co.za/contact-us/ for more information.