Revolutionizing A Corporate Portal Experience
PROJECT TYPE
UX Design, UI Design, UX Research
ROLE
UX Designer
DELIVERABLES
Wireframes, Hi-fi Prototypes, Design System
TIMELINE
3 Months
Problem
Meeting the Evolving Needs of Modern Users
When a major organization needed to migrate a mission-critical portal off a legacy system, I was brought in to lead the creation of an entirely new platform. The challenge was to create a modern, role-adaptable interface that serves thousands of users across English and French, while ensuring continuity, accessibility, and scalability from day one. With no formal documentation or design system in place, I stepped in and laid the foundation for a lasting UX transformation.
Solution
Creating a Portal to Elevate Users
I led the end-to-end design for both the company's website and portal as the organization moved toward a new backend system (Drupal), grounded in human-centered research and tested iteratively with real users. From stakeholder workshops to bilingual usability testing, I used insight-driven design to inform a future-proof interface that could grow with user needs and support self-service, findability, and role-specific customization.
Process
1. Information Architecture
Based on requirements detailed by our stakeholders, I created a light information architecture, translating stakeholder requirements into a clear site hierarchy.
Why: A lean IA helped ensure we weren’t just designing pages, but workflows. By understanding which documents, tools, or links mattered most to different users, I was able to organize content around real priorities instead of legacy assumptions.
2. Concept Development
I collaborated with company stakeholders to develop up to three lo-fi design concepts.
3. Lo-Fi Prototypes
Impact: Presenting multiple options early gave stakeholders a language to discuss structure and usability before committing to any visual polish. 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
4. 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. This allowed us to quantify satisfaction and benchmark design quality over time.
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
5. 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.
Every design decision in this phase was linked to a research insight. This created a clear narrative from problem to prototype, and it gave stakeholders confidence that each change had user backing.
I developed a high-fidelity, clickable prototype in Figma to visualize the final changes.
6. Final Design
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.
Outcomes & Reflections
Key Outcomes
-
Transformed a legacy portal into a modern, user-centered experience for ~4,700 employees by leading a full redesign grounded in research.
-
Reduced task friction and improved navigation clarity by transforming the site structure and surfacing high-priority content through role-aware customization.
-
Future-proofed the portal for long-term sustainability with a documented design system in Figma, empowering future teams to evolve the experience with clarity and consistency.
What I'd do Next Time
-
Push for strategic alignment on KPIs. While the redesign was considered successful by management, we lacked a shared framework for measuring long-term success.
-
Dig deeper into platform constraints earlier. I learned mid-project that Drupal’s component architecture differs significantly from what I designed for, particularly how components are nested, styled, and reused. These limitations only surfaced during design QA. In future projects, I’d initiate technical feasibility reviews earlier and co-create components with developers to ensure smoother handoff and fewer surprises.
