Management SW Redesign

The original design of the Project Engagement Management (PEM) software website was clunky, inefficient, and visually out of date. I was responsible for conducting a usability analysis on the key task flows, creating an updated site design, as well as conducting user research on the original website and all redesigned pages, features, and user flows. My initial findings showed that managers were fed up with entering repeated information, had trouble with seeing where in the process they were, and wanted a cleaner site design. 

‍

After 3 months of usability analysis and iterative user research and designing, I provided the tools development team with complete, high-fidelity Figma prototypes for the key user task flow which created a faster, streamlined design and a new information architecture that reduced the number of times users would have to input repeated information.

‍

Usability Analysis 

An initial investigation into the PEM site showed many usability problems that the users of the site would have to face on a daily basis. This tool was designed to support an internal consultant agency to keep track of what projects, or engagements, were running, who was on each engagement, and ensure all engagements were up to date with billing. People managers were the primary users of the PEM site and used it on a daily to weekly basis.

Above, you can see the process flow that the initial usability testing revealed after going through the basic tasks that managers complete in the PEM. The orange sticky notes highlight four key areas where the original PEM database was not connected to itself during normal user tasks which resulted in multiple instances where the same information such as start/end dates of projects or worker IDs had to be entered multiple times. These areas highlight a lack of error prevention and a high mental load on users to ensure they were entering the same data the same way in multiple locations.

User Testing

The results of the usability analysis led to a starting point for research with a sample user group where I created a protocol focused on identifying user pain points and ideation for how to solve the issues users were facing.

User testing started with a blank, low-fidelity wireframe of the PEM tool’s task flow as seen above. On this wireframe, I included a visual element that showed my proposed change to the original database design and instead used a relational design to propagate any changes made in one section throughout all related tasks with the same information.

Six user interviews of 60 minutes each were conducted with the PEM frames. I facilitated each interview and used real-time notes on the wireframe pages to note down user comments, pain points, and key features that users did not want changed. This helped me better understand how managers used the tool, what information was priority, and how to better design future iterations of the designs to address user needs. 

‍

These user interviews supported my initial usability findings that the PEM tool was slow, siloed, and required repetitive tasks that users did not find appealing. Additionally, five of the six users commented on wanting an updated visual design that reduced clutter and visual strain to find what they were looking for on the pages.

‍

Throughout the designing process, user research with the six participants continued in short, 10-30 minute sessions for A/B testing and quick feedback gathering in addition to working with PEM Stakeholders and longer user feedback sessions to determine final task flows, tool usability and high fidelity designs.

Figma Iterations

An iterative design process was used to take the low-fidelity wireframes up to the finalized high-fidelity deliverables. 

Each set of designs was presented to stakeholders and users to ensure that all key elements were kept intact while updating the visual design and changing the task flows to better serve users. Extra attention was paid to navigation between elements and how information is presented while in the tasks.

Above, you can see 3 design options presented to the stakeholders for ways to load details of an engagement agreement. These three options were created based on some users wanting all information available on screen at all times while other users wanted to hide sections of information and only dive in when they wanted to. I recommended that the stakeholders used an expandable section system with key information displayed above the fold when loading pages. This design would use visual cues to users that more information was available while still allowing flexibility for users to control how much information they exposed on the page at once. This design choice was preferred by most users and with my recommendation, the stakeholders selected it.

The Final Design

My final deliverables were high-fidelity Figma prototypes that were fully interactable to simulate the user task flow of creating, maintaining, and viewing an engagement. These designs made use of the corporate design system while maintaining custom task navigation and prioritizing key information on each page that users requested. Below are two examples of part of the flow and a detailed page view of one of the data entry pages.

‍