Channel Messenger App

Summary

Messenger Channel App that has maps and upvote system integrated. It is a messenger app project, that will enable people to install the software on their server machines. It also supports cloud set up, while providing a free demo. The whole project was to cover the design top to bottom, with branding and the logo, web site, and promotional materials. The whole project had iOS, Android and Web App. Administrator, settings, web site and blog pages ware also designed ground up. I designed almost everything in Figma and prototyped in Marvel. I lead the team of 3 designers and 2 front end developers.

The Problem

 I faced many problems while designing this app. Problem is that with messenger apps, the font is everything. We have tested various font styles and only a few looks crispy clear while having all needed characters for multi-language. At first, we had a unique design that followed iOS and Android standards. Using components from the two operating systems was a problem at first. We expected to be easier for developers and therefore faster. We gathered feedback results and it turned out that people value more designs that are not generic to much. In the end, we decided to follow new trendy and a unique design for both, which resulted in much modern app design, while following standards for iOS and Android.

I have done many design changes along the way. First, we gathered feedback from the people in the company, by conducting AB testing and surveys at first. Later we started conducting hotJar tests. 

The Process

 

In this section I will describe the process I went trough while designing this project. Project had many drawbacks, and a lot of things had to be done ground up. Let’s start with the first draft and wireframing process.

I stuck to the most common fonts for UI while testing. One designer from the team proposed a font called Exo, which did not turn out so well. The font was not readable enough and after a few more attempts, we decided to stick to good old Lato. Only a few simple fonts are suitable for messenger apps, as they have a lot of text so Lato was one of them that had all characters. The app had plenty of features and each feature had many cases and user flows. I have started with designing wireframes at first for every screen. Later I realized that I don’t have enough time and resources to catch up with the tight deadlines with each wireframe. This made me focus on new wireframes only for crucial and specific parts of the app, where wireframes ware only necessary.


The Design System and Style Guide

As soon as we had a few of the most used screens designed, reviewed and frozen, I started with the design system. The system included components for both Web and Mobile Apps. I was instructed to use the most basic and standard design components at first. I realized that this type of approach is gonna be faster, but end results will be pretty basic. The app had no design signature and it looked kinda plain. While conducting some tests later, we realized that people memorize better and value more unique looks, that reflect modern design techniques. At the moment I was designing for iPhone 7 and Oreo- android 8. 

I designed web design system first, where I have included Typography, Buttons, Checkboxes, Grid system, Imagery Guidelines, Colors and more.

The developer, coded the system and included html and react code that could be reused in further development. This made our life much easier.

 

 

After web system, I created mobile style guide, where I have included components that was used in the app design. Typography and Colors was something that was done at first.

The First Outcome

I struggled to keep my point alive. Pointing out that I believe that the app itself is a bit plain and wanted to give it another shot. I had to follow tight deadlines that had no room for revisions. 

I also wanted to follow the design sprint method, which allows us to freeze the idea and the design once for all. This time I lost the battle and had to follow up with given instructions no matter what. But I was not happy with the outcome whatsoever.

The design sprint system is devloped by google, and awesome guy Jake Knapp wrote a book about it.

Im a huge fun of design sprints and I believe following it, you reduce the risk for going back and fixing things by 80{78d8c761bc1bc0a5aab406374b309a946dbcdb293a72bde1c4d9d9ad760ef673}.

The Final Design

Once we agreed to have improvements and in what direction, I created the versioning system. Developers need to know what to update as we ware working on multiple projects it was a bit hard to track with all the updates. 

The versioning system was very helpful, as there was a version log in every screen that has been changed from the start. 

As part of our design system, I created a page with all the pages listed nicely categorized by features and sections. Version control was added additionaly later.

This page was not created to be beautiful as it was just part of our internal system. The design had to be simple and straight forward. 

Eventually, the design sprint was followed for a couple of weeks, and it gave me time to standardize components for new design updates. The update reflected more modern and unique design big and colorful icons, simplified User Interface.

We applied same style on all 3 platforms.

 

To be continued …

 

Leave a Reply

Your email address will not be published.