GovEx Works

GovEx Works is the internal project management dashboard for Johns Hopkins University, the Centers for Civic Impact. It is a Django web application for internal tools and online visualizations.

WWC Dashboard in MacBook Pro Frame

Background Overview

Objective

The goal of this project was to completely rebuild and redesign the internal project management dashboard by improving both the user experience and the user interface. GovEx Works is the new dashboard that was built from scratch to replace the previous version, known as City Manager. The backend was migrated with new tables and the front-end code was a brand new blank slate.

Duration: November 2019 - June 2020
A Team of Two: It was just me and the back-end developer!

My Creative Process:

alttext

My Roles

  • UX Researcher
  • UX Designer
  • UI Designer
  • Full Stack Programmer

Tools that I used:

  • Figma
  • Adobe XD
  • Moqups
  • Bootstrap, JavaScript, jQuery, AJAX, Axios, Bootstrap Material Design

UX Methods:

  • User Interviews
  • Personas
  • Wireframes
  • Low Fidelity Prototypes
  • Feedback Surveys

Personas


Below is a summary and representation of primary users of the dashboard. They use it daily.

Person #1 Person #2 Person #3
Name Eric Jason Amy
Photo profile pic profile pic profile pic
Center GovEx GovEx Academy GovEx
Occupation Title Senior Advisor Training Instructor Program Manager
Age group 35 Years Old 28 Years Old 47 Years Old
Motivation and benefits of product usage

As a Senior Advisor, Eric uses the project management dashboard to document the status of all of his projects and commuication with city government contacts.

The dashboard allows him to see a record of all communication, delays and urgent notes when dealing with different cities and states.

Jason cares about the course survey results for attendance and participation feedback so that he can improve or maintain the quality of future courses.

Amy's workflow heavily relies on managing her daily tasks for all of her long-term projects. The dashboard will help her manage her projects, tasks and all of her activities. It will serve as a record of notes and important information for her.

User Needs and Context of Usages

Eric's core use of the dashboard is the "updates" tool that serves as notes and documentation. He needs to be able to easily search, filter and write updates to adequately track all relations with different city government officials.

It's key for him to be able to find past and present communication notes for all cities.

Jason needs at-a-glance visualizations to capture course survey results. He also needs a way to leave notes and communication with his academy team.

He needs to be able to easily find all of his course and training projects. So search and navigation is key.

Amy is VERY busy managing multiple programs and projects so she doesn't have the TIME to figure out technical tools. She needs an intuitive user experience with an interface that is easy to use.

She struggles to find things when it comes to technology and will not put in the time to figure it out because she is very busy. So a user-friendly and clear navigation is key for Amy!

Digital literacy

High

Medium

Low


User Interview Complaints

The previous dashboard made it difficult for users to find their data.

Note: Users had to dig through several pages to get to their own data and to be able to do certain functionality such as create tasks.

Dashboard tools and apps were difficult to use and hindered staff.

Example: The Scope Builder tool forced users to Zoom Out in the web browser in order to see everything.

Users thought the dashboard would break when creating tasks because the user experience and interface was not polished and professional. It looked wonky and buggy.

Extremely slow performance and loading.

Problem Statement

Staff needs improved usability for the project management dashboard so that they can effectively track and document their work.


Solutions

  1. Improved User Journey from Login to Homepage

    I completely changed the user journey experience from login to the homepage. I created easy-to-understand navigation on the homepage to enable users to find their data. Users no longer have to click through 3 pages to get to core information.

    User experience feedback on the new and improved homepage:
    Survey snippet screenshot
  2. Scope Builder Tool

    Before

    Before

    Users struggled to use this tool. They had to zoom out in the web browser in order to see all of the time lanes.

    After

    After

    I redesigned the tool to be a horizontal Kanban board style so that users can easily drag and drop selections. It will have a search filter.

3.  

Task Creation

I improved both the UX and UI for tasks based on user feedback. In the older and previous version of the task UI on the left, users stated that they felt the tasks would break and did not feel confident in using the feature. They also shared that the UX was not intuitive or easy to understand when sometihng was marked as completed.

To edit, delete and save is more obvious in the redesign with the icons that each have a call to action.


User Feedback

Beta Launch Feedback May 2020

I sent a survey to collect feedback from staff and to ask for any requests during the Beta launch phase. Here are some results.

User Feedback during Beta Launch

Survey snippet screenshot Survey snippet screenshot

User Feedback After Launch to Production

Survey snippet screenshot

UI Design Gallery