A Messenger Add-on
UX/UI Design | Mobile Prototype | 2014
Thoughtful is a messenger add-on, which displays the local time and weathers of the cities where your friends live. Now you won’t mistakingly send a message to your friend who is asleep. You will also get a weather cast of your friends' current location. Thoughtful will automate your path of becoming a thoughtful and considerate person by simply giving your friend a heads up to take an umbrella when a rain is expected.
Why do we need it?
As we chat with people in different countries
Do you have friends living in different countries? When someone we care lives far away, it becomes harder to freely communicate with them. Therefore, having an easy access to the essential information on the areas of your friends' current residency and potential insights into their daily lives would help us to communicate at a more intimate level.
When you enter into the chat list, you have an instant access to the local time in cities where your friends live. If you see the black clock icon, the black indicates that it’s night there, and vice versa..
When you enter a chatroom, you will see the exact local time(AM/PM) and weather cast.
The weather/timezone navigation will be disappear when you start typing, so it won’t interupt your chatting experience. If you need to see it again, only thing you need is to touch the chatroom one more time.
What would you want to chat if you know your friends’ weather while you chat? What would you say if the place where your parents live is going to have a snow?
This time and weather information would bring more intimacy and consideration to the contents of conversations.
Some live far away from home
Ever since I first moved out from my home, Korea, messenger applications were the primary means of communicating with people in my hometown. However, Time difference has always been a difficult issue. Sometimes, my friends would just sent messages without considering my timezone. Despite of the world clock app available in every mobile devices, no one actually bothers to check.
We can't remember them all
It’s hard for them to check and remember the world clock every time they start a chat with someone in a different timezone. Of course, we can use a world clock app to figure out, but we usually end up not really utilizing it. Why is that?
More Clicks Required
But we want less click
Although it’s only a few more steps more to find out, this steps would quickly add up with more friends. As a result, we just write a message and send it. The only tiny caveat is that your friends would receive a message in the middle of night and wake up.
we can't blame users
We can’t blame people not taking a few steps more to be considerate. It’s rather a design problem that has not been perceived by many people as numbers of people would never experience this inconvenience until they move to somewhere else, or have someone moved out of town.
One more thing
Friend's weather information
In the past, talking/asking about the local weather is a common greeting for writing a mail. What would we say if we know a friend’s weather while we chat? Would it help us to start a conversation?
Which messenger people use most?
To start designing an add-on, I needed to pick a messenger to work with. This add-on will display timezone/weather without interfering a chatting experience.
Messengers are alike
The final selection was Facebook messenger, based on its popularity in the market and its possibility to grow up. Besides, most of chatting messengers have a similar layout and appearance. When this add-on is fit for a messenger, it could be applied to other messengers.
#Re-Design Chat List
Are there any extra room for add-on?
I want people to have an access to the local weather and time with a glance before they start a chat. So, I decided to insert icons in the bottom right corner. However, the icon size is pretty small, 50px. Thus, clock/weather icons have to be minimal and legible.
Clock Icon Design 01
Legibility does matter
While I researched on icons, I found a few simple design on watches and turned them into a set of icons to test out legibility. Out of all clock icons, two clock icons were selected for the final test.
Clock Icon Design 02
Although, the bottom design will give an exact time for users, it’s hard to recognize the text in a small icon. For that reason, the top design was selected to display the local time of your friends.
It's not crystal clear to distinguish AM/PM
There are a few time slots that won't work with the current clock icon design. Yet, this icon design can tell whether it’s daylight or not. Since the clock icon in a chat list is designed to give users quick access to availability to chat, this icon will do the job. Besides, more detailed information(local time/weather) will be available in a chatroom.
Simplified Weather Icon
The goal of this project is not to insert an entire weather application into a chatting application. Friends’ weather information will be employed to spice up a conversation. Therefore, several weather icons have been intentionally removed from the list.
Time in Color
Can color indicate which time of the day?
Color could indicate what time of the day. However, after a quick user testing, I’ve realized this approach won’t work flawlessly. No one can tell what the background color of the icon means. Then, 2nd prototype was designed in black and white to clearly distinguish daytime/nighttime, which is a widely employed in most timezone converter/world clock apps.
Can people read these small icons?
When I previewed the icons in iPhone 4, the clock icon seems to be legible, but not the weather icon.Also, it's not neccessary to display a weather cast in the chat list as more detailed information will be available in a chatroom.
Final Design for Chatlist
The local time at a glance
So, the final design is here. With this add-on, users will have an instant access to local time of your friends' by reading clock icons.Also, the background color of the clock icon will indicate daytime/nighttime.If there is no clock listed, he/she lives in the same region.
Design an ambient display
A chatroom is a place where people could get an access to the exact local time(AM/PM) and weather. By researching on various weather apps as well as timezone converters, I found two promising approaches.
Mimicking the current weather and time
I quickly built a prototype in processing to create an animated background that simulates the current weather and time. At first glance, this approach might look fabulous, but I found a major issue with the animated wallpaper while I did user testing this version with people. The code can be foun here.
Most Apps Feed My Information
Not my friends' info
Most applications are designed to feed information associated to its owners, not their owner’s friends’. Likewise, people would expect their own information if they see anything on the background. Thus, breaking the fundamental rule for designing application without giving a explicit clue won’t work.
Is way to go
Navigation bar is commonly used to display secondary information such as time, battery usage, signal strength and many others. The information I am trying to add is very similar kinds, navigation bar style will suit my needs.
The icon size here is bigger than the one in chat list. ( 74px/50px). Since the size of icon is bigger, it’s easier to read. However, adding a seamless navigation However, adding an additional navigation bar seems to break the rule for iOS.
I updated the navigation background to black and white to indicates nighttime/daytime. However, there was another problem occured. The fundamental rule for color to display daytime/nighttime is not followed correctly for the background of the clock icon.
Major change in design
The clock icon has changed to digit display to inform the exact time(AM/PM). And a small profile icon has been added to tell users whose information they are watching on each navigation bar.
Final Prototype for Chatroom
Add an interaction
To make this navigation unobtrusive, an interaction is added. When users first enter to a chatroom, the navigation bar will be placed right below the iOS navigation. And then, the navigation bar will be hidden when user start typing a keyboard. This prototype was developed in Google Form and code is available, here.