Twig AI

Creating brand marketing material for an customer support AI tool.
Duration
Oct 2 - Oct 6, 2023 (1 week)
Team
CEO - Chandan Maruthi
CRO - Harish Maiya
Designer - May Sermonia
My Role
Copy Review
Brand Exploration
Banner Design
Webflow Design

What's This Project About??

PROBLEM

The client, gearing up for an upcoming conference, aimed to effectively engage their target audience with the Twig AI application. Twig AI sought to revamp their existing website and brand, emphasizing the problems solved and the impact created by their application.

SOLUTION

I partnered with the Chief Revenue Officer (CRO) and the Chief Technology Officer (CTO) of Twig AI to explore brand identities, design a banner for their booth at an event and, design a webflow landing page. My focus was to iterate quickly, provide brand assets for marketing use and improve their web design for increased readability.

Project Insights
1
Goal of the landing page was to get visitors to book a demo
2
The client wanted to raise awareness about their brand and highlight the impact of the product
3

Client's target audience are tech leaders who are curious about AI and customer support
About

Twig AI reads, analyzes and writes responses to customer queries from help docs, private datasources, and past support tickets increasing customer support representatives' efficiency with 50% faster response times.

Discovery

Met the Twig Team onsite in Oakland, CA!
Kick-Off Mtg 🤝🏾

My goal for the kick off call is to introduce myself to the team, ask any questions I have about the brief and to align myself with the client's deadlines and preferences for communication.


Post-call, I followed up via email and slack with a google doc that acted as our source of truth for all aspects of the project. The document includes:

  • Goal of the project
  • Deadlines
  • Relevant links/Existing Resources
Content Audit 📝

Drawing from the insights provided in the Heuristic Analysis article, I performed an assessment of their original website, aiming to enhance their conversion rate. Employing the PRICE Framework, I reviewed every element to ensure a detailed and strategic evaluation.

First, I ensured the site's persuasiveness, emphasizing clear benefits and reasons for user actions. Relevancy was paramount, addressing the users' initial query within milliseconds, aligning ad copy with landing page content.

I tackled interference, removing elements diverting from the conversion goal. Comprehension was enhanced, ensuring clarity about the business, actions, and differentiation. Lastly, efficiency was optimized, ironing out issues hindering user actions, even spotting minute details like button placements.

This meticulous evaluation, inspired by this Heuristic Analysis article, led to strategic improvements, refining the website's user experience significantly.

Heuristic content audit for their original website.

Ideation

Project Timeline 💀
Staying Focused on the Goals 🎯

Given our tight one-week timeframe, we made a strategic decision to stay within scope.

We chose to concentrate our efforts solely on the homepage, bypassing an in-depth exploration of the information architecture for now. Our plan includes making updates to the other pages in the upcoming phases or projects.

By focusing on the immediate needs, we aimed to ensure a polished and impactful homepage experience while keeping the door wide open for further enhancements in the near future.

Inspiration and Research 📚

In our redesign endeavor, I meticulously studied websites like Secoda, dissecting their content layout strategies.

Our focus was on creating a homepage that epitomized clarity and cognitive efficiency. We opted for a design aesthetic that embodied cleanliness, high contrast, and abundant whitespace. These choices were deeply rooted in research findings, geared towards optimizing content skimmability.

By integrating these insights, we tried to craft a homepage that not only mirrored effective design principles but also enhanced visitor engagement through seamless information processing and effortless navigation.

Preview of Secoda's website- the source of our inspo!

Banner Design

Example banner designs
Plot Twist - We need a banner 😱

Midway through the project, the client presented a new challenge: designing a banner for their upcoming conference.

With two projects on my plate and a tight deadline, it was crucial to iterate quickly. I collaborated closely with the client, understanding their priorities. After our discussion, we aligned on creating the banner first, establishing it as a pivotal point to lock down the new brand identity for the upcoming website.

This strategic decision allowed us to focus our creative efforts, ensuring that the banner not only stood out at the conference but also set the tone for the entire brand's visual identity.

Juggling these tasks, open communication remained our linchpin, enabling us to deliver a cohesive and impactful design solution.

Exploring Visual Marketing 🪧

I meticulously researched designs from platforms like Creative Market, Pinterest, Behance, and Dribbble to gather inspiration. Armed with diverse options, I presented the client with a range of designs to react to and provide feedback on.

Together, we delved into exploring updated branding concepts, striving for a fresh, modern aesthetic using their old website color scheme. Through this collaborative process, I integrated their valuable feedback and ideas, crafting a banner that not only met their requirements but also outshone amidst the conference buzz.

This journey became a true collaboration, merging creative ingenuity with the client's vision.

Banner design exploration + Logo color variations
2 options for different copy options showcasing percentages
Final Banner Design 🌟

I'm proud of how the final banner design turned out. By incorporating soft shadows, gradients, and a thoughtful visual hierarchy, the banner became incredibly visible, even from a distance.

These design elements not only added depth and dimension but also enhanced the overall visibility, ensuring that attendees could easily spot the booth amidst the crowded conference hall.

It was a strategic choice aimed at making a strong visual impact allowing the client to make a memorable impression at the event.

Web Design

Template research & Explaination to the team
Finalizing Website Content - Researching Wefblow Templates 💻

As we fine-tuned the website content, I multitasked by researching Webflow templates, aiming to discover the ideal foundation for design and animations.

My objective was clear: to pinpoint a template featuring minimal animations, a sleek, minimalist design, extra pages for future website expansion, and an existing style guide. Finding this perfect match was crucial. It not only streamlined the design process but also ensured scalability, allowing for effortless updates across various pages as the brand continues to evolve.

This careful template selection laid the groundwork for a cohesive, dynamic website in line with the client's vision and future ambitions.

Updating Website Copy 📖

Together, we focused on crafting wording that was not only concise but also vividly descriptive. Each iteration aimed to strike the perfect balance between clarity and depth, ensuring that every word resonated with the brand's essence.

Through this collaborative effort, we honed the content to its most impactful form, creating a website narrative that was not only informative but also engaging, capturing the essence of the client's product while ensuring a seamless and compelling user experience.

Screenshot of our Google Doc drafting web copy
View of whole landing page
Final Design Implementation 🌟

In the eleventh hour before their conference, we managed to incorporate live feedback directly into the website, ensuring it was polished and ready to impress.

A significant challenge arose when the client admired Secoda's dynamic "typing text" showcasing their use cases and wanted something similar for their website. Research led me to a Webflow example using JS, but implementation was tricky. Luckily, my partner, a skilled developer, came to the rescue, enabling me to astound the client with this engaging feature!

In the final design, I meticulously balanced visual contrast across homepage sections, redesigned images for enhanced engagement, and ensured mobile responsiveness. With these considerations, the website not only captivated but also seamlessly catered to the audience accessing it via smartphones during the conference.

Website Migration

Migrating the website to the client was a breeze, thanks to Webflow's seamless transfer feature, allowing for effortless transition between accounts. Leveraging this ease, we swiftly handed over the reins.

Additionally, to enhance user experience and capture valuable leads, I collaborated closely with our CEO/CTO. Together, we integrated essential third-party tools like Hotjar and Google Analytics. These integrations not only provided insightful data but also facilitated robust lead capture mechanisms, ensuring the website not only looked great but also functioned optimally, maximizing user engagement and client satisfaction.

Reflections

Working with founders of a company on a tight schedule is always an exciting time. Despite the stress of delivering in a short period of time, I love:

  • The rush of thinking on my feet
  • Figuring out ways to be more efficient
  • Communicating clearly with my client on the goal/outcome we're trying to achieve

All of this while being in 2 different time zones! (3 hour time difference – Me in HST, client in PST) 

I'm looking forward to building a relationship with this client and continuing to partner with them on the design-side to support their growth in the near future. 😊

Learn more about Twig AI
📓 Learnings
1

Communication via Slack huddle is key for live feedback and alignment with the client.

2

When timelines are tight, its important to prioritize "progress over perfection". Designs can be iterated in a future sprint.

3

Implementing JS code for the hero flashing text was exciting to navigate as I strengthen my webflow skills.

📈 Long-Term Vision
1

I'd want to do a persona exercise to understand their audience and implement language that reflects them.

2

I'd want to redesign the other nav pages so that the brand is consistent across their website

3

I'd want access to the application so I could take better screenshots of the product for the features section.