Goal
Our main goal was to design a simple, effective, and customization chat app interface. ChattyBox consists of a user oriented interface (and experience) which meets the user’s expectations by allowing them to easily find and add contacts, create groups, and message other ChattyBox users.
Mood Board
Rationale
We have come to the realization that current messaging apps feel static, and that there is a lack of emphasis on the 'personal' aspect. Our main goal was to design a user oriented interface (and experience) which meets the users expectations by allowing them to easily find and add contacts, create groups, and message other ChattyBox users.
Challenge
We set out with the intent of creating a mobile SMS chat app for iOS that would appeal to an untapped aspect of the platform: personalization. Compared to it’s android rival, Apple's platform has been notoriously closed and limited, so we aimed to make an app that would appease current iMessage users, but also make Android users envious of the users customization features.
Solution
Not only did we create an interface to allow cosmetic changes, we intended to make the app more “personal”by implementing an optional, unique way to talk to other users. The “Personal View” compliments the industry standard “Social View” (left and right text bubbles), to provide a more intimate and enjoyable 1-on-1conversation experience.
Branding
We aimed to create a unisex, inviting brand. Something that would convey the word “ChattyBox” as something literal and playful.
Icon
As a chat bubble icon for a chat app is very common, we wanted to do our own spin; we wanted to have an icon that would establish our app's aesthetic and be a play on the name of our app - ChattyBox.
We decided on the Montserrat typeface, and used different font weight to separate the "Chatty" & "Box", to make it easier to quickly read for the first time. The shape of the final bubble was discovered by accident when trying to make rounded corners in Illustrator and forgetting to select one corner; Just goes to show - there are no mistakes, only happy accidents...
FINAL RESULT
High Fidelity Mock-up (from Left to Right: Splash Screen, Contacts Page, Messages Page)
Task flow (Sign-up/Login process)
Task Flow (Complete)
USER CHOICE
Customization
An example of the cosmetic changes possibly available. This such example shows off theming, in particular the dark theme, seen throughout various elements of the app.
Left: Light Theme (Default) Right: Dark Theme
Personal & Social View
As ChattyBox is all about options, Personal View is one of them. Visually inspired by video chat, the idea is to make active conversations with a person feel more dedicated to the person you are talking to, without losing the contextualization for your own texts. It could be a feature used heavily, or one never used at all, but we fell it is important to supply the option to the user.
The video chat inspired "Personal View" (Left) and traditional "Social View" (Right)
Final Thoughts
This was the first major, in depth, fully realized mobile app concept we had as students at Humber College, and we treated it like work. Everyday, discussions about what features were needed, how should it look, and when we can schedule full workdays to meet our deadlines, making ChattyBox was a long, difficult, but rewarding experience.
Due to time constants, proper testing of the unique "Personal View" could not be done, and thus its usefulness could not be fully realized; in its current form, it could ultimately be seen as only a gimmick.
There were times where me and my partner did not see eye to eye - mainly aesthetic decisions, to which it's only a difference in personal taste - but I regret none of my time designing this concept. This experience is all about compensating and collaborating with others, which will help us greatly in our future endeavors.
Thank you for viewing!