As Art Director, I've collaborated with the PM to redesign aspects of the UI/UX and design system for the Help Center. This platform is essential as it connects marketers, developers, and partners to the company's products.
After migrating wireframes and the icon library from Sketch to Figma, we restructured the platform, including the navigation, search page, and overall look and feel. Corporate branding and our internal design system served as the foundation for this project.
Additionally, I was responsible for creating visual content such as infographics, banners for product updates, and icons for new content.
This project included redesigning the navigation, search experience, article layouts and contents filtering components.
Font styles, colours and Icons has been restyled.
Using the internal design system and improving components, we have been also testing the usability for the search and filtering features.
When I began the project, the existing interface had several issues concerning structure, readability, color contrasts, and the use of numerous unrelated color variables not aligned with the design system's Tokens.
Following internal research to identify usability issues, I compiled a report highlighting the excessive number of navigation layers, which contributed to content inaccessibility. Additionally, the absence of a search bar and filter tools rendered the interface difficult to navigate for the three distinct user groups: Marketers, Partners, and Developers.
Furthermore, the color contrasts of the previous design had not been tested against established criteria, and layouts containing data tables exhibited various grouping errors, rendering them unreadable and non-responsive.
While migrating the entire Help Center wireframes from Sketch to Figma, I redesigned it based on internal UX research, bolstered by insights from the PM. Additionally, I conducted a competitor analysis, comparing usability, layout, and navigation.
Drawing from the research findings and key requirements, we revamped the homepage of the Help Center, with a focus on enhancing the search feature and creating specific cards for the three target audiences. We simplified the navigation, eliminating redundant icons that previously cluttered the interface.
Furthermore, I conducted a color study and proposed various color palettes for different target audiences. I then assigned a color Token code to each user category, enabling them to easily identify their department and locate relevant content during searches. Subsequently, I selected color Tokens for the dark version of the platform dedicated to Developers.
Introducing a system of new cards and badges, designed with dedicated target colors, proved to be a game-changer in improving recall and recognition while navigating to find content.
To ensure consistency across each department with its new color code and the corporate brand style, I redesigned all icons that categorize topics in the Help Center.
All icons were designed in Figma/Illustrator, and S/M/L variables were created for the design system.
In addition to redesigning the interface, I was also in charge of designing new visuals and infographics for the new articles that have been published during this year of collaboration.
