Rapid Development of a

No-Frills Messaging App

OBJECTIVE & OVERVIEW

A new client has asked for a bare-bones messaging app.

CHALLENGE

This was another project where the time frame was limited, and so any user testing must be concise and on-the-fly.

PROCESS

With a limited time frame, I began the competitor analysis by examining popular messaging apps and tools, isolating the individual features that worked the best while paying special attention to the features that seemed irrelevant for the given “no frills” task.

APPLE MESSAGES

Apple Messages includes a superfluous App bar at the base of the screen, and while this can be entertaining, it’s not necessary for a "no frills" messaging. As such, I opted not to include this feature in my app.

FACEBOOK MESSENGER

Facebook Messenger has a clean and simple design that will serve as the main inspiration for my design.

 

No need for a money-transfer feature.

 

Facebook Messenger has a “Location” feature. This is not necessary for my app.

LINKEDIN

Voice memos are still a divisive feature in messaging apps; they’re gaining in popularity with Millennials, but not yet catching on with the pre-Millennial generations. I opted against this feature with my app.

WIREFRAMES

The iterations were minimal between the paper low-fi wireframes and the digital mid-fi.

 

The most noticeable change would come later, following the first user-testing. Using the mid-fi wireframe, I set up a basic prototype and asked a select few users from my Slack group to test it out, instructing them to switch from conversation mode to contacts, search for a contact, and then start a conversation.

 

​Initially, I had a list of recent conversations in a carousel pattern at the top of the conversation page, but I also listed the most recent conversations vertically on the main page. A few of my users found this to be redundant, especially in regards to the “no-frills” nature of the app. My users also expressed concern regarding the switching back and forth between the chat screen and the contacts screen; it wasn’t immediately apparent to them how they were to accomplish this goal. So, for such a simple app and a simple task, I came away with one minor cosmetic flaw and one major usability issue. The latter would be addressed first, and as it happened, the former was actually resolved as a result.

Msg Paper Wireframe.png
Msg Digital Wireframe.png

ANIMATION

Explaining animations isn’t a simple task. Even the most detailed diagrams don’t do moving parts justice. So, to be able to show animation, I decided to mock it up. The animations principles I employed were fairly simple, yet effective for the given task; there’s a hint of anticipation with a bit of follow-through and overlapping action.

 

I presented this animation along with a final prototype to the same users from my Slack group and was met with overwhelmingly positive feedback.

 

There were minor suggestions about adjusting the timing and easing, which is something I plan to address at a later date.

STYLE GUIDE

The three main apps that I reviewed as I researched messaging apps all utilize a vibrant blue as their primary color (the only exception is that Apple's mobile Message app is green, but the iOS-to-iOS chat bubbles are the same blue as the MacBook Message icon). With the desire to make this app as recognizable to my users as possible, I created a series of cohesive text and layer styles utilizing a blue/teal color scheme along with the Roboto Typeface (both Slab and Sans Serif fonts).

Msg Style Guide_01 copy
Msg Style Guide_01.png

PATTERN RECOGNITION

DATA MANAGEMENT

Recognition: High

NAVIGATION

Recognition: High

SIGNIFIERS & AFFORDANCES

Recognition: Average

NIELSEN’S 10 USABILITY HEURISTICS

Adapted from the Nielson Norman Group

While these guidelines can be considered broad, I still like to keep them in mind and use them as a form of check-list as I'm assembling the UI for any given project. I didn't nail each one, but all-in-all, I think I did pretty well with this simple project.

RESULTS

1-0001.png
Msg Glamour UPDATED CONTACTS.png

©2019 by Mike Powers.