Sarvam AI

Project Overview

‍

1. Project Summary

The goal was to develop a visually appealing, high-performance website with a CMS-driven content management system, seamless integration of AI-generated audio, and technical functionality that supported Sarvam AI's product launch ahead of a major event.

‍

2. Primary Goals

Launch the Website Before a Key Event: A critical goal was to have the website live and fully functional in time for Sarvam AI’s important product launch event. This required tight timelines, efficient workflows, and ongoing communication to meet the deadline.

‍

3. Secondary Goals

1. Create a Visually Engaging Website

The website needed to effectively showcase Sarvam AI's innovative AI solutions with a focus on aesthetics to engage users and balance content with visuals.

‍

2. Seamless Integration of AI-Generated Audio

The integration of AI-generated audio files was crucial. These files needed to be hosted and played efficiently, without causing performance issues or bandwidth limitations.

‍

3. Embed React Component

The integration of a React component within the Webflow site enables visitors to interactively test how the AI-generated audio will sound.

‍

4. Performance and Responsiveness Optimization

Ensuring that the website performed optimally across devices was essential, including fast load times and smooth user experience, while maintaining high visual fidelity.

‍

‍

Before Webflow: Challenges Faced

Before collaborating with Minute Creative and leveraging Webflow, Sarvam AI’s website had several significant challenges that hindered its ability to effectively communicate its cutting-edge AI solutions:

‍

1. Old Website Issues

‍

1. Text Heavy Website

The original website relied too much on text, making it difficult for users to quickly grasp Sarvam AI’s innovative offerings. This resulted in lower engagement and a lack of clear messaging.

‍

2. Lack of Visual Appeal

Without strong visuals or interactive elements, the website didn’t effectively showcase the company’s AI capabilities, missing opportunities to engage potential clients and users.

‍

‍

2. Key Technical Challenges

Sarvam AI’s existing website was too text-heavy, lacked visual appeal, and did not effectively convey their cutting-edge AI capabilities. The client’s initial requirement was to integrate audio elements and manage content updates efficiently, but they were unsure about the technical needs at the start of the project.

‍

1. Evolving Technical Requirements

Sarvam AI’s team was figuring out their website’s technical needs while the project was ongoing, leading to frequent changes and iterations.

‍

2. Seamless Audio Integration

The website needed to host AI-generated audio files that users could play smoothly. The challenge was to integrate these files without performance lags.

‍

3. Scalable Hosting for Audio Files

Initially hosted on Dropbox, the audio files quickly exceeded bandwidth limits, creating a need for a scalable, cost-effective hosting solution.

‍

‍

‍

Solution

A thorough analysis of competitor websites in the slow fashion and designer wear space revealed valuable insights. While some excelled in showcasing their work, others lacked a strong brand narrative. This analysis helped us identify opportunities to create a unique user experience for Ayushi's portfolio website.

‍

‍

1. Tools & Platform

‍

1. Webflow

We used for website development, ensuring design-to-development consistency and CMS flexibility.

‍

2. Figma

Collaboration tool used for wireframing, design iterations, and ensuring a seamless design handoff.

3. Responsively

For testing responsiveness across various devices and ensuring optimal user experience.

‍

4. Asana & Slack

Asana was utilized for task and project management, while Slack was used for real-time communication between the Sarvam AI and Minute Creative teams.

‍

‍

‍

2. Development Process

‍

1. Style Guide

We began by setting up a style guide in Webflow, defining typography, colors, and spacing to ensure design consistency across all pages.

‍

2. Component Building

Reusable Webflow components were developed for key sections, including headers, footers, and cards. This ensured uniformity and allowed for faster development and future scalability.

‍

3. Page Structure

Leveraging Finsweet’s Client-First methodology, we built sections modularly, which allowed Sarvam AI to easily update content and scale the website.

‍

4. CMS Integration

A modular CMS was built into Webflow, allowing Sarvam AI to manage dynamic content such as blogs, case studies, and testimonials with minimal technical effort. CMS fields were connected to the relevant website elements to ensure dynamic, easily updatable content.

‍

5. GSAP Animation Implementation

We integrated GSAP animations to create a smooth and interactive user experience. Extensive R&D was conducted to determine the optimal scroll positions and timing for triggering animations without affecting performance.

‍

6. Audio File Integration

Audio files showcasing Sarvam AI’s AI-generated voice models were integrated via the CMS, allowing easy updates. Initially hosted on Dropbox, we transitioned to a custom server solution to resolve bandwidth limitations and ensure seamless audio playback.

‍

7. Performance Optimization

We compressed images and audio files to enhance load times. Additionally, lazy loading was implemented to defer non-critical content and improve overall page speed.

‍

8. Website, QA & Maintenance

A thorough QA process was conducted to ensure the site’s responsiveness, functionality, and performance across all browsers and devices. Post-launch, we provided ongoing maintenance support to address any issues that arose.

‍

9. Website Launch

After all testing and optimizations, the website went live, meeting the deadline before Sarvam AI’s key event.

‍

‍

‍

Collaboration

The collaboration between Sarvam AI and Minute Creative was built on constant communication and iterative feedback loops, ensuring the project adapted to evolving requirements and delivered on time.

‍

1. Communication Channel

We used Slack for daily communication and Asana for task tracking, allowing both teams to stay aligned on priorities, updates, and deliverables.

‍

2. Design Feedback

Sarvam AI provided initial designs and wireframes in Figma. We iterated on these designs based on feedback to ensure they aligned with the technical requirements and branding vision. This feedback loop was integral to refining the website’s functionality and visual appeal.

‍

3. Iterative Development

Given the evolving technical requirements, we followed an agile approach, delivering features in sprints and gathering continuous feedback from the Sarvam AI team to ensure the final website met all expectations.

This collaborative workflow ensured the project was delivered on time and met Sarvam AI’s expectations for design, functionality, and performance.

‍

‍

‍

Technical Execution

The collaboration between Sarvam AI and Minute Creative was built on constant communication and iterative feedback loops, ensuring the project adapted to evolving requirements and delivered on time.

‍

1. Audio Hosting Solutions

We transitioned the hosting of Sarvam AI’s AI-generated audio files from Dropbox to a custom server setup. This allowed for scalable, cost-effective hosting without the limitations posed by Dropbox’s bandwidth restrictions.

‍

2. Managing Complex Conditional Visibility

We implemented complex conditional visibility across sections of the website, which allowed certain elements to appear or disappear based on user interaction or specific CMS conditions.

‍

3. Custom Layouts within Rich Text Blocks

A key challenge was integrating custom layouts and design elements within rich text blog posts. Webflow’s native rich text editor often posed limitations when it came to inserting non-standard design elements like custom quote boxes, image grids, or call-to-action buttons.

‍

4. GSAP Animation Optimization

GSAP animations were optimized by using lazy loading techniques and triggering animations only when in view, ensuring smooth scrolling experiences without impacting page load speed.

‍

‍

‍

After Webflow: Results

The project resulted in a sleek, highly functional website that Sarvam AI can now manage independently. By resolving the challenges surrounding audio file hosting and CMS setup, we provided a scalable solution that improved performance and user experience.