Intranet UX Design: City of Kingston

Intranet Website UX Design

City of Kingston, Ontario, CA

At - A - Glance

The UX project aimed to improve the City of Kingston's KingNet intranet, an internal communication platform for employees. With outdated content, unattractive design, and limited usefulness, it was crucial to reimagine the platform as user-friendly, engaging, and relevant to employees' needs.

MY ROLE

Responsible for user research, visual design, information architecture, prototyping, usability testing and client presentations.

TOOLS

TEAM

Twisha Shah, Amanda Moral, Balraj Singh, Karen Zacarias, Tushar Sharma

TIMELINE

January 2023 - April 2023

(4 months)

So why exactly did it require a revamp?

While the existing intranet design provided access to tools, links, and news, it lacked communication and collaboration functions, engagement mechanisms, and productivity-boosting elements. The revamp aimed to address these shortcomings and ensure widespread access to essential information, effective communication between leaders and teams, and recognition for employee contributions.

The case study focuses on redesign of the "About Us" and "Homepage" pages specifically for frontline workers to enhance their working environment and encourage a culture of diversity and respect.

Previous Homepage

Previous About Us (Corporate) Page

Check out the final product.

View Prototype

Alright, how did we begin?

We divided the project into four phases:

Understanding Intranets & the Users

Competitive Scans
Open Card Sorting
Information Architecture

Content Research & Ideation

Focus Groups
Interviews
Surveys
Affinity Diagram

Feedback Driven Iterations

First prototype
Peer Feedback
Client Feedback
Low Fidelity Prototype

High Fidelity Prototyping

Visual Design
High- Fidelity Prototype
Usability Testing
Next Steps

Phase 1

Understanding Intranets & the Users

We started with open card sorting with the employees
(virtual and unmoderated)

Participants were given 37 cards to categorize and organize using Miro, an online collaboration tool. Additionally we provided them clear instructions to independently conduct the card sorting activity.

Data Analysis & Information Architecture Diagram

We observed a distinct pattern in the card sort categories that enabled us to make decisions while creating the Information Architecture diagram.

Phase 2

Content Research & Ideation

Primary Research: Focus Groups, Interviews & Surveys

The focus group and interview sessions were crucial in providing us with valuable insights how how users perceived the information on the intranet and how it should be ideally.

"People don't visit these pages as they assume it is all about past, and not the future. How can we make them use it more often?"

"I don't know about any of the features other than the ones I use daily. Is there even a tutorial?"

"There is so much good content that keeps coming. But the last it was updated on KingNet was probably 5 years ago!""

"It is really hard to find anything on the intranet. I prefer asking my manager than trying to find information on KingNet."

TMI! So we created Affinity Diagrams

We categorized and organized our findings to determine which key insights belonged where. This enabled us to develop design mandates and establish a content hierarchy.

Affinity Diagram- Homepage (Frontline Workers)

Affinity Diagram- About Us Page (Office Workers)

Phase 3

Feedback- driven Iterations

So we created first draft of wireframes,
& conducted feedback session.

We arranged a feedback session with approximately 30 UX Designer from St. Lawrence College UX Design class.

This enabled us to obtain valuable insights that assisted us in enhancing the wireframes. These mainly were:

UI Design pattern changes.
Changes in layout design and content placement.
Changes in headings and titles to better fit user mental model.

The feedback session was followed by the first iteration to the draft.

Homepage (Frontline Workers)

About Us Page (Office Workers)

Followed by feedback sessions with the clients

Final Iteration & Low-Fidelity Prototype

Homepage (Frontline Workers)

About Us Page (Office Workers)

Phase 4

High- Fidelity Prototype

Visual Design: Iconography, Colour Palette & Fonts

We revised colour scheme for an engaging look and feel. All the colours chosen for the palette were from the City of Kingston Design Guides ensuring highest level of contrast and meeting accessibility standards.

To enhance user experience and minimize cognitive overload, we incorporated additional visuals and a clearer type hierarchy into the iconography. This was done to help guide users' focus towards the main points on the platform and make it easier for them to comprehend the content. To ensure optimal legibility and clarity across all screen types, we adopted typography that adheres to the City of Kingston Guidelines.

Finally, High Fidelity Prototype

Homepage for Frontline Workers

The aim for the homepage was to have all the essential content on the first screen for the users to increse the efficiency of the intranet. Moreover, the objective was to increase communication amongst the employees and create a sence of belonging within the organization.

About Us Page for All Workers

Our goal with the About Us page was to provide a comprehensive resource that employees can turn to for information about the company they work for – City of Kingston, while fostering a sense of connection and advocacy.

Alright, Usability Test.

A usability test with over 7 users concluded an 87% satisfaction rate and 80 SUS score.

We would want to do accessibility test on the final product to ensure the design is inclusive for all users, taking into account diverse user needs and abilities.

Challenges & Learnings

The main challenge was getting people to participate in the primary research. We struggled to obtain sufficient input from frontline workers.

Time constraints were a significant challenge, as the process of recruiting users, conducting feedback sessions, and analyzing feedback was tough to fit into the project timeline.

Through the redesign process, I learned that the needs of stakeholders and users are not always aligned, despite working for the same organization. We had assumed that stakeholders would have a clear understanding of the users' needs, but this was not always the case, and hence as UX designers, we got to stand for good UX!

Twisha Shah