Link
Source Code: github.com/jkwok626/message-timezone-converter
Problem
It is difficult to copy a timestamp from a message on mobile.
Background
When the pandemic started, schools and many jobs went remote. I, and many other students, went back home, where I attended classes and did my internship with 7QUBES remotely.
I used several messaging apps to communicate with people and something I noticed was that most messaging apps make you copy an entire message instead of just copying a part of the message. This means that if someone asks you to meet at a certain time, you can’t just copy the timestamp. You would have to remember the timestamp and then switch to a time converter. If the message is very long or has important information, you would have to switch back to the messaging app after converting the time.
Because of this problem, I thought it would be much more simple if you could read that message with the converted time. So you would copy an entire message, paste it into the Message Timezone Converter, and then it would return the message you pasted with the converted time.
I made this project using the Flutter platform, which uses the Dart programming language.
Design Process
Layout of Elements
I knew that I wanted this app to be quick and simple before I even started. I decided that this app should have only one screen to minimize the amount of clicking and navigating that the user has to do.
I was inspired by the two box design of the Google Translate app, but there were some things that I needed to add to my own design. I needed a way for the user to select the timezones they were converting from and to, so I decided to have two dropdown menus. I also needed a convert button, so this was the basic layout that I went with. I continued to style this layout and then I realized that I could get rid of one of the dropdowns by automatically reading the user’s current timezone when the app is opened.
Conversion Strategy
In order to convert the timestamp in the user’s message, I first had to locate the timestamp. I looped through each character while searching for a colon. Once the colon is found, I check if there is a number that precedes it, and I store that number in a variable. If there’s no colon in the message or there’s no number before the colon, then I return an error message to the user.
To do the actual conversion, I make use of UTC timezone offsets. I get the offsets for the user’s chosen timezone and current timezone, and then I subtract the current timezone offset from the chosen timezone offset, which gives me the difference between the two timezones. I then add this difference to the number that was before the colon in the user’s message to get the converted time.
I then make a copy of the user’s message, replace the number before the colon with the converted time, and then return this new message to the user.
Final Design
When the user enters the app, they can easily progress through the app by using top-down processing. The user would choose a timezone to convert from using the dropdown -> paste their message into the textbox -> hit the convert button -> read the converted message in the second box.
Home Screen
Timezone Dropdown
Sample Converted Message
Constraints and Potential Improvements
In my explanation for how I convert the user’s timestamp, I mentioned that I look for the number that appears before the colon. While most timezones only change the hour value, there are a few timezones that also change the minute value, so I would have to change my algorithm if I were to add support for those timezones.
Another limitation with my approach is that it can currently only convert one timestamp in the user’s message since I’m only storing the one number before the colon. An idea I have for getting around this is to store the numbers in an array if I detect multiple colons.