adaptiv Apps Messenger app screenshot

A messenger app to meet ADA guidelines

Communicating their way

Communication is key in any relationship. Between Angel City Sports coordinators and volunteers, messages are lost in cell phone texts and sent to email spam folders.
AdaptivApps Messenger is enabling communication between volunteers, athletes and coordinators of Angel City Sports.

The 'gabbers' behind the project

I was the UX Designer for AdaptivApps Messenger. I worked with four web developers over the course of two months as part of an internship for Angel City Sports.

The plights of a culinary artist

The core challenges were the existence of many competitors to a messenger feature. Facebook Messenger, Telegram, Kik and others already have many of the features that AdaptivApps was needing.
clipart of a person in a wheelchair

Broadcasting resolutions

The primary goal was to ensure that adaptivApps had full control over the messenger feature from top to bottom. It was also imperative to adhere to the American Disability Associations (ADA) guidelines for web apps. Ideally this messenger feature would replace sending individual texts and emails amongst staff and volunteers.
clipart of a woman crossing winning tape at a race finish line

Promulgating research

The majority of the research was compiled from analyzing what was working most with competitors. Telegram seemed to have a slight edge over Facebook messenger in terms of security. By researching ADA guidelines, it was determined that all the competitors that allow the use of animated gifs were not in compliance with accessibility regulations. Therefore in building adaptivApps messenger, animated gif files could not be included.
clipart of man wearing a foam finger

Implementing a menu

The first screen I sketched was the message list view. In the initial sketch I took inspriation from Telegram and used similar iconography that a user would recognize. Then taking this menue from low to high fidelity, I removed the iconography at the bottom of the page in favor of a menu at the top.
sketch of menu screen first digital draft of menu screen updated digital menu screen with colors and icons

Engaging one-to-one

The next screen I produced was a one-to-one message screen. This screen would see use of iconography and a message entry bar similar to most competitors. I decided to utilize AdaptivApp's system blue color for the user to differentiate their messages.
sketch of one-to-one message first digital draft of one-to-one message updated digital one-to-one message with color

Stuck on you

The following screen I sketched was the option to send stickers. Both Facebook and Telegram utilize this feature and I felt like it would be a fun way for younger users of the app to communicate. I also encouraged the stakeholders of AdaptivApps to reach out to artists with disabilities to make stickers for the application. The messenger app would also utilize emoji's in the similar style.
sketch of message with ability to send stickers first digital draft of using stickers in messages updated digital message screen with colorful stickers

Whereabouts known

Another feature I borrowed from competing applications is the ability to send your location or a key location to a user in a message. This would help guide volunteers to key points at events, saving time and confusion.
sketch of message with option to send location first digital draft of message with option to send location updated digital message with option to send location in color

Indubitable audible voice

This screen features the ability to send a recorded voice message. This would be crucial for the visually impaired to be able to speak a message. Like Telegram, you would be able to preview the message before it is sent.
sketch of message with option to send voice memo first digital draft of message with option for voice memo updated digital screenshot of message with colorized voice memo option

Declaring a misinterpretation

I had initially approached AdaptivApps Messenger for the desktop as sort of an overlay akin to that of Facebook's messenger. In the screen below I placed one of the screens of AdaptivApps Messenger to the existing AdaptivApps site. It was discovered that this would just not work for the Stakeholders.
Original digital mock up of desktop message screen

Withdrawing this gaucherie

Without hesitation, I began to reimagine AdaptivApps Messenger as a desktop app.
Updated digital mock up the desktop app screen
This screen shows after selecting 'Chats' and opting to send a new message.
desktop screen for one-to-one message
This screen shows one-to-one message.
desktop screen for message with sticker
This desktop screen shows the ability to send a sticker.
desktop screen for message with location
This screen shows the ability to send a location.
desktop screen for message with a voice message
This desktop screen shows the ability to send a voice message.

Converging communication

In the final designs I changed the dated verbiage of 'chats' to 'messages', cleaned up the iconography and colors and gave the same treatment to the mobile screens as well.
Digital mock up the desktop app screen
Desktop menu (above) and mobile menu (below)
desktop screen for messages list
desktop screen for one-to-one message
One-to-one message desktop (above) and mobile (below)
mobile screen for one-to-one message
desktop screen for sending stickers
Sending a sticker desktop (above) and mobile (below)
mobile screen for sending stickers
desktop screen for sending location
Sending a location desktop (above) and mobile (below)
mobile screen for sending location
desktop screen for sending audio message
Sending a audio message desktop (above) and mobile (below)
mobile screen for sending audio message

Expanding the network

I had been approached by the stakeholders after the completion of AdaptivApps messenger to create a social newswire like hub for AdaptivApps. This would feature articles about events, athletes, guests and other things happening with Angel City Sports.
sketch for social newswire hub for app
I chose this sketch out of eight total to continue designing screens for
initial digital mockup of social newswire for app
I then crafted this design, adding a list of featured articles.
final screen digital mockup of social newswire for app
With this screen, I added the 'Newsire' to the side menu (this was also added to the final screens of AdaptivApps Messnger)

Conveying hereafter

Utilmately there is more to the AdaptivApps community that needs to be completed. After presenting the stakeholders with the Newswire screens I was informed that they would be restructuring designs in the coming months due to the current Covid-19 pandemic.