CONVERTING TO THE WEB
AA Planner Case Study
With increased scrutiny, it is more important than ever to ensure workforce compliance and diversity. Peoplefluent’s affirmative action planning software is focused on this task, but their primary software solution is targeted for large companies while it’s software designed for small to mid-sized companies was dated and no longer used.

I was part of the effort to redesign the software, converting it to SaaS and attract new customers.
To comply with Peoplefluent’s privacy agreement, I have omitted and/or obfuscated confidential information in this case study. Fictional companies and information has been used in these designes. All information contained herein is my own and does not necessarily reflect the views of Peoplefluent or its partners.
AA Planner Prototype - Dashboard / Plan Selection Page
AA Planner Prototype - Dashboard / Plan Selection Page
MY ROLE
I led the UX effort to redesign and evolve the software as it was moved from a Windows desktop based solution to a web-based SaaS model.
INSIGHTS & IDEATION
I partnered with the product managers and engineering teams to uncover insights and translate functionality that addresses customer motivations.
EXPERIENCE STRATEGY
I created sketches and prototypes to share vision, content strategy and design principles. This helped to evangelise ideas and confirm alignment and functional requirements.
PLANNING & DEFINITION
I helped define the product and evangelised customer and business goals with the product managers. I negotiated and prioritised functionality and helped define MVP for launch.
DESIGN EXECUTION
I executed journeys, wireframes, protoypes and design specs in order to convey product features to the new design.
LEADERSHIP & VALIDATION
I presented designs to gain buy-in from stakeholders, product managers and the engineering teams throughout the project lifecycle.


THE CHALLENGE
REGAIN AND DISCOVER NEW CUSTOMERS
AA Planner is a diversity metrics and reporting software desgined for small to mid-sized companies. The software was dated and only functioned as a desktop application on Windows. However, the product managment team determined there was still a market for the product.

Our challenge was to modernize and evolve the software into a web based solution. We hoped to develop a solution that would enhance and streamline the experience. Peoplefulent would then be able to sell to new, smaller customers or target current larger customers who owned smaller subsidiaries.
Original Software Dashboard
AA Planner Original Software - Dashboard / Plan Selection Page
AA Planner Original Software Employee SPreadsheet
AA Planner Original Software - Employee Spreadsheet
KICKOFF
EARLY INSIGHTS
It was clear that the software needed a big visual overhaul in order to make it look more modern. AA Planner is designed to lead the user through a multi-step process to gather and generate workforce compliance and diversity reports. The report building steps were divided into sections under tabs similar to an internet browser. Immediately I saw we could improve on this model by ditching the tab structure and creating a clearer, more defined linear path for the user to follow. Clearer communication on steps and diversity report requirements would also help.
THE DISCOVERY
PERSONAL AND CUSTOMER INSIGHTS
I meet with product managers and had them lead me through the process of using the software from point A to Z with dummy data. I created some personas to get a better understanding of the needs and motivations of a typical user and also met with some current WCAD customers to get an insight into their percieved needs and typical software use. Right away we were able to locate areas for improvement and avoid user confusion. The average customer of PF's WCAD software only picks it up once a year when report deadlines come around. Keeping a clear path with at hand information on requirements and steps would need to be an important focus.

I partnered with the product managers and engineering teams to identify areas where we could remove or combine content to improve task flow. As later steps relied on completed content in previous sections, a linear path for completion was created accounting for the needs of the user at each stage.
Task Flow Planning
Task Flow Planning
Nav Style Development
Navigation Style Development
FRAMING IT IN
HOW WE GOT THERE
One of the challenges I faced with this project was in working with a distributed team. I was based in Massachusetts, while the rest of the team was located down in Texas. I knew it would be important to invest time in creating clear documentation to help alleviate confusion and to better articulate design rationale and expectations. Sketches for more complex content was discussed via video conferencing, and an online design library was developed that tied into the Peoplefluent UI specifications. Specifying design principals and my choices also helped to create visibility into the decision making process and avoid skepticism or paralysis.



Feeder Editor Sketch
EARLY SKETCHES
Working with the product managers and we started to sketch out how content should be displayed and organized section by section. Shown here is a pencil sketch I made for the Labor Report section.
Labor Report Sketch
MORE SKETCHING
We tried to move away from the previous Excel spreadsheet style and move towards a more card centric approach for the content. Shown here is a pencil sketch for the Feeder Editor section.


Peoplefluent Global UI Color Use Specifications
DEFINING SPECIFICATIONS
One of the ways I shared design specifications with the dev teams was therough the use of Peoplefluent's online Global UI and pattern library. This is a database built and maintained by the UX group. Here I'm showing a grab of our color specifications section.
Navigation Specifications
DETAILING DESIGN
One way I captured specifications for the dev team were via 'cheatsheets' designed to showcase a high level explanation of the design and the reasoning behind my choices. Shown here are some notes regarding the design of the main navigation.
VALIDATION
TESTING OUR ASSUMPTIONS
The US Government has clear guidelines on workforce compliance requirements and the content that needs to be submitted via annual reports. The benefit of these clear definitions made certain choices easy for how to structure the steps through AA Planner. Since we were defining a clear linear path, we didn’t have to account for compound routes or different needs and motivations of the user. The software had one clear purpose with a well-defined beginning and a clear ending.

Once I had buy in from the product managers and dev teams I took my initial sketches and notes and built a basic paper prototype. We then set up focus groups to test our design assumptions via contextural inquiry. One group contained users who had never used WCAD software before in which we kept our questions more basic. For a more detailed session we brought in customers who had in the past generated WCAD reports to guage their use and opinions around what we had designed. Overall there was a positive reception to the prototype with some minimal refinement to the overall flow and structure.
Paper Prototype - Replicate Labor Step
Paper Prototype -Replicate Labor Step
Paper Prototype - Assign Labor Step
Paper Prototype - Assign Labor Step
REFINEMENT
BRINGING IT ALL TO LIFE
With buy-in from the developers regarding structure and functionality, plus postive feedback from our focus groups and internal stakeholders, I began to define specific treatments and add visual refinement to the design. At Peoplefluent UX ad UI are combined into one role so I was responsible for bringing the lo-fi elements up to hi-fi presentation. Using the UX group's global UI style guide as a launching point, I begine to structure the software to a more modern experience.

One of the additions I made to the design at this point came out of the focus group testing, specifically with the group that was unfamiliar with WCAD software. I decided to add additional text indications detailing next steps to help define expectations. These text indications would also link off to definitions defining the requirements in order to complete those steps. A quicker way to access the Help menu to help guide the user. I saw this as not only a benefit for the new user but one that would also assist a past user as WCAD software is not typically used on a daily basis.



Feeder Editor Sketch
INITIAL FEEDER EDITOR SKETCH
This was the initial sketch for the Feeder Editor step that I developed with the product managers.
Feeder Editor Hi-Fi Mockup
FEEDER EDITOR HI-FI MOCKUP
We tried to move away from the previous Excel spreadsheet style and move towards a more card centric approach for the content. Shown here is a pencil sketch for the Feeder Editor section.


Original Software Dashboard
PREVIOUS PLAN SELECTION DASHBOARD
This was the original plan selection page for AA Planner. Much of this content was removed or moved in favor of a more condensed card style design that highlighted the most specific aspects of the plans. Condensed cards also allowed to view the specifics for more than one plan at a time.
Plan Selection Dashboard
PLAN SELECTION DASHBOARD MOCKUP
This is the main dashboard page. From here the user can select the report they would like to review and work on. Completed or past plans are shown in green while active or incomplete plans are indicated by the yellow color and incomplete circle icon.


New Plan Creation
NEW PLAN CREATION
The controls for defining a new plan were moved from the main dashboard into this step to minimize the dashboard card content and to make the controls easier and more accessible.
Global UI Code Specifications
CODE SPECIFICATIONS
As an aid to developers the UX group's online global UI style guide includes code specifications that are to be used across the product suite.
REFLECTIONS
Overall this was one of the more enjoyable projects I've worked on at Peoplefluent. Most of the work we do is more iterative and being able to bring a full project through research, development, testing and eventually building it out is very satisfying. The most challenging aspect on this project was the distribution of the team and the inevitable comunication issues that arose from not sitting in the same area. It's a constant battle.However, most of the project teams I work with at Peoplefluent are not co-located so it's a challenge I've learned to work with. Detailed requirement definitions and design specifications saved a lot of time and headache and I'm glad I spent the setup time to make sure those processes were in place early.

Contact


40 Oakland Street
Newburyport, MA 01950

byron@bluemandible.com

+1 617 510 6554