HOME

IT Scorecard Application

UX Process

Overview

The Cox Automotive EOC IT Scorecard was an internal web-based application, the purpose of which, was to help the EOC staff perform their jobs better. The IT scorecard application served up a dashboard that made the following items of information more easily consumable by the EOC staff.



  1. Website Availability - Are the websites up?
  2. Impacts - Are there impacts?
  3. Mean Time to Resolve (MTTR) - How long did it take to resolve an impact?
  4. Mean Time to Identify (MTTIR) - How long did it take to identify the problem of an impact?

The web-based application need to be a responsive design for desktop, tablet and mobile and was being developed using Angular JS. The site used Google Charts for data visualization and those sample charts are implemented in the prototype.


Process


For the project I used the standard “Design Thinking” process flow.


Discovery/Research


I worked closely with the EOC Director to find out what the “big idea” was for project as well as the following:


  1. Business Case
  2. Project/Application/User Goals
  3. Problems and Scope
  4. Users/Audience
  5. Timeline

With the above information in hand I started the design process wanting to learn more about the users. To that end I felt a user survey would be the best way to accomplish that as access to the users for 1 on 1 interviews was not possible.


User Survey


A user survey was created and distributed using Survey Monkey to get some initial feedback from the users. The questions covered the basics to get the process moving:


  1. What is your role in the EOC?
  2. What tasks do you need to accomplish in your role on a daily basis?
  3. How would you like the IT Scorecard application help you accomplish your tasks?
  4. What information do you need to be displayed to help you accomplish your tasks?
  5. What challenges and frustrations are you currently encountring while trying to accomplish your tasks?

The feedback obtained from the survey helped get a better understanding of how the users wanted the app to function for them. Some examples of the feedback included:


  1. A dashboard that displays all of the information for me to easily see and understand
  2. Charts to help display the data
  3. Ability to see impacts and their status (in process, resolved etc.)
  4. The ability put a date range on what data is displayed
  5. Linking from the charts to the incidents

From the list above along with what I learned from the director I first started looking at different charts that I thought would best display the data. The charts I settled on ended up being a simple line chart that also had threshold markers on them to help show the EOC staff where the acceptable line for things like availability were. For example website availability need to be at 99% and above.


I also started some basic work on information architecture, what pages would be needed how they all connected and what content would go on each page.


Ideate/Prototype

Wireframes

From the review, feedback and discussions with the Director and Developer, some brainstorming at the white board was done that gave some basic direction for what the site structure and pages would look like.


Design

The design of the application followed a basic structure and I looked to some other internal Cox Automotive websites for guidance for colors and typography. I iterated through the designs with the EOC Director and he gathered feedback with the users by sharing the initial designs that evolved into what you see next.




Prototype

After a design had been decided on I worked to turn the design in a prototype using HTML, CSS and Javascript with JQuery on top of the bootstrap framework. The prototype was a clickable interactive prototype that allowed the developer to get a good idea of how the application would work and it also allowed users to see the application at a desktop, tablet and mobile view


You can view the prototype by following the link below. NOTE that since the Retail and Inventory pages were identical to the Media page only the Media navigation link takes you to a prototype page.


IT Scorecard HTML Prototype

Recap

And that's it. The project was a fun project to work as it was the first time I was the lone UX person working on a project. So I got to be invovled in all phases of the process from the kickoff and discovery to the visual design (I am not a visual designer) to the prototype.