Froth Works From Brief to Reality

Our founders were off for a much-needed vacation in Japan in a week, and the team had just delivered a major project. A quiet spell lay ahead.

But our co-founder, Raksha, had other plans. 

Womp, womp. 

An idea to address an issue that had been flagged during a lot of our retrospectives. An exercise that would also measure how well the team could perform without the founders present. 

We’d often discussed client deadlines and last-minute overhauls becoming creative shackles that hindered the quality of our output. We knew what we were capable of if we just had the room to be systematic, to innovate, and to truly color outside the lines.

So this two-week crunch project where we didn’t have to overhaul things at the last minute was  exactly what we needed.

While the team got the  opportunity to have the creative discretion to go all out, the founders got to see how well the team can do without their supervision.

Using GoodBrief.io, Raksha generated a design brief and presented it to us. The exercise was designed to be a comprehensive test of our team: 

Suhas (developer), Sujay (designer and storyteller), and Vishnu (project manager). The task was to interpret the brief, collaborate effectively, and produce high-quality work.

The original brief

The subject was a video game company that made sarcastic, playful, and bold games. For a team that bonded over movies, books, and games of all sizes, this was the kind of playground where we knew we could go wild, unrestrained by convention but guided by a brief that tickled all the right parts of our creative minds.

Our performance would be judged on a clear set of criteria.:

• Adherence to the Brief

• Collaboration

• Role Execution

• Use of ClickUp

• Quality of Deliverables

• Presentation

The deadline was set for February 24th. We embraced these constraints as the guardrails on the roller coaster we were about to ride.

Embracing Process Reality: The Method to Our Madness

What followed was a long discussion between the trio about process planning.

Our first step was to turn to ClickUp. We started with the end date - February 24th - and worked backwards, breaking the entire project into a clear, phased roadmap: Research, Color Palette, Typography, Logo, Imagery Style, Tone of Voice & Copy, Fixes, Brand Guidelines, and Development.  

This was about charting our course with precision.

Our project calendar was broken down to the T.

Research and Moodboarding

With our roadmap in place, we went our separate ways to find inspiration, scouring the internet for images, memes, and fonts - anything that resonated with our idea of what Froth Works should be. Suhas, Sujay, and Vishnu compiled images and screenshots of interesting websites onto a Figma board. 

The goal was to find visuals that captured the brand’s sarcastic, playful, and bold nature, but we also wanted to see how other companies with similar-sounding names used their branding. 

We returned to discuss the references we found and exchange ideas about what we found and why they felt right for the brand.

Our final moodboard was a collection of dank memes , chunky words and colorful thingamajigs.

Vishnu found websites with imagery that showcased the spirit we were trying to embody. Sujay, meanwhile, found a handful of ironic and hilarious memes that captured the irreverent tone. At this point, we forgot what was supposed to be done and instead all we did was read memes and bray like donkeys. 

Our research turned up some interesting references. We had one that was a stylized interpretation of the PlayStation logo, which we loved for its compelling use of basic shapes and colors. We had a few references that had chunky, blocky letters with thick borders, a style we found very appealing for a video game company. 

This led to a lively discussion about whether to go with a simple, angular, sleek design or a more cartoonish, chunky one. At one point, we considered using a mascot, but since we couldn’t find a reference that clicked, we decided to incorporate the spirit of that idea into the overall imagery.

This proactive planning gave us the room we needed to explore without the pressure of a looming way-too-soon deadline. Our review meetings were for alignment, not for tearing down work. We would share our independent progress on group chat, discuss choices, and ensure every piece still fit into the shared vision. We began to trust the process. 

Because we were so aligned from the very beginning, there was minimal conflict. Changes were a natural part of the collaborative process, not a critique. The only conflict wasn't with the brief; it was with the creative act itself. 

When someone asks “How did your project planning go?”

The Story: Where Substance Met Style

This is the origin story we came up with for the brand. 

This narrative  became the foundation for everything we built. The challenge was to translate it into a tangible, visual identity that felt both professional and delightfully absurd. Perfectly balanced, as all things should be.

The Creative Execution: Forging a Brand from Scratch

With a solid plan and a shared vision, we moved into the creation phase..

The Logo Saga

Logo Design often starts with black-and-white so designers can focus on the fundamentals like readability and contrast.

The brief was specific: a lettermark using "F" and "W," with a preference for orange, and simple enough for embroidery. This task fell squarely on Sujay's shoulders. He dove in, experimenting with different forms and styles, eventually presenting a series of strong options.

The later versions begin to look more finished

This is where the process got (beautifully) messy. The revisions took longer than we anticipated, but for the best possible reason. There wasn't a lack of good options, there was an abundance of good elements. Suhas and Vishnu liked different parts of each design. 

One version had a shadow with the perfect depth. 

Another had a curve on the 'F' that felt just right. 

And a third had a weight that perfectly captured the "chunky" feel we were after.

Sujay had once again done a masterful job. 

- Sujay

We even had a version with a thunderbolt on it that some of us (read: Sujay) were attached to, but others (Suhas and Vishnu) were against. We tried to make it work, but every iteration seemed like a force fit. It was finally abandoned.

These are a few of the logo designs we flirted with.

What followed were several rounds of revisions, a classic creative puzzle where Sujay had to synthesize this feedback, combining the best elements into a single, cohesive mark. 

You can’t just pluck good ideas out of the ether. You need to work your way through a lot of duds or semi-baked ideas before you get a good one. And often good isn’t good enough. The logo was something all of us subconsciously did not want to compromise on. But our beautifully planned timeline, which already had buffers built in for this exact scenario, ran out of time to accommodate our whims.  

But we collectively took a call to give the logo the time it needed to be finetuned and give Sujay the time he needed to curse the day he chose to work with his colleagues as he went back to the board refining the logo till we came up with the one we loved.

The final logo was a testament to this collaborative refinement: a bold, chunky lettermark with a thick shadow, simple, recognizable, and versatile enough for any application. Though we overshot the logo timeline by 2 days, this extra time we took was invaluable. The result was a mark that was exactly what we and the brief were looking for.

The Final Logo

Visual Identity

The brand's visual identity was built to be bold, playful, and functional. We chose a color palette and typography that not only looked good but also reinforced the brand's personality.

Building the Palette: A Study in Contrast

The color palette needed to build on the primary orange, incorporating complementary colors to evoke excitement and boldness. Vishnu took the lead on compiling the palettes, experimenting with tools like Colorhunt and Coolors to generate options that felt right for a modern, dynamic gaming company. 

Some of our color palette samples

After a few iterations, we started narrowing down our choices. A key step in this process was ensuring practical usability. Using a color-contrast-checker.com (a website Raksha suggested), Vishnu meticulously checked the contrast ratios between different color combinations to ensure our choices were not only aesthetically pleasing but also accessible and readable, especially for on-screen text.

The final definitive Froth Works Color Palette

The final palette was chosen both for its appeal as well as its personality. We gave each color a fittingly playful name: Frothy Orange, Bubbly Blue, Rage-quit Red, Mana Green, Follow Yellow, and Wasted White.

Knowing what goes with a color  is a very important part of color palette section

So is knowing what doesn’t

Typography

The brief called for two to three fonts that could strike a balance between a playful and professional look. The choice here needed to complement the chunky feel of the logo while ensuring all copy was clean and readable. We landed on a combination of Righteous for headers and Raleway for subheaders and body text. Righteous, with its bold and slightly rounded letterforms, was a perfect match for the logo's energy, while Raleway provided a modern, geometric, and highly legible foundation for all other content.

The font system

Finding the Voice

The tone of voice was perhaps the most critical element, and it was a world Sujay fully inhabited. Froth Works' identity was born from the narrative of this "perfect balance" of substance and style. We aimed for a brand voice that was witty and personable, creating a sense of community through shared humor. Something like Discord.

The core attributes of our voice were Playful Irreverence, which meant being sarcastic but never mean-spirited. It was about Bold Authenticity, communicating directly, sometimes with a dash of wit. The goal was to provide Smart Entertainment through clever wordplay and humor that is inclusive. . 

Together with that, we established a set of key writing principles to guide our work:

This structured system gave us permission to be unhinged. Sujay (with his AI) took this framework and made the copy  breathe, ensuring the humor and sarcasm enhanced the user experience.. 

At the end, we ended up with  unexpected word combinations that were a balance of jokes and quick-witted responses: 

• "Games that don't take themselves seriously (but we seriously make great games)". 

• "This RPG has more dad jokes than actual dads. But also 40+ hours of compelling gameplay, so you can't really complain". 

• "New patch just dropped. We fixed all the bugs. Just kidding, we made them cuter".

  
  

Imagery

The imagery for Froth Works was a crucial element in establishing the brand's personality. The visuals needed to be vibrant and authentic to a gaming company that doesn't take itself too seriously. We wanted to use colorful, bold, and playful illustrations, incorporating hand-drawn elements with photographs. 

The imagery we came up with was meant to evoke a sense of inclusive fun and community through shared humor and a chaotic, yet organized, aesthetic.

We wanted the Froth Works imagery to convey that the brand values fun and community.

The Website: From Figma to Framer

We haven’t spoken about Suhas in a while. It’s time we do.

Suhas was tasked with bringing the entire vision to life on the web. He chose to build the website using Framer, a no-code development tool we regularly use. He found a template called "Product Hub" that provided a solid foundation. But the true Froth Works spirit came through from his creative modifications.

One of Suhas’ standout additions was the CTA section. 

He was inspired by another Framer template and modified it to make an interactive grid of yellow and white dots. As the cursor moved, the dots would rise and fall like a visual fidget toy, perfectly resembling the froth on top of a freshly brewed cup of coffee and this tied into our origin story of how the Froth Works stemmed from coffee . 

It was a small, clever touch that everyone immediately loved.  perfect example of how development can add a final layer of brand-aligned creativity.

With the development nearly done, the garnish was the web copy. We ditched generic greetings for personality: "Welcome to Froth Works. Where pixels meet punchlines, and games refuse to behave". Here are some more examples: 

The Final Products: A Universe of Games

What's a video game company without games? 

Although we all played our fair share of games, we couldn't just fill the game library with other developers' games. While Suhas and Sujay worked on the website, Vishnu was tasked with coming up with games that Froth Works would sell. 

The hours I spent playing games instead of focusing on my exams of my youth had finally come in handy. This is my calling

- Vishnu

What started as a quest for interesting names turned into an epic adventure. Vishnu refined the game titles and mechanics, but chose to make it a bit more personal, he added parts of the team's personalities into the themes. That was a neat idea, we all loved reading through the list of games. 

The adventures of a Bro-grammer as he navigates the StackOverflow and pizzas

Suhas then decided which platforms each game would be available on.

Tomfoolery, adventure and advanced physics. N’uff said.

They were interesting enough where we wanted some of these to be real.

This unnecessary amount of time was available to make the game concepts, plots, and ideas mature, because of how well-planned and delegated the tasks were. We didn’t have to do it. The games would never be made (probably), but we did it anyway. Every nuance and interesting tidbit was carefully thought about. 

Brand Guidelines

A final few days left. Froth Works was shaping up to be a legit company in our heads. But we had one final deliverable.  Brand guidelines. The brand was spread across figma, framer, google docs, affinity designer. We gathered everything into a guide that clearly detailed how the Froth Works brand should work.

The brand guidelines document detailed the company's origin story, tone of voice, and visual identity. It included:

• Logo specifications, including clear space and variations.

• Color palette, with hex, CMYK, and RGB values, and guidelines for color contrast.

• Typography rules, with Righteous for headers and Raleway for body text.

• Imagery and illustration guidelines, emphasizing a bold, playful style with hand-drawn elements and photographs.

This document was the definitive playbook for anyone working with the Froth Works brand, ensuring every future piece of marketing would be aligned and authentic.

The Final Presentation

After all the meticulous planning, we faced a minor setback. A few tiny fixes were pending for the brand book. 

Luckily, our founders were tired from their trip.. We ended up having our final presentation on February 26th, two days after the initial deadline. 

So, how did we do? We had two weeks to finish an entire brand identity, plus website design and development. The founders listened to our presentation, checked it with the brief… and we aced it.

We pretty much nailed everything except for a small contrast check for a couple of colors. In two weeks, delivered a high-quality product and presented our work in a timely manner with minimal delays. 

The successful execution of this project, on top of the creative work, demonstrated the value of our process. And proved to the founders that we could carry out the work without their presence. 

The Playbook

Froth Works was a project that proved the power of a solid process. It gives room for the magic to happen when a team wants to create together. It proved that you can be creatively "unhinged" and "go bonkers," as long as you have a solid process to keep you grounded. 

The brief, a perfect balance of technical substance and playful style, challenged us to create a gaming experience akin to enjoying a perfectly brewed cup of coffee, on a day you needed it the most. It was this seemingly rigid framework that paradoxically gave us the freedom to go all out and create something truly wild and imaginative.

Hope you liked reading this project! 

If you want to work with an agency that takes your challenges seriously, we'd love to talk to you.

We’re a curious bunch. Drop us an email at [contact@b-moat.com]. If we’re not the right fit, we’ll try to introduce you to someone who is.

Story, brandwork, and copy - Sujay

Colors and typography - Vishnu

Website design and development - Suhas

You're not playing a game, you're joining a revolution. A very silly revolution, but a revolution nonetheless.