Problem & Background

FASSB is a key government branch that is leading Employment Ontario’s digital transformation by developing user-centered solutions while supporting the delivery of programs and services.

The problem that we were given by our managers was that branch employees don’t have a centralized location where they can access their resources, documents, or check general branch information. This is an issue common in government institutions as there is an abundance of resources, however due to the lack of a concrete information architecture, many documents get duplicated in different locations and can be difficult to access.

The past co-op student team determined an internal website could act as the jumping off point for branch employees to retrieve information and resources. Additionally, by using a CMS (Content Management System) it could give employees the ability to easily keep content and links up-to-date while maintaining version control. The previous team left us with user research findings, a collection of content and a first rendition of the website.

Goals & Project Schedule

With taking over such a large project from the previous team there were a lot of backlog items we had to address, followed by the bulk of the project and documenting/training staff. This was kept inline with our overall business goal by creating a sprint plan where we would scrum twice a week.

My Role

I co-led the user experience design, web design and development of the FASSB website until the end of my term in August. I collaborated with multiple team leads and business coordinators along with making connections to other staff to research, scope, plan and execute.

Some of my main tasks were:

Building project vision
Refining scope and project direction
Research and handling feedback
Design execution and accessibility validation
Development of product back-end

Core team:

Jessica Smith and Ronald Badilla as initial Team Lead/project Manager, Maureen Huxter and Deirdre Corbett as final Team Lead/Project Manager, Emilia Lilek as UX and Web Designer.

Previous Design

The previous designs handed off to us by the last co-op students were a great starting point, however there were design inconsistencies and backend issues that needed to be addressed.

Defining the Problem

Before we began making any changes to the website, we wanted to make sure we had a really good understanding of the problem and decided to identify some key pieces of information from the past co-op student’s research findings. Using the previous teams data we were able to create a new HMW statement, sitemap and identify the most desired user needs.

HMW Statement

“How might we turn the current FASSB website into a centralized location for employees where they can find information, resources, and answers in an efficient and user-friendly manner?”

User Needs

A centralized location to find files they need that is organized in a way in a logical way
A high level summary of each unit including key projects, overall direction and activity
Easy access to quick tips, answers to common questions and guides staff usually require

Open card sorting results to layout the navigation of the site.

Sitemap refinements structured from our findings.

Card sorting activity showing the number of times each feature was desired by a user.

Re-design and Testing

After getting a good idea of the problem space this project is trying to tackle, we began producing some wireframes along with low fidelity mockups to test in our reoccurring focus groups.

During these focus groups, I was able to observe how participants interacted with the prototype and got positive feedback on our decision to modernize using increased whitespace, font overhauls and more intuitive iconography. We then designed our first high fidelity mockup based on our feedback.

Wire-framing.

First draft of high-fidelity designs.

Further Research and Gathering Content

The next big step before developing the finished website was gathering content and links for the 'Resources' page. This page is one of the site’s main functions and it is where employees will be visiting the most, therefore we spent a lot of time making sure we gathered the correct resources that they wanted to see, and the information architecture made sense to them.

We ran a series of focus groups to accomplish this and in these sessions we presented our mockups for feedback, then ran an open card sorting activity to generate content ideas and have users define their own categories.

We noticed a common theme where participants were organizing content by the various Units of the branch, and then into subcategories such as guides, templates, portals etc... So naturally, we went with creating an info architecture around the Units and created differing subcategories in which were identified.

Card sorting activity among staff.

Revamped style guide.

Development

The larger part of the project revolved around the development phase as we decided to redevelop the entire site from scratch utilizing Webflow to build the structure of the site, then exporting this code and building it into a custom WordPress theme. This gave us a lot more customizability and at the same time tackled major issues in responsiveness and compatibility.

I took a lead role on this front as I had the most experience in web development on my team. During this phase I had to learn how to utilize Wordpress on an offline server, create a custom theme using PHP and hand-code the site on a very restricted time-line.

Final Testing and Handover

Once the website was finally developed and we were closing in on our launch date, we reached out to 12 other employees and asked them to use our website on a local environment and provide any feedback they had. In the end we received mostly positive responses and incorporated the feedback into the final product just before launch. Running this testing period not only gave us insight into some of the paint-points real users have that we might have overlooked, but also identified any bugs or incompatibilities that we could fix to create a truly polished product.

This left us with one final week to organize and document everything we’ve done as well as create walkthroughs/tutorials for the next co-op students.

Results and Takeaways

After going live with the website, Emily and I were able to track its use with Google Analytics and we noticed it began gaining significant traction over the previous site. Additionally, I received a lot of positive feedback on the new simplistic and easy to navigate design along with the new file housing feature. The new ability to access company files in such an efficient manner meant that it would save employees a lot more time in their daily work.

As a takeaway, I think that our team should have communicated the projects expectations better and in a way that every member could fully understand. At the beginning of the project, the tasks I was given didn't seem too overwhelming until I started working on the site and I began to feel swamped. I believe this was because I didn't fully realize how much work was expected of me, and on the other hand my team leaders didn't know exactly how much work it would take to make their desired product.

I was able to re-develop the website and learn how to use WordPress at a high level with just enough time to spare, however if we spent more time at the beginning of the project realizing the team's expectations, we could've planned more efficiently and saved time to build the site in an even better manner. If this was the case and we had extra time, I would've liked to spend more time gathering quality company content and running through more usability tests with the employees.