OVERVIEW

About the project

During my internship with development/design agency Focus21 Inc., I was assigned to work with our client Public Services Health and Safety Association (PSHSA) on all things UX related. This project goal was to create a website that improved on functionality, usability, and performance. The new PSHSA website is expected to launch in Q1 of 2019.

PSHSA is a government agency that provides resources, training, and tools that promote safe and healthy work environments for the public sector. The website includes both free and paid resources, including but not limited to: courses, training materials, informative articles, and consulting.

Role: User experience designer

Client: Public Services Health and Safety Association (PSHSA)

Timeline: 4 months (September to December 2018)

Project Type: Responsive e-commerce website

Tools: Sketch, InVision, Abstract, GitLab, OptimalSort

USER EXPERIENCE / USER INTERFACE DESIGN

From sketches, to mockups, to developer handoff.

Joining in September of 2018, the project was already well under way. Client co-creation meetings had taken place, initial function and designs had been signed off on, user testing and research had been conducted, and development had begun.

Though, not all functions and features had been fully fleshed out. Therefore, I was assigned many different design related tasks to complete before the developers could begin building.

For example, designing the user flow for a scenario previously unaccounted for:

EXAMPLE 1: Reschedule Calendar - Multiple Sessions

Screenshot from design ticket assigned via GitLab.

My process for handling a design challenge typically went like this:

1. Become familiar with existing user flow/UI, a user's goals/needs/wants for particular task, and business requirements.
2. Formulate logical user flow.
3. Sketch UI.
4. Gain teammate designer feedback.
5. Create mockup screens in Sketch, and prototype in InVision.
6. Gain teammate designer feedback.
7. Iterate, and repeat step 6 until design problems are solved.
8. Handoff design to developer, and walk through it with them to ensure full understanding.

Previous Design

Previous design of session selector calendar pop-up modal.

The case where there are multiple sessions available on the same day was previously unaccounted for.

Currently, a user would click to select a date, the Next button would then be enabled, and a confirmation screen would show with the session details.

My Updated Design

First, I made some paper and pencil sketches for solution ideation. Then, went into Sketch for some mockup design. This design handles the cases where there are multiple session on a given date (see 2 session's location/time stacked, or "... + 3 other sessions" cases). Since a date may contain multiple sessions, a two part selection is required. The user flow goes like this:

1. User selects date. Further session detail "cards" are then shown below for user.
2. User selects appropriate session via radio button click. The Next link is then enabled.
3. User clicks Next link to reach the Confirmation step.

Desktop:

Updated design of session selector calendar modal.

The design should work well for both desktop and mobile experiences. And since the mobile screens have less room to work with, the designs may differ in order to optimize the functionality on either platform.

Mobile:

A few considerations when considering how the UI should be displayed on mobile devices:

A mobile screen would not allow fitting session location and times within the calendar. But, it was necessary that we still indicate which dates had sessions available. This can be seen with the red unfilled circle indicators, and the filled red circle indicating date selection.

Also, the selectable sessions contain a lot of information, and therefore a lengthy amount of screen space. We decided to use collapsable elements to contain the information, and only display the most important details by default (location and time).

EXAMPLE 2: Report Download Page

Gitlab ticket for improvement of report download page.

Previous Design

A user is taken to this page after confirming interest in the Health and Safety Trends Report. There are multiple types of this report.  Previously the design lacked the option to choose which report the user is interested in, and lacked personality.

My Updated Design

The user experience is enhanced as the user is now able to choose which report(s) to download, and are also given a visual preview of the report. The illustration also adds some colour and pleasantry to the page, keeping to the brand colour scheme.

Further Examples

During my time at Focus21, I was able to work on many design challenges similar to the above two examples. See below for a handful of the different design tasks assigned and completed by me. Feel free to send a message if you wanted me to go through any of these examples in further detail!

Screenshot of a few Gitlab design tickets completed during my time at Focus21.
WORKFLOW

Documenting user task flows

I was responsible for documenting a few existing features from the existing website that need to be implemented on the new website. To do this, I arranged a few meetings with stakeholders from the client organization. I aimed to get familiar with the processes, and understand the offerings for each feature. I then formulated a viable option for the developers to implement such features.

But, first step was to document these flows in order to transfer an understanding of the features from client to agency. This helped prepare for the planning of upcoming sprints.

USER RESEARCH

Conducting a card sort test for an informed information architecture

One of my goals for this internship was to get some experience in user research. After discovering there were a number of pages that were still to be mapped into the site's information architecture, I considered using an appropriate method to research where these pages would be mapped most appropriately. A user test that would be adequate to reach these findings would be a card sort test. I began researching tools, and planning my pitch to the team. They bought in, and so the next step would be to get the go-ahead from the client, as this research was not in the previous scope of work.

I drafted the proposal document seen below:

Drafted a proposal document and presented it to the client.

Upon gaining buy-in, I began recruiting appropriate participants in the agency's existing network (previous user test participants, website stakeholders), as well as personal contacts in the public health and safety industry.

After reaching out for input from the DesignX community, I was recommended the OptimalSort tool to create and conduct the card sort test. The tool was great, easy to use, and within approved budget.

Carefully crafted card descriptions so as to not influence the participant during the test.
Drag and drop closed card sort test. Categories for site headings were determined earlier in the project.
Incoming results of the completed card sort tests.

The tool offered the quantitative data in a visual format, and also collected qualitative information in the form of short answers for further descriptions of test participants thoughts on their decisions.

This all lead to a well-informed information architecture, with heightened confidence for the mapping of these pages.

AGILE DEVELOPMENT / SCRUM FRAMEWORK

Professional Scrum Master 1 certification

During my time at Focus21, we went through two full days of scrum training in order to sharpen our knowledge on the scrum methodology, and to better implement it in our development processes. Following the training, I challenged the Professional Scrum Master 1 certification test, and passed!

Following the training, we continued the use of scrum and sprints as we designed and developed the PSHSA website. This included sprint planning, daily scrum meetings, sprint review, and sprint retrospectives.

CONCLUSION

My user experience design internship

Coming into this user experience design internship with Focus21, my goal was to not only contribute valuable work to the team, but to learn as much as I could. Through the PSHSA project, I was able to sharpen my existing skills as well as gain a number of new ones that could only be gained through a real work environment. With the utmost support from my work peers, I was able to grow as a designer. Look out for the many great things coming out of the Focus21 camp!

Browse other projects:
Stay on the ball with everything NBA.
(Coming soon!)
A social platform for music.
A redesign of Amazon's checkout flow UI.
A design sprint to redesign Loblaws' self-checkout screen.
← Return home