Project details
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.
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.
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.
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.
