AI Toolkit
The story of the AI platform was supposed to offer a fresh point of view, but it ended up causing many problems. As a result, the website had to be completely redesigned to include new branding tactics and accessibility rules.
My role: Lead UX/UI Designer
ENTRY POINT
The website contained nonintuitive patterns, navigational inconsistencies, and inaccessible interactions. Navigation challenges, unclear project status, and a lack of guidance hindered user engagement and reduced tool adoption opportunities.
The website contained outdated branding elements, which led to miscommunication and misleading impressions about project dependencies and connections. The toolkit's credibility and appeal suffered from this inconsistency, leaving visitors without a complete picture.
MAIN PROBLEMS
Accesibility & Usability
The AI Toolkit website suffered from usability and accessibility issues, making it difficult for users to navigate and destroying engagement.
Branding Inconsistency
Inconsistent branding undermined credibility and failed to communicate new project objectives.
Outdated Content
Outdated content obscured project progress, making it difficult for visitors to keep up with the latest developments
Limited engagement
The lack of interactive resources and clear guidance made it difficult for users to understand how to use the tool and what it could do for them.
Research
UNDERSTANDING THE PROBLEM
The platform was long overdue for a redesign, as the site felt disjointed and hastily put together. Users were confused about the tool's purpose, functionality, and adoption path. Despite the project's recent growth and market progress, the site's look and feel suggested that it had been abandoned for years.
So, the challenge was simplifying the content according to branding rules and making it easy to manage. Given the limited human resources available and the distribution of work, I was very aware of the need to minimize the maintenance effort.
Orginal website
Several issues hampered the site's accessibility, including poor color contrast and inconsistent style or narrative. In addition, outdated links, an abandoned logo, and broken widgets made it impossible to engage and get an overview of the current state of development.
Design Concepts
Project Color Scheme
PRIMARY
#2A4CDF
COMPLIMENTARY
#192E87
#EAEDFC
SECONDARY - OASIS
#008A68
#CCE8E1
#F3E9D9D
CAMELS
#BF8A36
Hero Section Sketches
One requirement was to use an abstract form as a central element to emphasize the intangible nature of AI and the processes it supports. I focused on simple geometric shapes to balance minimalism and complexity, ensuring that the design was meaningful and visually effective without being overly detailed.
Final Design
CONCEPT
The project features a flat, minimalist design with abstract shapes at its center, in keeping with the elusive nature of AI. I aimed to create an abstract focal point that would draw attention to the brand colours while ensuring it blends seamlessly into the ultra-minimalist style of the site. This approach highlights the mysterious aspect of AI and maintains a cohesive visual experience throughout the site.
1. Hero Section
2. Overview
3. Consitency
Outcome
Feedback
The results of our efforts were enthusiastically received by our stakeholders, who expressed their satisfaction with the outcome. The positive feedback we received underlines the value of consistency and strategic branding.
By ensuring a consistent and harmonious design, the brand has become stronger and more recognizable in the eyes of our audiences. In addition, the smooth development process, facilitated by the reuse of existing components, contributed to the project's success and was appreciated by our development team. This collaboration between design goals and development time constraints was an essential lesson for me as a designer. I now better understand how to optimize my work and make it easier for others to help me during the implementation phase.