Before Gary

Below is what the platform looked like before I was assigned to give it an upgrade. Features had been added over time, cruft built up, and it needed a common visual language.

Since then I've designed and maintained wireframes, mockups, prototypes, style guides, and UI kits for multiple web application platforms based on detailed requirements. Planned and worked with front-end teams on implementing designs for projects. Maintained design consistency across projects to ensure a common design language.

Creating Consistency

Login Screen

New login screen. Tasked to update the original login screen with a design that was more reflective of the brand. Simple, clean, and easy to use. The user icon in the top right hand corner is carried out into the main navigation to represent the user once logged in. Implemented using SASS/Bourbon.io/CSS3/HTML5.

Dashboard

The "settings" panel is expanded as shown below. The dashboard, the primary place for users to get detailed information on their ad campaigns, can be customized with predefined filters that can be dragged into the toolbar. The navigation shows the current page in orange and will highlight in the same color if the user mouses over each navigation item.

Utility Icons

In the dashboard, the dropdown with cloud icon below allows the user to switch platforms if they have the required permissions.

Multiple platforms / clients can be viewed using this. Not all users will see. Followed by Search, Add New, User, Filters on and Off ( shown as off ), Admin, Help, and Logoff. Icons are crisp and simple.

Sprites

Created icons and a sprite image for the platform's new design. Then using a custom programmed SASS mixin that I created, I could target which icon I wanted to use. The mixin would do the math to automatically set the background-position.

UI Style Guide

Created a shared Evernote notebook that gives examples of common UI elements used in the platform, associated classes, examples, images, etc... The images embedded are layered PNGs that can be used in Adobe Fireworks simply by dragging them from Evernote into the application. Developers used this as a reference for their work.

Evolution of Style

As time has progressed over a couple of years of working on the project, I moved our design language to a simple flat concise look and feel. Much of the workflow and UX of projects had to re-evaluated as well.

‍

Dashboard

The image to the below is the Dashboard workspace. As you can see by the mockup, the navigation was updated as well. The amount of utility icons on the right were scaled back to be minimal.

‍

Running Campaigns

This is a dashboard to show an overview of running TV campaigns. From there the user can click in to get a more detailed view or quickly edit key attributes from this screen.

‍

Detail View

This is the expanded view once the user has clicked on the card from the dashboard view. Then campaign details are presented in this manner.

‍

Reporting

Reporting was updated to match the new look and feel. Colors, workflow, and menus were all updated to reflect the platform's new UI.