Performance Monitoring Dashboard

Project details

Employer
Clarabridge
Type
Propietary app - Performance Dashboard
UX Technologies
Sketch, Photoshop, Whiteboard
Development Technologies
AngularJS, Bootstrap, Highcharts, D3, HTML
clarabridge

Short Summary

Creation of a new UI for a Performance Management dashboard that displays configurable infographics from real-time data. I designed the user interface, prototyped animations and built the front-end. A new code management was required for development, which I implemented. Researched latest CSS Preprocessors for implementation into our department’s standard software lifecycle, using GIT for version control and JIRA for bug tracking and fixes in an agile/scrum environment. Setup a Node.js build system for SASS and Javascript compilation and minification, using GulpJS.

clarabridge

UX Strategies

Discovery
  • Researched user base to discover unforeseen app navigation issues.
  • Researched current and past versions for searching big data via Natural Language Processing (NLS).
  • Created Journey maps of the various social media data types coming in to the system.
  • Creation of personas explemifying different user groups.
  • UI journey maps to uncover better ways to manage multiple streams of complex big data.
clarabridge
Ideation
  • Generate ideas for UI quickly.
  • Whiteboard wireframing & storyboarding.
  • Quick mockups in Sketch & Photoshop.
Rapid Prototyping
  • Functional mockups in code to deliver to department.
  • Internal testing of the interface.
  • Implemented the final prototype in the AngularJS framework, utilizing built-in directives, as well as creating services and factories to manipulate the data.
clarabridge
clarabridge
clarabridge
clarabridge
Implementation
  • Developed front end components, utilizing HTML5, CSS3, AngulaJS, Highcharts, D3 and jQuery.
  • Created mock users and mock data based on user research for RESTful API calls via JSON files (using the $http.
  • Implemented the responsive layout, via Bootstrap & media queries, for the UI. The objective was to display correctly regardless of sceen size/
  • Developed front end UI components using AngularJS directives, by creating services to encapsulate the data and update the views with controllers in JavaScript.
  • Wired different views of the application pages using AngularJS’s UI-Router within the configuration of the app module and injected the ngAnimate module to create seamless transitions of pages with CSS3 transitions.
clarabridge