image
Click above to enlarge

GovEx Works

Internal Project Mangement Dashboard

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

Project purpose and goal: The purpose of this project was to completely revamp the user experience and the interface of the dashboard to be more intuitive for JHU staff. This project required me to redo both the design and programming from scratch.

Figma
Django
Python
Bootstrap
jQuery

My Design Process

UX and UI Design Stages to Launch

I follow the iterative design thinking process. My designs are driven by the user's needs and feedback.

1

UX Research to Empathize

  • Contextual Inquiry Interviews - Onsite and in-person interviews where I observed and recorded sessions of staff using the previous older dashboard version. It helped me to see their struggles and problems when using the dashboard app.
  • Competitor Analysis - I researched best practices for project management dashboards and apps.
2

Define

  • View Affinity Map for organizing post UX interview research for the older dashboard version before the redesign.
  • View User Journey for the previous dashboard version to understand the user pain points and needs. This was helpful for me to be able to to know how to optimize the user experience for the future redesign.
  • Problem Statement: The JHU internal staff needs the project management dashboard to have improved usability (ease of usage) with a more intuitive user interface in order to effectively manage their daily work.
  • View Personas
  • Information architecture (IA):
  • Sitemap to plan out the new dashboard structure, hierarchy and the overview of sections.
  • ‒ My supervisor requested that I create this HUGE database logic model diagram to help the tech team visualize ALL database table relationships within terminology established by leadership.

    ‒ Then I created this Dashboard hiearchy diagram as a more simplified and user-friendly visual for non-technical staff to understand the new terminology and hierarchy relationships.

  • User Flow
3

Ideate

  • Sketches - The first hand-drawn sketches.
  • Whiteboarding
  • Wireframes - Transition physical sketches to low fidelity digital wireframes.

To get my creative thoughts flowing, I like to draw my first thoughts based on UX research. Then I turn those drawings into digital low fidelity versions to be able to share online for collaboration and feedback.

4

Usability Testing

  • I conducted usability testing with a low fidelity prototype in Figma for a core dashboard tool in Fall 2019.
  • This was helpful to test solution ideas for certain tools and features that users struggled with. The same staff that I interviewed with posted positive feedback and suggestions as comments in Figma.

  • A/B Testing
  • Javascript coded prototypes for user testing and to capture user preferences.
Moses prototype comment
Click above to enlarge
Login Animation
5

UI Design and Code

  • Figma Design System and Components.
  • High fidelity prototypes. I went to a higher fidelity after user needs were tested and confirmed.
  • I hand-coded my designs using Django, Bootstrap, CSS, SVG, jQuery, Select2, AJAX, Python, D3.js and Highcharts JS.
  • I wrote back-end Python functons to create API endpoints for data to display in the front-end. I also wrote database queries and model methods in Python for certain functionality logic!
  • * I can use this knowledge when making UX design decisions but I would prefer not to do this level of implementation in my next role. My strength and passion is more on the UX and UI creative side!

Color Palette

  • Purple Contrast

    #843CF7, #4E244E
  • Blue

    #38ADE1, #8cc152
I use Roboto Font.

UI Designs

6

Final Testing and Launches

  • I sent out a user feedback survey in May 2020 during the beta deployment for testing. I requested that users click through the dashboard for what was there so far and submit their feedback, questions and requests in their survey submissions.
  • The early beta launch survey report showed that staff rated
    4.7 out of 5 for my UX and UI dashboard redesign work! That's pretty close to 5 during the early stage! My next goal was to apply their needs and revisions to get it to 5 out of 5
  • The feedback during the beta launch was helpful with good suggestions that I was able to apply to the code base before launching to production.

  • The final launch to production was in late June 2020.
Process
Click above to enlarge

Feedback and Results

Internal Staff User Feedback

Check out user quotes and success!

Jacquie profile pic

Shout out to Alicia Alexander who was just walking me through some of the new GovEx Works! Having come on and worked with the old version of the dashboard and then coming onto this new one, I'm really happy with how user-friendly and clear this is, and excited to be able to use it more!

Jacquie Greiff

Johns Hopkins University
Monitoring and Evaluation Associate

Rudy profile pic

Alicia has been an integral lead in redesigning UI quality at the Centers for Civic Impact and successfully navigated this through a global pandemic, no less.

Her deep knowledge of her craft coupled with her ability to transform ideas has resulted in maximized usability, excellent user experience, and intuitive interfaces. She is an outstanding professional and will be a great asset to any organization lucky to have her.

Rudy de Leon Dinglas

GovEx Senior Advisor

Michael profile pic

Survey says the new GovExWorks UI is better than before and users are happier than before.

Michael Benison

GovEx Academy Instructor