Hazem Ahmed

When I joined MindsDB as an interaction designer, there was a real need to redesign the marketing website and create better guidelines for consistent sections across the pages.

Problem & Background

The Mindsdb website was built by the marketing team and random designers. As a result, the website lacked a clear brand identity and design guidelines, leading to inconsistencies in fonts, colors, icon sets, code blocks, and more. It was acceptable because Mindsdb was in the early stages as a business. With the marketing team's help and direction from David, our design lead, my task was to redesign the website and create a brand identity and guidelines.

Process

We began assessing areas for improvement in layouts, colors, typography, scale, and responsiveness. We estimated the amount of work by counting the number of pages that needed updating, which totaled about 35 pages.

but…

Performance Issues: The Elementor Challenge

The website was very slow, taking too many seconds to load simple content. There were no complex or heavy animations—just split sections, images, and text. The primary reason for this sluggish performance was the use of Elementor as a website builder on WordPress, along with multiple addons for CMS, analytics, etc. This made the website too heavy, resulting in slow loading times, and much of the loaded code wasn't even used.

Before starting the website redesign, I had to add and edit some sections using Elementor. This experience revealed why Elementor in 2022 was not the best choice for a complex website. Besides the performance, editing and adding CSS and JS code to elements was very difficult due to the lack of obvious selectors and the need for workarounds.

Another significant issue was the use of large GIFs and videos for animations, which could have been optimized better.

Searching for an Alternative

I proposed these issues and my solution to the stakeholders and marketing team. I got approval to search for alternatives.
I hadn't used a website builder in a few years before joining, so I started searching for a better one. The new builder needed to provide everything done previously on the current builder (Elementor), be more scalable, and have higher speed, which was the main reason. It also needed to offer a better way to customize the design.

After searching and comparing website builders' features, Webflow was the best choice. It provides a better user experience, a high level of customization, built-in SEO optimization, and fast loading times.

Webflow's interface was very easy and built for people who already have knowledge of HTML and CSS, so it was easy for me to explore, learn the basics, and build simple pages even without courses or tutorials.

So the tasks now are:

Refine the visual identity of the MindsDB website.
Migrate and redesign more than 35 pages to Webflow.
Migrate ~160 blog posts, newsroom articles, webinars, events, and forms. [I thought it was going to be easy 🥲]

Designing and Refining the Website

At MindsDB, as an open-source project, we design for developers and companies needing to use AI and ML in their data and applications without the hassle of DevOps for connecting data, training models, deploying models, etc.

Pain Points:

Lack of Clear Value Proposition
Overwhelming Information Density.
Inconsistent Branding.

Opportunities:

Clearly communicate MindsDB’s unique value and benefits.
Improve Content Structure and Readability.
Showcase Social Proof.

We focused on creating a clear and compelling value proposition that communicates the unique benefits of our solutions. We ensured the visual design aligns with our brand identity using a simple color palette and clean typography. We highlighted our expertise and credibility through client logos, case studies, and testimonials.

We aimed to keep the website and the product as harmonized as possible, we refined the existing typography scale of the product and added some variants.

For colors, we couldn't stray far from what we have. Our primary color should remain within the green to mint green spectrum. I explored some mint green values and colors, ensuring they comply with WCAG color guidelines. We tested them on current sections to see how they work.

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

We explored different illustration styles to best represent our business. The isometric style stood out, allowing us to clearly showcase all layers of our product: Data, ML models, and Applications.

We also developed and created some basic elements, which serve as foundational building blocks, to help us consistently reproduce illustrations.

Website Iterations and Enhancements

We started by iterating the Hero section on the homepage, focusing on enhancing its visual appeal and user engagement. This involved refining the layout, improving the imagery, and adjusting the call-to-action buttons to ensure they were more prominent and inviting to users.

Showing how MindsDB works highlights our selling point: the number of available database and data source integrations we offer. It emphasizes how easy it is to connect ML models to your database and get results quickly.

Automatically Build and Deploy ML Models

To build our brand's credibility and audience trust, we have added testimonials.

When we extended our business, we had to update the section and add the new use cases.

We just integrated with Shopify, so we had to design a page for it.

Then, we started migrating articles and webinars. It was an intensive task because the rich text plugin we used in WordPress exported text differently compared to Webflow. The Webflow rich text editor in CMS lacked some features, such as tables and nested lists.