Designing a Chat-App
This project was created to showcase some fun and friendly looking UI, in a practical and functional setting. This mockup was intended to be a short project and was completed over two days.
Exploring the Concept
Sketching
The scope of this project starts after that the user have gone through the sign up stage of the app and will set their account details.
I started this project with making simple sketches, exploring what features to include in the application as well as basic layouts and color schemes.
At this stage the main purpose was to ideate and to find as many different solutions as possible to the layout and structure of the main features.
Wireframing
I then created low fidelity wireframes of these basic functions, in order to preform user testing. These functions were:
A home page
A page to set account details
An avatar creator in several steps
A confirmation page
Placeholder pages, for features that are not yet implemented
These wireframes were then tested on a total 12 people over two iterative phases.
Making a Mockup
The UI
The mockup contained a simplified version of an account settings page where it is possible to set gender preferences, select a username and write a short Bio.
The color scheme uses dark shades of low saturated purple for the background, that are designed to provide hi contrast for the white text and aid in readability.
The assets, such as buttons, icons and tick-boxes uses rounded shapes and corners as much as possible, to convey a friendlier look. Outlined edges are used exclusively for buttons and icons. Drop shadows are used sparingly to highlight interactive elements.
Avatar Customization
The mockup also contained a simplified Avatar creator where the user can select a hairstyle, hair color and background color theme.
The key visual elements for the avatars, where a balance of rounded shapes for the base and body, accented with the harder and sometimes more intricate shapes used for the hair. The hard edges and soft shading and paper doll expression of the avatars are intended to harmonize with, and ascent the UI. The subtle variation in shape language also serves to make it a visual interest point among the otherwise simple interface.
Final Thoughts
The time frame of the project proved a bit limiting, but in a positive way. It forced me to pay attention to what really mattered, in order to fulfill the scope of the project to a satisfactory level. If I had had more time I would have spent some of it conducting deeper user tests on both the wireframes and final UI. As I felt the there was still some elements and functions that might not be easy to understand to the the average user. For example the conversations tab in the final screen.
If I could I would also have spent more time giving the avatar creator some deeper customization alternatives. I would also have liked to design it in a way that would show how more options would fit into the UI as a whole. Some type of navigation between the customization options would also have been worthwhile to look into.