A side view of Canada's Parliament Hill from Major Hill's Park.

Office of the Conflict of Interest and Ethics Commissioner

UX Research
UX Design

About the project

The Client

The Office of the Conflict of Interest and Ethics Commissioner (OCIEC) is responsible for helping appointed and elected officials prevent and avoid conflicts between their public duties and private interests. 

The OCIEC website is an important source of information for Canadian Members of the House of Commons, Ministers and Parliamentary Secretaries, Public Office Holders and their staff, in addition to the media and the general public. 

The Challenge

To redesign a more intuitive and user-friendly website that catered to several user groups. Additionally, the designs had to be easily be developed in Microsoft Sharepoint and adhere to Government of Canada web style guides.

The Team

  • Alasdair (UX & Service Design Lead)
  • Jen (UX Researcher & Designer)
  • Nikhil  (UX Intern)
  • Pamela (UX Intern)

My Role

  • Synthesized the findings of the user and stakeholder interviews 
  • Created medium-fidelity wireframes
  • Converted the wireframes into prototypes for usability testing
  • Usability testing

I. Discover

Heuristic Evaluation

The team conducted an expert review of the current site to determine the site's key strengths and weaknesses. The review covered 7 categories of usability (e.g., navigation, findability, understandability, etc.)

What did we find?

  • Most of the OCIEC website’s navigation, understandability and findability problems stem from poor site structure
  • The poor structure seemed to have resulted from band-aid fixes that were needed because the site was not originally designed for it’s key user groups
  • Content was not written in plain language and was not designed for scannability (i.e., too many hyperlinks)

Comparative Analysis

The team identified 5 similar government websites related to integrity and/or ethical standards in order to identify best practices, ideas and opportunities that can be applied to the redesign of the OCIEC website.

What did we find?

Users are visiting these websites in order to learn more about:

  • Information (rules, guidelines, advisories) related to ethical conduct related to gifts, travel, political/campaign activity, financial disclosure and training
  • Relevant consultative material such as statues, regulatory and law
  • Instruction and guidance for filling and submitting forms based on user types

Primary Usability Concerns:

  • Information hierarchy
  • Visual hierarchy
  • Language (jargon, lengthy text, unclear call to action)
  • Layout
  • Colour contrast
  • Inconsistent look and feel

Recommendations

Areas of improvement were identified on the home page, site structure, content, and public registry.

User and Stakeholder Interviews

The team conducted interviews with end-users and stakeholders. I synthesized the notes that were collected from these interviews into a concise report that was delivered to the client. The report identified the following:

  • Primary users of the OCIEC's website
  • Users' needs
  • Users' goals
  • What do they expect to be able to do and find when using the website?
  • What questions are they trying to find answers to?
  • What problems are they currently experiencing with respect to the OCIEC?
  • What’s working well with the website?
  • What’s not working well with the website?
  • What understanding do they have of the OCIEC and the legislation administered by the Commissioner?

What did we find?

  • It's hard to find user-specific info
  • Cannot interpret rules because of lack of context
  • All users have questions about client responsibilities
  • Poor site organization
  • Information is buried several layers deep
  • Site is too text heavy, full of jargon and not scannable
  • “SEO is awful."

II. Design

A preview of a spreadsheet displaying the improved information architecture.
Improved information architecture

Wireframes

The team created 14 low-fidelity wireframes, using the new IA, that adhered to the Microsoft Sharepoint template and Government of Canada styles guides provided by the client.

Using the program, Figma, I converted the low-fidelity wireframes into medium fidelity wireframes. After client feedback, there was one iteration of the designs.

A wireframe of a new website design drawn on paper.
Low-fidelity wireframe of the home page

Prototype

I used Figma's prototyping tool to create interactive flows that would simulate how a user may interact with design. The prototype was used during usability testing.

Prototype for the OCIEC website redesign

Information Architecture (IA)

The team developed an new IA, informed by the research, that would better serve the tasks and goals of both end-users and stakeholders.

III. Validation

Usability Testing

In order to validate the designs, the team conducted remote and moderated usability testing with 7 participants via Zoom. Participants were staff members of Members of the House of Commons and the general public.

I completed 2 usability testing sessions.

Findings

We found that participants were generally successful at completing the tasks. However, some of the labels in the primary navigation, although suggested by the client, did not meet the users' expectations.

Next Steps

As a result, I iterated upon the previous designs to incorporate the findings of the usability testing sessions. The IA was also updated to reflect the changes.

IV. Delivery

Hand-off

The medium-fidelity wireframes were handed off to a third-party design agency for UI design. The approved design was developed by the internal developers of the OCIEC.

What did I learn?

As this was one of my first ever completed UX project, I learned a lot of the skills by diving in head first. I also learned how to iterate on designs based on user research as well as feedback from external clients/stakeholders.

My key take-aways

  • The steps necessary to follow an end-to-end design process 
  • You don't have to re-invent the wheel to have a good design that caters to the users
  • Don't be afraid to seek guidance and ask for feedback from mentors!
  • Conduct a practice run before any usability testing in order to build comfort and confidence with the interview guide

I. Discovery

Heuristic Evaluation

The team conducted an expert review of the current site to determine the site's key strengths and weaknesses. The review covered 7 categories of usability (e.g., navigation, findability, understandability, etc.)

What did we find?

  • The terminology is too technical and not likely to match the users’ expectations.
  • It takes several clicks to accomplish the main task (i.e., file a complaint)
  • The site is not intuitive for a first time user (i.e., federal government worker, inter-provincial truck driver). It takes a lot of trial and error to get to the desired page.

Comparative Analysis

The team identified 7 similar related approaches of other organizations to learn how other solutions solve users’ problems, especially workers who are in the vulnerable sector.

What did we find?

  • The process to file a complaint (i.e., the main task) should be clearly defined in simple steps
  • Content should be at a reading level of grade 8 or below
  • Task-oriented primary navigation works well
Preview of a Microsoft Power Point slide. On the slide, there is a screenshot of Civil Resolution Tribunal BC's website. There are arrows and text pointing out the strengths of the design.
Example of a slide in the comparative analysis 

User Interviews

In order to better understand the needs of workers in federally regulated industries, the team conducted 40 interviews with organizations as well as individuals who self-identified as having experienced either labour relations, health and safety, and minimal labour standards issues.  The interviews addressed the following questions:

  • Who are the most vulnerable workers in the federal jurisdiction industries?
  • How can the client's program better reach them?
  • What are the challenges and barriers for vulnerable workers in the course of their employment journey (from before they start a job to after they leave a job)?
  • How might the client's program better support vulnerable workers in resolving occupational health and safety (OHS), labour standard or industrial relations issues?
  • How might the client's program increase vulnerable workers’ engagement in OHS culture and practices?

All participants were interviewed remotely via telephone or online teleconference using WebEx.

Due to the sensitive nature of the subject, I did not interview the participants myself. However, I was able to listen to each interview and identify some preliminary patterns in the findings. It was also my responsibility to ensure these interviews were transcribed for the client.

II. Ideation

The team held a meeting to discuss the preliminary findings and the report structure. 

Brainstorming

During this meeting, we were able to redefine the scope of our problem (as it was larger than initially proposed by the client), discuss the main findings, and propose possible solutions. 


Evil 8's

Similar to the design activity, Crazy 8's, we completed Evil 8s's to help us brainstorm possible solutions. The purpose of the activity was to encourage the team to push the boundaries of their thinking by proposing anti-solutions to the problem. Each team member would write their anti-solution on the first square and passed the paper onto the next person. As the paper was passed along, the anti-solutions were expanded upon. 

Afterwards, we used the anti-solutions to help us to propose innovative and creative solutions to the problem.

A white board against an orange wall. There are solutions and diagrams written all over the white board.
Brainstorming of possible solutions

III. Delivery

Hand-off

The medium-fidelity wireframes were handed off to a third-party design agency for UI design. The approved design was developed by the internal developers of the OCIEC.

What did I learn?

As this was one of my first ever completed UX project, I learned a lot of the skills by diving in head first. I also learned how to iterate on designs based on user research as well as feedback from external clients/stakeholders.

My key take-aways

  • The steps necessary to follow an end-to-end design process 
  • You don't have to re-invent the wheel to have a good design that caters to the users
  • Don't be afraid to seek guidance and ask for feedback from mentors!
  • Conduct a practice run before any usability testing in order to build comfort and confidence with the interview guide

I. Identity

Musical Direction

Before production on the single could begin, the team needed to determine the musical direction for the single (as well as Cerae's future songs).

Drawing inspiration from Cerae's musical influences (e.g., Lauryn Hill, Mariah Carey, the Bee Gees, the Winans, Michael Jackson, Jacob Collier), the team decided that a sound that could easily cross boundaries between the genres of R&B, neo soul, gospel and funk would be a good fit. Additionally, the team determined that this musical direction would appeal to the trends within the Toronto music scene while still remaining niche.

Artist Image

Based on the proposed musical direction, I curated 4 mood boards to demonstrate different artist images that Cerae could potentially emulate . Each artist image drew inspiration from current and past trends within the music industry. The purpose of selecting an artist image from the curated mood boards was merely to act as a point of reference, which would be further developed into a unique image, personalized to Cerae.

Each mood board contained the following:

  • Album cover art
  • Photoshoot and music video concepts
  • Colour palettes
  • Fonts
  • Outfits
  • Hairstyles

The musical direction and artist image initially established by the team acted as a guide for all future creative decisions.

A preview of 4 mood boards. The moods boards are entitled "90s Baby", "Retro Art H**", "Girl Next Door" and "Hypebae"
Mood boards for Cerae's potential artist image

II. Ideation

Once the writers had completed the lyrics, it was my responsibility to translate the sentiments of those lyrics into a visual narrative (which would be used for the promotion of the single). I worked concurrently with the production of the track. Thus, both the visuals and the music reciprocally influenced one another.

Finding Inspiration

I was sent a rough demo of the song to work with. My first goal was to establish a colour palette for the visuals, which would set the scene for the overcharging feel/mood. I asked myself and the team to think about what colour they envisioned when they listened to the demo. With the input from the team, I laid out a colour palette that also aligned with the proposed release date of the single (end of Summer/Fall).

The team looked to music videos and album covers of artists within the same genres as Cerae for inspiration. A preliminary mood board was created.

Eureka!

I stumbled upon the music video for Meet Me in Amsterdam by RINI. In the opening scene of the music video, RINI sings "Row this boat from dusk till dawn" while enacting the very lyrics he sings in the video. The literal nature of the lyrics gave me an idea. I immediately thought of Cerae's lyric, "Loving with you, a 9 to 5 of constant disputes." It was this specific lyric that inspired the concept of the workplace theme found throughout the promotional materials. The action of punching in and out of work on a punch clock (a prominent theme in many of the promotional materials) was used as a metaphor for the cyclical nature of turbulent relationships that is described in the song.

Curating a Mood Board

The vision for the shoot was heavily influenced by 70s fashion and mid century modern interior design. In order to appeal to a younger demographic, the team decided to take a modern twist on the era.

A preview of two colour palettes. The first palette contains the colours burgundy, peach, brown and 2 shades of dark green. The second palette contains the colours peach, yellow-orange, pink and red.
Colour palettes for the promotional materials
A preview of a pinterest board. There are many photos of 70s fashion and mid century modern interior design.
Preview of mood board

III. Plan

The team scouted a location and procured props and wardrobe for the shoot. A photographer/videographer was hired for the shoot. He assisted in blocking out scenes. In addition, a hairstylist and an actor (to play the love interest in the lyric video) were brought onto the team.

Hair, Makeup & Styling

In addition to the action of punching in and out of work on a punch clock, we wanted to further simulate the passing of time through changes in outfit, hair and makeup.

In total, the team styled 16 outfits, 4 hairstyles and 4 makeup looks for Cerae. Additionally, we styled 3 outfits for the actor in the role of the love interest.

Critical Path

The team had only 8 hours to complete the entire shoot on location. Due to the sheer volume of wardrobe changes, a detailed schedule, called the Critical Path, was set in place. The purpose of the Critical Path was to ensure that all preparations, shots, and clean up could be achieved within the 8 hour window.

A preview of the detailed schedule prepared for the shoot date.
Snapshot of the Critical Path

IV. Execute

Shoot Day

Up until the day of the shoot, all planning had been conducted virtually. On the day of the shoot, I collaborated with our photographer/videographer in providing artistic direction. The team was successful at capturing all the necessary shots within the 8 hours on location. 

Editing

The team edited the following promotional materials using Adobe Photoshop and Lightroom:

  • Single cover art
  • Instagram single teasers (via feed)
  • Instagram ads (via feed and stories)
  • Promotional photos

I supervised all editing to ensure that all materials were aligned and consistent with the artistic vision. Additionally, I edited the lyric video for the single using Adobe Premiere Pro.

Marketing Strategy

While the production of the song entered its final stages, the team developed a multi-channeled marketing strategy that included the following:

  • Instagram ads
  • Influencer marketing (via Tik Tok)
  • Playlist placement submission (via Spotify, SubmitHub, RnB Radar)
  • Lyric channel submission
  • Word-of-mouth marketing
  • Leveraged existing connections within the music industry

Lyric video for Clocks (Loving With You)

V. Delivery

Cerae looking back over her shoulder while she punches in a card into a vintage punch clock. She is wearing a green jacket, black conductor hat and a brown skirt. There is yellow text over the image which lists the members of the production team and their roles.An orange chaise against a white wall and hard wood floor. There is yellow text over the image which lists the members of the production team and their roles.

Hand-off

Clocks (Loving With You) was released on November 12, 2020. It is available on all platforms. Since its release, the single has had several notable accomplishments (last updated in January 2021):

  • 9.8K streams on Spotify
  • 1.6 K views on the lyric video (via Youtube)
  • Youngest artist to place at #1 song on RnB Radar's 'On Our Radar' playlist from the week of November 20 - 27, 2020
  • Featured on the Dope Lyrics YouTube channel (12.1M subscribers)

What did I learn?

As this was one of my first ever completed UX project, I learned a lot of the skills by diving in head first. I also learned how to iterate on designs based on user research as well as feedback from external clients/stakeholders.

My key take-aways

  • The steps necessary to follow an end-to-end design process 
  • You don't have to re-invent the wheel to have a good design that caters to the users
  • Don't be afraid to seek guidance and ask for feedback from mentors!
  • Conduct a practice run before any usability testing in order to build comfort and confidence with the interview guide