The project is protected by a Non-Disclosure Agreement (NDA); visual designs, links to prototypes, or some crucial parts of it may not be permissible to share publicly.
Background
Originating within Canada Industry Solutions (CIS), the CGI Ascent Design System emerged to tackle UI design complexities, driving consistency and efficiency throughout. With seamless integration into the Wealth360 IP product suite, Ascent showcased its prowess in converting intricate UI challenges into unified, elegant solutions.
Vision
Global IP’s foresight recognizes Ascent as the future standard design system for CGI, promising harmonized designs, elevated user experiences, and accelerated product launches.
Challenges
- Convincing stakeholders from different backgrounds.
- Transformation of 22 components and 11 patterns in 6 weeks.
- Aligning with an incomplete brand UI guidelines.
Discovery and Analysis
Several ideation workshops and user interviews have been conducted,
- To prioritize components and patterns for the initial release (15 Components and 4 Patterns).
- Understand brand decisions and rationale.
Design Iterations
Ascent framework was enhanced to align with CGI Brand aligned colours and style in a remarkably short timeframe, while adapting to changes in scope.
The CGI Experience Design System (EDS), developed in close collaboration with UX and front-end development expert partners.
Elements
Components
- Alerts
- Breadcrumbs
- Buttons
- Cards
- Chips
- Data tables
- Drop-down lists
- Expandable panels
- Forms
- Labels & badges
- Lists
- Loading
- Modal dialogs
- Navigation
- Pagination
- Popovers
- Segmented buttons
- Sliders
- Snackbars
- Steppers
- Tabs
- Tooltips
Patterns
- Accordion
- Anchor scroll
- Button group
- Chip autocomplete
- Data table search
- Global search
- Headstone
- Login
Key Findings from User Testing
1. Component Evolution: Corner Style Analysis
Test Overview
- Option A: The design featuring components with with squared edges.
- Option B: The design featuring components with rounded corners.
User Preference & Performance
- 90.62% of participants preferred rounded corners across components
- Modern appeal rating increased by 40% compared to squared design
Key Findings
- 40% of users specifically cited visual aesthetics as their primary justification
- Common feedback themes: Modern Design ("Looks more modern", "Aligned with contemporary design trends"), Visual Appeal ("More pleasing to look at", "Friendlier appearance"), Edge Treatment ("Rounded edges feel less harsh", "Softer, more approachable design").
Design Impact
- Creates a more contemporary appearance
- Softens the overall interface
- Maintains functionality while improving aesthetics
Recommendation
Based on the strong preference (90.62%) for rounded corners, implement consistent corner radius across components.
User Insights
“Option B provides clearer delineation between sections and better functionality” – Test Participant
2. Modal Dialog Improvements
Test Overview
- Option A: Plain design with subtle title
- Option B: Enhanced design with bordered title and clear exit controls
User Preference
- 81.48% (22/27 users) preferred Option B
- 37% specifically cited improved clarity as their main reason
Winning Design Elements
- Bordered header section
- Clear visual hierarchy
- Distinct separation from content
- Prominent close button in top-right
- Intuitive exit pattern
User Insights
“Option B provides clearer delineation between sections and better functionality” – Test Participant
- Clear content structure
- Obvious exit paths
- Visual distinction between elements
Value Proposition
Achieve 33-36%* effort and time reductions
Potential savings across 10+ annual innovation projects and 40+ projects CGI-wide, including transforming existing IP.
Global Wealth IP Data
Measured Efficiencies Using Ascent
Recognitions
Recipient of the CGI Impact Award (Q2 2024) for Intrapreneurship & Sharing, recognizing my leadership in developing a globally accessible design framework and pioneering the GenDesignAI concept. This innovative initiative leverages artificial intelligence to create scalable design solutions, demonstrating the transformative potential of AI integration in enterprise design processes.