May 2025
GTOXperience is an internal platform for consultants at CGI to learn about the IT services offered by the GTO business unit. As part of this project, I designed a dedicated page for the Business Engineering team, ensuring seamless integration with the website's structure and goals.
Note: Due to confidentiality, all content has been substituted with placeholders.
C O M P A N Y :
CGI Inc.
M Y R O L E S :
Interaction Design, Visual Design
T I M E L I N E :
Q1 2025
T O O L S :
Figma, Illustrator
"I don't know what GTO Business Engineering does."
The Business Engineering team reached out to us with a request to add a dedicated page to the GTOXperience website, aiming to help internal employees better understand the team's role, processes, and key reference materials.
The poor contrast and hard-to-read text make the content difficult to navigate and understand for users
The website features an overwhelming number of images, but lacks sufficient product details, making it difficult for users to get the necessary information to make informed purchasing decisions
The complex navigational structure and unconventional layout create confusion and hinder users' ability to find what they need easily
The poor contrast and hard-to-read text make the content difficult to navigate and understand for users
The website features an overwhelming number of images, but lacks sufficient product details, making it difficult for users to get the necessary information to make informed purchasing decisions
The complex navigational structure and unconventional layout create confusion and hinder users' ability to find what they need easily
GTOXperience is an internal platform for consultants at CGI to learn about the IT services offered by the GTO business unit and easily access sales enablement materials.
A one-stop shop for service learning and sales enablement materials.
The poor contrast and hard-to-read text make the content difficult to navigate and understand for users
The website features an overwhelming number of images, but lacks sufficient product details, making it difficult for users to get the necessary information to make informed purchasing decisions
The complex navigational structure and unconventional layout create confusion and hinder users' ability to find what they need easily
The poor contrast and hard-to-read text make the content difficult to navigate and understand for users
The website features an overwhelming number of images, but lacks sufficient product details, making it difficult for users to get the necessary information to make informed purchasing decisions
The complex navigational structure and unconventional layout create confusion and hinder users' ability to find what they need easily
Before starting the design, I identified two key user types who are likely to use the webpage.
This helped ensure the design addressed varying levels of familiarity with the content, guiding new users while maintaining efficiency for experienced ones.
I created an information architecture to show how the content is structured, since the focus of this project was on layout and clarity rather than task-based user journeys.
Leveraging CGI's Design Systems, I built high-fidelity prototypes for internal testing and used the feedback to guide the next round of iterations.
User Group 1:
"As a BE team member, I need fast access to key documents and tools, so I can focus on building solutions efficiently"
Given the time sensitivity of this user group and their familiarity with the content, I ensured quick access to resources by:
1. Adding the Key Reference Info and Useful Tools close to the top of the homepage, allowing downloads with a single click.
2. Compacting the Opportunity Lifecycle for quick access. Users can click on the steps they only need information from.
User Group 2:
“As an internal collaborator with little to no prior knowledge about BE, I need guidance through the available tools and resources to understand how and when to use them.”
Since this user group is less familiar with the content, I ensured that key resources were clearly labeled and accompanied by brief descriptions to guide navigation and understanding.
1. Reference Information and Useful Tools are accessible via a dropdown subpage with descriptions.
2. Expanded Opportunity Lifecycle displays all activities at once for easy comparison across filters.
User Group 2:
“As an internal collaborator, I want to understand what BE does and how I can work with them effectively.”
Based on Usability Testing:
“Is there a way we can include the org chart into the webpage, seeing all positions at once without any clicks?”
To support internal collaborators exploring resources, the Org Chart is presented as a pop-up, keeping the page uncluttered while giving quick access to team structure.
Squad Lead profiles on the BE homepage, with direct links to their Squad Teams, helping users find the right points of contact easily.
Based on Usability Testing:
“When we get to subpages, we can't go back to the previous page unless we click the browser's back button.”
I added breadcrumbs to subpages to give users a clear navigation path and allow them to easily return to previous sections without relying on the browser's back button.
I adapted the layout for mobile by optimizing spacing to ensure comfortable touch interaction.
Primary actions are placed within the thumb zone to enhance reachability and ease of use.
For the Opportunity Lifecycle, which uses hover effects on desktop, I designed a mobile-friendly alternative that accounts for touch-based interaction.
All steps are visible, and users can navigate through them by tapping arrows or using drag gestures.
The poor contrast and hard-to-read text make the content difficult to navigate and understand for users
The website features an overwhelming number of images, but lacks sufficient product details, making it difficult for users to get the necessary information to make informed purchasing decisions
The complex navigational structure and unconventional layout create confusion and hinder users' ability to find what they need easily
The poor contrast and hard-to-read text make the content difficult to navigate and understand for users
The website features an overwhelming number of images, but lacks sufficient product details, making it difficult for users to get the necessary information to make informed purchasing decisions
The complex navigational structure and unconventional layout create confusion and hinder users' ability to find what they need easily
.jpg)
