Revolutionizing A Corporate Portal Experience
PROJECT TYPE
UX Design, UI Design, UX Research
DELIVERABLES
Design System, Wireframes, Hi-fi Prototypes
TIMELINE
3 Months
Solution
Redesigning the Portal to Elevate Users
I developed a new interface for both the company's website and portal, using a series of human-centered design research efforts. Usability testing was employed to identify usability challenges and areas for improvement in initial wireframes. These insights informed design iterations, ultimately leading to high-fidelity prototypes that better aligned with the company's user needs.
Problem
Meeting the Evolving Needs of Modern Users
I was engaged on a digital transformation project focused on enhancing the usability and accessibility of a central web portal, used by ~4,700 users for accessing key documents, procedures, support, and tools. The portal, hosted on Citrix, was scheduled for decommissioning in January 2025, thus the company required assistance in redesigning for the new portal software, Drupal. The existing solution lacked meaningful information about the company and its services, creating an opportunity to revamp the site experience.
Process
Information Architecture
Based on requirements detailed by our stakeholders, I created a light information architecture, representing each page and its hierarchical structure within the site.
Concept Development
I collaborated with company stakeholders to develop up to three lo-fi design concepts.
Lo-Fi Prototypes
From these concepts, we decided to move forward with a sticky left-side menu featuring 'Quick Links' to ensure users have consistent, easy access to essential navigation options.
I incorporated stakeholder feedback on the lo-fi concepts and created an interactive wireframe of key page types.
Interactive Wireframe
Usability Testing
I tested the medium-fidelity prototype with real users in English and French to ensure that the website and portal truly meet their needs. I developed a User Test Guide and conducted 8 moderated user test sessions .
User Test Guide Sample Questions
To conduct the testing, we hosted remote 1-on-1 sessions, each 30-45 minutes long. Each session had myself as the facilitator, and an additional note-taker.
System Usability Scale
The System Usability Scale (SUS) is an industry standard tool for measuring usability of a website, application, digital or physical product.
It consists of 10 questions (seen right), each evaluated on a scale of 1 to 5, where 1 is ‘strongly disagree’ and 5 is ‘strongly agree’.
Participants were asked to answer these questions out loud at the end of usability test sessions.
10 SUS Questions
-
I think that I would like to use this system frequently.
-
I found the system unnecessarily complex.
-
I thought the system was easy to use
-
I think that I would need the support of a technical person to be able to use this system.
-
I found the various functions in this system were well integrated
-
I thought there was too much inconsistency in this system.
-
I would imagine that most people would learn to use this system very quickly.
-
I found the system very cumbersome to use.
-
I felt very confident using the system
-
I needed to learn a lot of things before I could get going with this system.
Analysis & Insights
Usability testing findings were analyzed and coded using the grounded theory method in Dovetail.
Key Insights From Research
The findings revealed critical insights into user behavior and expectations, leading to specific recommendations, including:
1. Users needed customizable features tailored to individual roles
2. Some content sections should be streamlined to improve navigation
3. Key features such as notifications chat required better visbility
Iterating the Design
Following usability testing, I created a list of action items that emerged from the analysis process and addressed each one in the design prototypes.
I developed a high-fidelity, clickable prototype in Figma to visualize the final changes.
Final Design
Developer Handoff
Developing A Design System in Figma
The previous design of the company Portal had no formal documentation. As a major part of this digital transformation project, I developed a documentation process in Figma. I set up and documented new styles, guides, and components to craft a design system that was:
-
Sustainable for future teams: A robust foundation for designers to build upon.
-
A single source of truth for developers: Comprehensive documentation ensured clarity and alignment.
-
Adaptable to evolving needs: Allowing for easy updates as user requirements and business objectives change.
I documented every screen in Figma, covering variable component states, breakpoints for all screen sizes, and unique edge cases and behaviors. This effort resulted in a scalable and sustainable design system that empowered both design and development teams.
