Designing a new way for global members to access critical information online
Year: 2022 - 2023
Client: CGI
Role: Lead/Senior Product Designer
Services: Product Design, UX Strategy, UI Design
-
CGI is among the largest IT and business consulting services firms in the world.
They wanted to create a robust, user-friendly platform for effectively managing and delivering content.
-
There are various authors who need to create and edit content using a WYSIWYG editor.
The existing platform’s impact on the business was substantial, affecting user experience, content management, and overall brand perception. It had become outdated and no longer aligned with modern user expectations and industry standards.
-
My aim was to lead a team of designers and work with a content team, engineers, to create a seamless and enjoyable user experience and create their design system.
We used Figma to expand on existing brand guidelines and create the visual elements, UI patterns and reusable components to be built into the WYSIWYG (What You See Is What You Get) editor.
Our designs prioritized responsiveness and accessibility across iOS, Android and web.
I helped my team document each component’s usage, behavior, and states. Then we built a style/content guide, and component library.
to modernize and redesign a global consulting and IT company’s website, used by over 91,000 members. The project aimed to revamp the website's styles, components, and content to align with brand guidelines and accessability standards, enhancing design consistency, reinforcing brand identity, and delivering a seamless user experience. This was a significant undertaking considering the site's extensive 1800 pages of content.
Process
We started by defining the design principles and compiling elements that were already defined by CGI’s brand guide, like the color palette, typography, icons and imagery. Then, we worked on the layout and grid system. In Figma, we specified the column widths, margins, padding, and spacing guidelines across our 3 breakpoints for mobile, tablet and desktop.
Next, we started building the library of UI components such as buttons, banners, navigation menus and cards, and documenting commonly used UI patterns. We included specifications for how each component should be implemented, ensuring consistency, accuracy, and efficiency in the design and development process.
Each component was described along with its associated user story (when applicable). This helped organize the document and ensured all stakeholders had a common language and framework to create and maintain a unified visual identity and user interface.
We created the visual design details for each component at all three breakpoints. This included:
Colors: Provided color values for backgrounds, text, borders, and other elements.
Typography: Detailed the fonts, font sizes, line heights, and font weights for text elements.
Spacing: Specified margins, padding, and spacing between elements.
Layout: Explained the component's layout, dimensions, and alignment with other elements.
We described how the component should behave interactively, including:
States: Defined the different states of the component (normal, hover, active, disabled, etc.) and how they should look.
User interactions: Clarified how users should interact with the component (e.g., button clicks, dropdown behavior, form input validation).
We described how the component should adapt to different screen sizes and orientations and we specified responsive behaviors when the component's appearance or behavior should change on various devices. If the UI component had different variations, we outlined the differences and when each variation should be used. Our Figma also provided developers with code for implementing the components.
Throughout the process, I encouraged collaboration among team members, including designers, developers, and product managers, to review the specifications and provide feedback, so we could make necessary revisions. I also ensured that the specifications considered accessibility principles and included guidance on how to make the component accessible. I personally conducted color contrast tests.
Additionally, we built an accompanying document that explains how to use the design system and offers guidance and best practices. Part of the documentation was our style guide (see images below), defining the visual and interactive elements, such as colors, topography, patterns, components, interface elements, and graphics. It served as a reference for designers, developers, and other stakeholders involved in the creation and maintenance of the site.
The design system and style guide we implemented continue to serve as a foundation for ongoing enhancements. I believe the measured improvements in user experience will be significant once they can be measured. Feedback from stakeholders was overwhelmingly positive, reinforcing the success of the project. I learned valuable lessons during this project, particularly the importance of collaboration and the role of a robust design system.
To sum it all up, we managed to create a sleek, updated digital platform that met the client's objectives and positively impacted their business. The value of the establishment of a robust design system cannot be understated. It was a remarkable journey, and I'm proud to have played a pivotal role in transforming the client's digital presence.