Day 13 — Chat Box

W. Bryan Jacobs
Feb 24, 2017 · 2 min read

My design for a desktop messenger


Challenge Convention

For most messengers, the area where you type in your message is a distinct and separate field from where your previous messages are displayed. I thought it would be interesting to type directly into the latter. Perhaps the experience may even feel different editing the chat field directly as opposed to a siloed off input field.

Another unique aspect of the design is that your first message to another user can be randomly generated. While users can simply type out their message, they are also offered a predetermined greeting to get their conversation rolling. I pictured having a dozen or so prefabbed greetings that users can send with a single click. I also considered expanding this functionality to auto-generated responses based on a parsing of the most recently received message, but in the end I thought this might be a bit too detached/creepy.

Other than that, I wanted to keep the design as simple as possible. The text input bubble only includes an upload button, an emoji selector and a send button. During my research I came across messengers with various ambiguous buttons in their input box, which was something I aimed to avoid. Even the iOS messenger on my phone has icons which I have no idea what they do.

Post Mortem

AOL Instant Messenger (AIM) was an important part of my adolescence so I thought it would be fun to create something similar desktop app. It’s been a while since I’ve used a messenger other than Slack (which feels functionally different than AIM) so this was a fun stroll down memory lane.

I tried out a purple and yellow scheme for this design which did not turn out great. I did like my use of color, however. The ‘Send Message/Greeting’ button changes color based on whether text has been entered and is ready to send. Chat bubbles for the user also differ in color from the chat bubbles of their received messages — this is something I’v always liked about the iOS messenger on my phone.

I took a chance on my upload/attachment button. I was originally thinking an arrow + half-rectangle often associated with uploading, but i came across this slightly different icon (a plus sign intersecting a rectangle) and thought it was interesting. I’d be curious to see how users react to it.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade