PlusGuidance didn’t want to reinvent the wheel and they aren’t a dedicated messaging app, so they needed their instant messaging function to feel familiar to what their users are already familiar with. The design is heavily inspired by Facebook’s Messenger and Whatsapp.

This design was for the mobile view of their website.

pg-messaging-mockup-1

Click on message to reveal more information.

pg-messaging-mockup-1-1-messaged-clicked-on-to-reveal-sent-seen-time

Pull out contacts menu

pg-messaging-mockup-2-1-contacts-clicked---contact-list-slides-out-from-the-left
pg-messaging-mockup-2-2-Bold-name-and-date-indicate-unread-messages--intelegent-date-naming