Hazem Ahmed

When I joined MindsDB in 2022, my initial priority was designing and implementing the marketing page using Elementor. However, after completing just two or three tasks, I recognized the need for improvement and advocated for redesigning the website and transitioning from Elementor to a more suitable platform.

Problems

Inconsistent use of fonts, colors, icon sets, and code blocks, among other design elements.
Elementor lacked the level of customization we required.
Slow website loading speed due to the use of Elementor, WordPress, and excessive GIFs. A 1-second delay in page load time can lead to a 7% reduction in conversions1.
The design was not fully responsive across different devices.

Solution & Opportunities

Establish Consistency : Create a cohesive design system to standardize fonts, colors, and icons for a more unified experience.
Clearly Communicate Value : Highlight MindsDB’s unique value and benefits through clear, engaging design and content, ensuring users immediately understand its purpose and advantages.
Switch to a Flexible Platform : Adopt a platform that allows greater customization and scalability. (Webflow)
Optimize Performance : Minimize resource-heavy elements like GIFs and videos by using lightweight Lottie animations to improve loading speed and enhance user satisfaction and conversions.
Ensure Responsiveness : Design for all devices to provide a seamless experience across desktops, tablets, and mobiles.
Enhance Engagement : Use improved design and faster performance to boost user interaction and satisfaction.

Exploration

We aimed to harmonize the website with the product by refining the product's typography scale and adding subtle variants.

For colors, we maintained the green to mint-green spectrum for consistency. After exploring mint green shades, we ensured they complied with WCAG guidelines and tested them within existing sections.

To represent our business visually, we explored various illustration styles. The isometric style stood out as it effectively showcased our product’s layers: Data, ML models, and Applications.

We began by iterating on the homepage Hero section, enhancing its layout, visuals, and call-to-action buttons to improve user engagement and overall appeal.

Design

We decided to keep the final color palette simple, focusing on a clean and modern aesthetic. This approach was chosen deliberately to avoid distractions.