A tool that makes community development more impactful.

The Community Development Tool (CDT) was created to make reporting information about communities and government programs more accurate and less labour intensive. I designed the tool while working for the Ministry of Labour, Training and Skills Development within the Government of Ontario.

My role: UX Design, Product Design

Tools: Adobe XD

Timeline: May – December 2020 (8 months)

Status: Launched internally for Eastern Ontario

*All information presented within the prototype images has been falsified to preserve privacy

CDT hero.jpg
 

Context + Client

My team focused on providing the resources necessary to identify and act upon investment opportunities that positively impact clients, employers, and communities within Ontario.

We aimed to consolidate relevant information about investment opportunities, programs, communities, and gaps in investment portfolios.

We continuously addressed two questions:

  1. What impact are our investments making in the communities we serve?

  2. What opportunities exist to make an even greater impact in the communities we serve?

 

Business Value

This project reduces the amount of time staff spend on administrative and reporting tasks by a significant margin. It has the potential to increase their productivity measurably. It will also address concerns outlined in the auditor general’s report with regards to tracking the success of various programs within the Ontario government.

 

The Process

Step 1: Understand

I began by learning about the problem and the users. I had an informal interview with everyone on the team to gain perspective around what we were building and why. The answers were ambiguous, but became more clear over the following months. One of the biggest challenges I faced was finding clear and concise information to support my work.

What is the problem?

  1. Finding information about ongoing programs and new investment opportunities is messy and time-consuming. The information is often inconsistent and it’s spread out across multiple offices in multiple formats. It’s difficult to report information back for specific requests.

  2. It’s difficult to see relationships between investment opportunities, communities, stakeholders, and sectors. It’s hard to know who will be in need even though there is enough data to make predictions and take proactive steps.

Who are the end-users? What are their needs?

The CDT is used by both front line government workers and management to search for relevant information, measure success, and report on the impact of the division’s investments.

 

Step 2: Define

After I felt I had a good understanding of the project, I sought to define the following things:

What are everyone’s roles? How does hand-off work?

The team, including me, had many responsibilities and wasn’t only dedicated to building the CDT. There were 7 of us, but the vast majority of the work on the CDT was shared between myself and one developer. The tool was built in Power Apps and hand-off was done continuously through Adobe XD as content was completed. At my request, we started using Scrum and a Trello board soon after I joined. 


What is the timeline?

Flexible dates with deadlines every few weeks for demos, and 1-2 week sprints

What is the scope?

We were committed to solving Problem 1 within my contract. Problem 2 would involve a bigger team and relies on Problem 1 to be solved first.


What are the foreseen challenges? 

  1. Product adoption

  2. Developer is learning Power Apps as he builds 

What are the core features? 

  • Ability to add and edit projects in detail 

  • Looking up information about projects 

What are the secondary features?

  • Reviewing community profiles

  • Looking up contacts

  • Referencing codes and sector information

 

Step 3: Ideate

I took an in depth look at Asana and Trello, two project organization tools that I have enjoyed using in the past. I also researched table design, looked at concept projects on Dribbble, and found a New York community profiles site for inspiration. I took notes and started playing around in Adobe XD with some preliminary ideas.

I chose Open Sans and the colour palette. I also created design components that I used throughout the prototype. This is when the name “Community Development Tool” aka “The CDT” started to take hold.

colour and type.jpg
 

Steps 4-5: Prototype + Test

The prototyping phase was highly iterative and went hand in hand with the testing. I would prototype one flow at a time in XD and then it would be built in Power Apps right away and go live for the team to test. We had constant feedback about bugs, visual changes, and functional changes that needed to be made.

I worked closely with the developer and periodically interviewed everyone on the team individually for more structured usability testing sessions, and to make sure that opinions weren’t lost during meetings.

We also built a feedback page with an upvoting system directly into the tool so that people could leave feedback about bugs or desired changes.

feedback.jpg

One of the changes that was developed though testing was an expanded project view from the all projects list view. Users wanted a concise way to view a lot of key information about projects, including a short description, without clicking into a project. Here’s what the new view looks like:

expandable project view.jpg

Another major change was the page for adding a new project. The original way to add a project was all on one page, like below:

old add project.jpg

I had taken inspiration from Asana’s inline editing and attempted to blend it with a familiar feel of internal government software. The result was visually overwhelming at first glance, and users spent several seconds before beginning to add project information.

I revised the layout, paying much more attention to hierarchy. I created a default quick add/edit view that only had the essential and most commonly used fields, and an advanced view that had the rest of the fields. This version was visually easier for users to comprehend and they started typing immediately after opening the page.

Here is the new layout:

Add Project small bg.jpg

There were many other changes, pivots, and additions made throughout the process.

 
 

Results

The tool is live and active across the Eastern Region of Ontario, with efforts to expand licence access across the province.

Here are the problems we set out to solve initially:

  1. Finding information about ongoing programs and new investment opportunities is messy and time-consuming. The information is often inconsistent and it’s spread out across multiple offices in multiple formats. It’s difficult to report information back for specific requests.

  2. It’s difficult to see relationships between investment opportunities, communities, stakeholders, and sectors. It’s hard to know who will be in need even though there is enough data to make predictions and take proactive steps.

When I left the team the first problem had been solved. All program information is consolidated in one place. The CDT can be used to filter and search projects, add and edit projects, reference codes, view community profiles, and export limited reports. 

The second problem still has yet to be solved, but there is lots of potential within the CDT and is currently being worked on by a data analyst team. 

Here are some more pages from the finished project:

Projects list view

Projects list view

Project drafts view

Project drafts view

Project finance page

Project finance page

Community profile page for employment in Ottawa

Community profile page for employment in Ottawa

Library page for files related to Ottawa

Library page for files related to Ottawa

 

Challenges

The biggest challenge of this project was dealing with long information. Many titles and descriptions were too long, and amounts of fields were excessive. On top of this, the content was littered with jargon, repetition, and inconsistent formatting.

I had to constantly think about how long content would translate into my designs - by leaving extra space, grouping content in different ways, or displaying more content on hover. I also came up with ways to cut down on long content, improve consistency, and decrease jargon. I used dropdowns instead of text boxes, reduced the size of text boxes, used character limits for titles, and prompted plain language.

Here are some examples:

Hovering over a project title displays its full content

Hovering over a project title displays its full content

Hovering over a question mark icon displays information amount the options within the dropdown

Hovering over a question mark icon displays information amount the options within the dropdown

Adding a prompt and example about clear and concise writing helped improve quality of user generated information

Adding a prompt and example about clear and concise writing helped improve quality of user generated information

Another big challenge was due to licence restrictions, only our team of 7 had access to use the CDT. This limited the testing pool and made it harder to gain perspective from users who weren’t on our team. We had the opportunity to present demos to other teams and receive feedback, but the quality and depth of feedback was not as high as individual usability testing sessions.

 

Final Thoughts

Throughout working on the CDT, our team continuously received positive feedback and interest in expanding its benefits across the entire province. There are efforts in place to expand the licence restrictions and open use of the CDT province-wide. Our small team (CDOC) has received two awards for innovation and enthusiasm related directly to the CDT.

The CDOC Team is being Recognized for their Innovation!

CDOC continues to look for opportunities to innovate and add value, with the objective of promoting a consistent, proactive and strategic approach to community development in the region.

[…]

The community development tool, the community profiles and the consolidation of relevant information is the reason that this initiative is possible.

Thank you for your continued enthusiasm and willingness to identify opportunities to improve our region.

Congratulations and thank you for the great work.

– Management

I’m excited for the evolution of the CDT and hope that it continues to grow since I’ve left the project. It was both challenging and fulfilling to work on this project. It was great to see the direct impact and all the time that will be saved as a result of the CDT.