AdClear UI :: Raoul Zander

Tags: Professional 5 Web 3 Web applications 4
Language(s): CSS 17 HTML 6 Java 7 SQL 2 Wicket 2
Date: 30 Sep 2015
Related Projects: AdClear Loading Circle

I joined AdClear as Junior Front End Developer and within 4 years worked my way up to Lead Front End Developer**. In this time I developed, implemented and managed three major versions of the companies data dashboard, called 'AdClear UI'. The latest re-design is documented on the right.

'AdClear UI' is the main access points for company clients to check their online marketing performance and customer journey analysis.

Starting point

AdClear UI v3.11
1. Removed eye candy

Removed rounded corners, gradients, shadows and unified the shades of gray for a more flat and lightweight look.
2. Aggregated navigation

Instead of 4 navigation components throughout the UI, there's now only 1 component on top.
2. Aggregated navigation

The navigation can be expanded by hovering with the mouse.
3. Global filters

Introducing an aggregated filter bar with AJAX functionality.
4. Date range picker

Instead of two date pickers, there's now a date range picker component, making interval selections way easier and less error prone.
5. Login screen

Redesigned login screen, now with 'Remember me' functionality.
6. Table buttons

Common actions for tables, like exporting or filtering, got coherent button look. Also introducing a button to hide the associated charts.
7. Chart collapsing

Charts can be toggled with a single click.
Reference 1

Example for a flat design dashboard.
Reference 2

Example for a futuristic screen design.
8. Final result

Flat design with hint of futurism. Using 'Open Sans' as font, as it is the corporate font.

Java 7		85%
xHTML5 6		95%
CSS3 17		90%
JavaScript 5		85%
SQL 2		70%

Portfolio

AdClear UI

Raoul Zander

UI Lead

Raoul Zander

UI Lead