Helix House Web Design Case Study: Designing the New Face of Agile 451

We had the delight of working with Danielle Hallett over at Agile 451. Her history as one of the world’s first Drupal coders was so fascinating to learn and she is an incredible person to work with as well. When she asked us to design her new website for her, we knew it would be a job like no other — the only restriction was our imagination. Today, our lead designer Indre is taking us through her process for web design without any limits.

What is Agile 451?

Agile 451 is a web development company led by one of the world’s first Drupal developers, Danielle Hallett. Their focus is on collaboration, innovation, and fun.

The First Step in Web Design: Finding the Right Tone

Danielle gave us free reign — we were allowed to create the tone (as long as it was approved by her, of course!) and we took that extremely seriously. Copywriter Casey and Indre worked together with Danielle to get a feel of how serious, bold, professional, and fun she wanted to come across as. The consensus? Three C’s: Confidence, competence, and creativity. Then, the two got to work: Casey with the writing and Indre with the mood boards.

Creating Three Distinct Mood boards

With the “three C’s” in mind, Indre crafted three distinct mood boards to get a feel for what first impression Danielle wanted to make with Agile 451’s website. “After doing all the research and going through many creative brainstorm meetings I have condensed Agile 451 into three distinct directions that would represent the brand well,” Indre explained. Here is a sneak peak of the three mood boards she created.

Mood Board #1: Bold

The first mood board was one word: bold. Designed to pop, this mood board immediately caught ours and Danielle’s attention. It was based largely on the book “Fahrenheit 451” and the theme was “spark.” The spark that started the fire in a creator’s mind for new ideas, new technology, new beginnings — you name it. Indre kept the visuals bold and minimalistic. She pictures a lot of movement, like flames whipping in the wind, or a spark bursting to life. You can see exactly how all of this turned out at Agile 451 — Danielle loved this idea so much that it made the final cut! Her team of coders brought it to life, and we love the results.

Mood Board #2: Soft and Techy

The second mood board was also inspired by a spark and the movement of fire, but it emphasized the flow of colors instead of bold contrasts. Everything was meant to be softer and techy feeling, but still minimalistic. Indre’s vision was a modern feel with edgy typography to help Danielle stand out from the blacks and blues that are so typical in the industry. However, this design was the middle-ground: it was new, but it wasn’t too different to be confusing for people who were expecting something else.

Mood Board #3: A Focus on Agile Development

Mood board no. 3 is very different, isn’t it? That’s because Indre pulled away from the idea of techy and fire and instead dove right into “Agile” as part of the brand. It’s simple, dynamic, and gets the point across right away: this coding company is here to turn abstract ideas into physical products, quickly. “The company that focuses on agile development,” Indre said. “I wanted to visually showcase the agile movement, the ever-changing project scope, the ability to quickly change and evolve. I proposed building a whole geometric language that would move and flow creating symbols, shapes, icons and even typography.”Ultimately, Danielle was drawn to the boldness of the first mood board, and we don’t blame her! So, once that was chosen, Indre was off to the races.

Web Design: Beyond the Mood Board

This is where the magic really started flowing. In case you missed it, Danielle picked the first mood board on the list. She loved the boldness and how it made her company stand out from the typical blue theme industry. At this point, the content was approved, and Indre and Danielle worked together to create a stunning design that fit the approved tone and the bold design. Indre went in, picked the colors, typography, design illustrations, icons, and created their new logo: which is fire by the way (literally and figuratively). “The initial branding part is my favorite,” Indre revealed. “I love the process of interviewing the client, the research of coming up with unique ideas and creating a brand from colors, typography and imagery. Pretty much giving life to an idea! I love that creative branding process.”

Everything from user experience on the site to textures to page animations were influenced by the brand style and the idea of igniting a spark in this web design process. As fun as this project was, it wasn’t without its challenges. With so many bold colors, Indre had to tone down most of her designs. While she is extremely versatile, it isn’t often that the colors of the website are left to speak for themselves. “I always have to remember the KISS rule. Keep it simple, stupid!” Indre said. “Also translating the design to how it needs to flow once it’s developed is always a bit challenging, especially when the page is fairly simple. But the micro animations and iterations are what makes people pay attention and love your site so it’s worth figuring it all out!” Working on a design like this also empowered both Danielle and Indre to speak out about portions they liked, didn’t like, and what needed improvement, and what was missing. This integral part of the process can be challenging during projects like this, especially when we’re given creative freedom! But Indre navigated it like a champ and Danielle was amazing at guiding us to the perfect design for Agile 451. So, what’s the final takeaway?

Dare to Be Bold

From a neutral-toned website with text she disliked, to a popping bold new look, Agile 451 is nearly unrecognizable. The new website fully represents what Danielle wanted: a confident team of competent and creative coders that can do whatever you need of them. She dared to be bold, and the result speaks for itself. If you want a website that’s as bold as Agile 451 or that is designed exclusively with you in mind, give us a call at Helix House at 480-386-1686 or visit us online. Indre will be happy to work with you to make your dream website come to life.