UX Analyst / UI Designer
System migration and Design update
Project Summary
Overview
Viva Connection is an intranet platform developed by Suncor Energy, connecting frontline workers to stay up to date with important company news, resources, and other information. Leveraging Microsoft Teams and SharePoint to enhance engagement and collaboration within Suncor Energy's workforce of over 20,000 employees.
Role
UX Analyst / UI Designer
Team
2 Designers, 1 Senior Designer, 1 Product Manager
Timeline
5 Months
Platform
Web
Tools
-
Sharepoint
-
Figma
-
Adobe
-
Creative Suite,
-
Jira,
-
Invision
Sneak Peek
Background
In 2010 Microsoft stopped updates for SharePoint Designer 2010 and in 2015 extended support was discontinued. In 2022 Suncor Energy mandated the decommission of their platform "The Core" which used the SharePoint 2010 version to avoid security vulnerabilities.
As a User Experience Analyst, my task was to "lift and shift" core content and information to Suncor Energy's new intranet platform "Viva Connections", which uses the updated SharePoint Online known as SharePoint Modern.
.png)
This image is a screenshot of The Core, it should be noted the design was outdated and the archetitecture was confusing for userss
Goal
Our goals for the migration were not only to transfer information but also to improve the information architecture, page flow, layouts, and accessibility.
Additionally, engaging with key stakeholders was vital to succeed as I championed the adoption of user-centric design principles throughout the project.
Constraints
-
Time - The project had a strict timeline to be completed within 5 months.
-
Size of organization - Numerous site pages with multiple stakeholders meant there was a large amount of content to analyze.
-
Low UX Maturity - The organization had limited knowledge of best practices beyond the digital teams
-
Design change aversion - Many stakeholders were concerned of changes being made.
The Process
Our Strategy
Our initial step was determining the information architecture of the new platform, which was a big challenge due to the sheer size of pages that required migration (Over 1000 individual pages!).
As a team, we concluded that shifting every page within our timeline was unfeasible. Therefore, we prioritized pages with at least 200 unique visitors over the last year. This allowed us to streamline the process by focusing on pages that were actively being used.
We divided our team to focus on specific sections of the updated platform and identify any dependencies. My focus was on the Upstream and Downstream departments.
Information Architecture
To visualize the complexity and identify page dependencies, I created an information architecture for my departments. This identified future page dependencies and acts as an artifact for stakeholders.
Stakeholder Management
As a UX Analyst, I was responsible for managing stakeholder communication. Communicating on progress, setbacks, and updates on their respective sites.
I continually gathered feedback on designs, revised content to be more accessible and user-friendly, collaborated with site owners and managed site dependencies.
Prototype
While each designer worked on their respective assignments, there were several projects where we all collaborated. One was creating the Global Navigation for Viva Connections.
The goal was to analyze improvements to the user journey from the previous version, ensuring users could navigate the new pages intuitively without encountering too many setbacks.
We prototyped three different styles of navigation.
.png)
Feedback we received from our designs showed that users preferred shorter directories for sites. Breaking down per department as more ideal as long lists were harder to navigate. With this information we created prototypes of versions 2 & 3 for additional testing.
Option 2.
Option 3.
Usability Testing
Gathering internal users to test the navigation menus, our team observed the following:
Our next task was to evaluate how users navigate the updated site during the transitional phase. As new pages were being shifted, old pages were still being accessed by users. We evaluated the current UX navigation and found that the user flow was clunky and frustrating.
To minimize any disruption to the overall user experience a hybrid navigation was created to pilot.
Our testing however indicated that navigating two sites confused and frustrated users.
Instead of providing a simple solution, the problem became more complex and challenging for users.
The Transitional Period
A new decision was made to exclude the idea of a hybrid site, as per our testing this caused more confusion for users. Instead, our team decided to release entire sites instead of pages to avoid confusion.
Visual Design
Visual design was vital to the redesign, to ensure that the Suncor brand was consistent across the updated platform, as a team, I contributed to the creation of a set of brand guidelines and style guides.
Typography
Our team selected Noto Sans as the primary typeface. This modern, clean typeface was chosen for its accessibility and inclusivity, with a wide range of weights that can be used in over 800 languages including Canadian Indigenous languages.
Color Brand
The colour palette was chosen to adhere to Suncor's brand and consistent with guidelines. Palettes are broken down to Neutrals, Greys, and Accents.
Neutrals
Greys
Accents
Accessibility
I prioritized improvements to accessibility by focusing on the contrast between text and background. Using a guide to ensure proper contrast between dark backgrounds and light backgrounds with dark texts, for elements such as icons, logos, and buttons. A few combinations are shown below:
Background: Sky
Font: Slate, Dark grey, Black
Background: Light Grey
Font: Dark grey, Midnight, Black
Background: Midnight
Font: Sky, White, Gold, Clover
Final Design
Before
After
Outcomes
Reflections
Outcome #1
40% increase in productivity
Improving the user flow resulted in accessing information on sites quicker allowing Suncor's users to complete tasks quicker, boosting overall productivity.
Outcome #2
Showcased value of UX
The success of this project demonstrated the value of user-centered design practices to senior management and stakeholders, paving the way for future design-led projects.
What I learned
Learning #1
Accessibility & Inclusion
I have a better appreciation of using plain language in content and the impact that contrast of colours and typography has on accessibility and inclusion.
Learning #2
Working in Ambuguity
Uncertainty can be a tool to our benefit as it allows me to explore ideas that were out of the box that had unexpected results.