Any good examples of how to show an overview of the status of multiple items moving through a process?

Question

I'm working with a client on the design of a tool runs an analysis on school data and presents the user with reports that help them support their schools This is the process a user goes through:

1. A user uploads data about their school(s).
2. If the data for a school passes a certain data quality limit, they get to see "preliminary reports" (reports that have not been reviewed for accuracy, but if their data checks out, should be as good final reports - basically draft reports). Accompanying these preliminary reports are data quality reports that help users fix the data errors holding them back from meeting the limit. If the data for a school falls below a the limit, that school will not appear in preliminary reports, only in the data quality reports.
3. At this point the user can use the preliminary reports to support their work, or they might spend time fixing data errors, so they can make their reports more usable. In the meantime, the client has staff that review one school at time, adding an additional layer of evaluation/analysis in order to provide final reports.
4. A few weeks later, when the staff has completed their evaluation, the user is notified that their final reports are ready and they can return to the site to use their final reports.

During this process, schools can be in these different sates:

1. Missing Data: If the user hasn't uploaded data for this school
2. Below Data Quality Limit: If the data for this school falls below the limit and therefore does not appear in the preliminary reports
3. Has Preliminary Reports: If the school's data passed the data quality limit and there are preliminary reports available for review
4. Has Final Reports: If the school's data has gone through a staff evaluation and there are final reports ready for review

As a user is looking at their report, it's helpful to know that their schools are in different buckets because some of their schools will either not appear in reports, and some schools appear in some reports but not others.

For this reason, I want to give the user an overview of where their schools fall in this process. Below is my original design.If a user clicks on the blue status bar, they go to a table that has more details about which schools are in each of the buckets.

I'm not really satisfied with this design, so was hoping to get input. I also got the following feedback:

• It needs to be more clear that this is a process
• It should be more clear that the total is separate and that the numbers in the buckets represent schools (I felt like saying school in the title sounds redundant, since the whole thing is referring to schools)
• It might be helpful to call out that missing data and having data below the limit, is a bad thing.

Below are some iterations I considered. Thanks in advance for the help!

Answer 1

There are a few "pipeline" or "sales funnel" management platforms/services that are probably worth looking at regarding their UI and UX.

Pipe Drive - https://www.pipedrive.com/en/features

Salesboard - http://www.salesboard.com/tour/

Pipeliner - http://www.pipelinersales.com/learn-crm/pipeline-management/

While their end goal and content might be different, the way they display what is in the "pipeline" and give overview stats, could be applied to most process management occasions.

I do like the design you have already, perhaps adding colours to highlight the severity of each step (Red, Amber and Green), would help highlight.

Answer 2

I definitely recommend going with colors & possibly also icons for the various stages in your workflow, especially if you're going to refer to these same states/stages in multiple screens on your app.

For example, if you're going to want to list down all the schools along with their respective states, you may want to consider an interface like this one we came up with our social media content management app.

Here, we tried capturing the workflow of a post from Unwritten (U) to Written (W) to Moderated (M) to Scheduled (S) to Approved (A) and finally to Published (P). I know this may seem overkill for you at this stage, but it helps to plan out exactly where you're going to refer to these states/stages in your app, so you can accordingly decide how much real estate it requires, and whether it's an ever-present fixture in your header or somewhere.

Hope this helps. I liked your 5th version, but I think you're going to want to signify the relative positivity/negativity of each state. Do share what you finally came up with if possible :)