Components

Creating the Building Blocks

I discovered through collaborating with engineers that the components below would be developed as “widgets” for the application. These widgets would be easily integrated into the application and could be changed and easily pushed to all areas of the applications. Components are essentially the building blocks of the applications. They hold a lot of core elements that could be pieced together to form functioning parts of a whole experience.


Button Styles

Our button hierarchy was kept simple and lean. It was separated into primary, secondary and tertiary buttons. Depending on the usage, they can vary in size and style. As you can see we have button groups, list buttons, and text buttons below that can be used in various cases.





Tooltips

We typically try to be conservative about tooltips because they can easily become a nuisance. Our tooltips are designed to work on a wide array of background types. The light version works well for darker more contrasting backgrounds, and the dark version works well on lighter backgrounds.

Tooltips work well for indicating a new feature or highlighting a first time usage action. Other than that we try to avoid the usage of tooltips.




Toast and Banner Messages

The creation of tooltips is new for Tango because in the past the application would trigger popups. I knew that pop-ups were way more intrusive than a toast or banner message, so I created subtle banners that would hang out at the top of the screen for a brief moment. It was an easy way to send a confirmation of an action the user took.





Chat Elements

The designs for chat history were a system of its own. I’ll be going into more detail about this in a later article. The basis of the chat element designs was to highlight the types of chats, media, and actions the user could take.





Iconography

Tango's icon design was created by our in-house team and included a set of principles that highlighted our product values as well as brand values. The usage of elegant thin lines was the first attempt at simplifying for our look. The cleanliness of the icons created a crisp feel. In addition, the icons were designed in a way where little interpretation was needed to decipher the meaning of the icons.