As a web application, Social Heat's information architecture was divided into 4 branches with the main workspace being the Dashboard and its sub-branches which are the focus of this case study. Supporting this branch are Widget Management, Account Settings and System Managements which are mainly responsible for managing the app and other various minor tasks.

The Dashboard wireframe was developed by collaboration with the Business Analyst. Below is the first draft of the dashboard consisting of all the elements of the old SocialHeat, organized in a more modern and intuitive way.

The overall color scheme for SocialHeat was developed in accordance with the Brand Guideline for YouNet Media products, featuring the two main colors of the company (Blue and Orange). In order to modernize the look, I opted for a darker shade of blue for background elements and a vibrant, fresh orange to compliment it as the foreground and highlighted elements. This contrast was important for a complementary web design. The use of gradients were heavily toned down throughout the development cycles. (Below is a sample layout I used to propose this color scheme to the Business Analysts and it's not representative of the actual layout of the app.)

The Login page, being the first page first time users interact with, has to leave an impression of what the application is about as well as how Social Heat as a brand revolves a round. Vector illustrations of technological imagery were used to convey this idea. The layout is quite standard in order to not confuse users and make the log in process as intuitive as possible.

The purpose of this popup was to help first time users to navigate through the app more easily. It features a normalized, standard onboarding layout illustrated by vector art drawn in the same style as those presented in the Log In page.

Applying the new interface design to the agreed upon wireframe, SocialHeat has never looked fresher.

This style guide features all instructions for every graphic element of the user interface. From more generalized concepts such as typography and icons to individual design components.