Request / Problem

Cofinity X, a company working closely with top automotive manufacturers such as Mercedes, Volkswagen, BMW, and more approached us with several key challenges regarding their outdated website. The employer's primary concerns were rooted in their desire to improve both the functionality and appearance of the site. The specific problems they faced were:
‍

1. Website Authority and Professional Image: The employer’s current site was described as looking more like a "candy store" than a professional platform for a cutting-edge tech company. They were concerned that it didn't reflect their ability to collaborate with large automotive companies. Their goal was to create a website that would boost their web authority and allow them to confidently present it to partners as a serious, high-level technological player.
2. Simplifying the Complexity of Their Offering: Cofinity X’s system is a complex combination of hardware and software solutions. The employer wanted the website to convey this intricate system in a way that would be easily understandable for potential partners and clients, even those without technical backgrounds. As one of their marketing directors mentioned, the aim was to make it so simple that even his younger sister could understand what the company does by visiting the site.
3. Marketplace Integration for Automotive Solutions: Another key requirement was the inclusion of a marketplace where users, specifically automotive solution providers, could publish their apps and services, making it easier for industry professionals to discover new technologies and innovations.
4. Onboarding Flow for New Members: Cofinity X also wanted to simplify the onboarding process for new partners and members. This required a clear, accessible flow within the website to guide users through registration and onboarding in an efficient and user-friendly manner.

Solution

We initiated the project with a thorough UX research phase, which involved a 1.5-hour interview with the employer to gather detailed information about their business, target audience, and the structure of their system. Alongside this, they provided extensive marketing and research materials, which we used to deepen our understanding of their operations and goals.

Using frameworks like Jobs to Be Done and Persona, we were able to define clear user personas and understand the specific jobs their clients were trying to accomplish. This helped us pinpoint the core challenges their users faced, and develop solutions that would meet those needs.

The project progressed through the following steps:
‍

1. Prototyping and UX Design: After gathering insights from our UX research, we started with the design of prototypes for each page. The primary focus was on ensuring a logical flow of information, making the complex technology easily digestible for non-technical users, while maintaining a professional and authoritative tone. We organized the page blocks to align with the target audience's expectations, focusing on clarity and ease of navigation.

2. UI Design and Brand Modernization: Cofinity X’s branding was somewhat outdated, and after discussions with the employer, we decided to modernize it. We developed mood boards that showcased proposals for typography, color schemes, and stylistic elements. These updates made the brand appear more contemporary and aligned with the image of a reliable, forward-thinking technology company. Once the employer approved the style direction, we began building the full concept of the homepage, followed by iterative feedback and improvements until the design fully met their expectations.

3. Interactive Media Elements: To further enhance user engagement, we created various media assets, including custom Lottie animations, which explained key processes and concepts. We also developed pseudo-3D animations based on Cofinity X’s "X" symbol, which not only enriched the visual experience but also reinforced the brand’s identity. Other animations, like gradient and schematic designs, were integrated to explain technical components clearly.

4. Frontend Development: After finalizing the UI/UX, we chose Webflow for the frontend development due to its speed, flexibility, and built-in CMS features. The platform allowed us to develop a highly responsive and scalable website quickly, with an intuitive interface that the employer could easily update in the future. Webflow’s CMS system also made it easy to manage dynamic data, such as blog posts, team profiles, and partner information.

5. Marketplace and API Integration: One of the most challenging aspects of the project was integrating the employer’s marketplace into the website. This marketplace allows automotive solution providers to publish their offerings, which in turn, are displayed on the site. To achieve this, we developed a custom API that connected the marketplace’s database with Webflow CMS, ensuring that the content (such as app descriptions, images, and creator information) is updated seamlessly and dynamically on the website.

Technology

We utilized a combination of tools and technologies to deliver an efficient and scalable solution:

• Webflow CMS: A fast and flexible system ideal for managing both static and dynamic content. Its intuitive design makes it easy for the employer to make future updates without requiring deep technical expertise.
• Custom API Integration: To integrate the automotive solutions marketplace, we created a microservice that connects the marketplace’s database to the Webflow CMS, enabling real-time updates on the website.
• Lottie and Pseudo-3D Animations: These were used to create engaging visual content that explains complex technical concepts in a user-friendly manner, while also adding a modern and dynamic feel to the site.

Outcome

The completed website successfully addresses all the employer’s objectives:

1. Enhanced Web Authority: The new design presents Cofinity X as a credible and innovative company capable of working with top-tier automotive manufacturers. The website is now a valuable tool that they can confidently share with partners and clients.
2. Clear Communication of Complex Concepts: The user-friendly structure and engaging animations help explain Cofinity X’s complex systems in a way that is easily understandable, even for non-technical users.
3. Marketplace Integration: The integrated marketplace enables users to discover and publish new automotive solutions, fostering greater innovation and collaboration within the industry.
4. Streamlined Onboarding: The new onboarding flow has simplified the process for new members, making it easier for Cofinity X to bring partners on board quickly and efficiently.

We continue to support Cofinity X with technical assistance, including the development of custom landing pages for specific partners and ongoing site maintenance

‍