Butterfly

Please tell us about how you drove from strategy to execution and what positive outcomes resulted, and help us understand what makes your story noteworthy or exceptional.: 

2013 marked an incredible year of growth for Butterfly. To support this exciting phase of development as a company, a strategic approach to the way we work was needed. A company vision took shape: to have fun doing fantastic work for amazing clients. And company values of a supportive environment, great relationships, having fun dammit!, innovation & creativity and continuous improvement now drive our focus in all the work that we do. A new branding strategy (including tagline) was the catalyst for re-positioning Butterfly as a Digital Agency and the site redesign was just another step in the process.

Butterfly design great websites. But our own needed an overhaul to attract the type of clients that align with our company values and vision. The brief was to focus on showcasing the work we can deliver and to demonstrate the innovative, cutting-edge skills of our design and development teams. The best way to do this? A modern redesign to a responsive layout that looks equally fabulous on something as big as a TV or something as small as your mobile phone and everything in between.

Bringing our website in line with our new growth strategy and vision meant making it less technical and more solution-driven with a focus on who we are and what we do for our clients. In conjunction with a shiny new responsive template design, the new site has new content, a new sitemap, and graphics galore. We wanted to build a site that reflected our company values to people who saw it, so we could attract the right kind of clients to our business.

Timed delivery of the website in line with the strategy was also crucial. Butterfly moved to a central business district location in May 2013 and we wanted the website to go live shortly after (new agency office space complete with a new agency-style website) – so not only were we building an innovative site, we had a deadline to meet, in a development environment where clients come first.

Brief & Objectives
It needed to be obvious that great design and technical innovation are our specialty. We wanted to feature our case studies more predominantly, showcase our client list and highlight our blog articles. The project also involved a complete re-write of our site to create more engaging copy outlining that as a digital agency we solve problems for our clients. To reduce clutter, the content was written succinctly and strategically with clear consideration of how customers use our site.

Strategy behind the work
Going for a customised responsive design has turned our very own website into a case study that demonstrates the exceptional level of work we can produce for our clients. The Butterfly statement that appears on the home page quickly gives new visitors an insight into who we are and what we do which meets clearly the goals of the redesign project.

Dedicating an entire section to strategy ties into our tag line, and recognises the new skill set that we have added to Butterfly in the form of digital strategy, account management and planning. Previously, this was a crucial Butterfly team that was unrepresented on our website.

Responsive design requires adherence to a strict grid system that all elements are anchored to. This is what makes the site adjust to the size of the screen you are viewing it on with apparent seamlessness. Collaboration and communication between the design and development teams is key in delivering a successful responsive website – the decision making needs to be undertaken by both parties at the very beginning so that all of the functionality works in the transition from design to build. A feedback loop from development back through to the design team not only helped both parties to highlight potential problem areas, it also helped the teams to solidify the approach to responsive websites for future projects.

User experience, innovation and creativity
Clear, bold statements appear at the top of every page communicating our message. The case study carousel rotates in addition to scaling thumbnail images – this is a unique and complex type of functionality that assists users to quickly and easily find what they are looking for and see more of our work more quickly on any device.

Drop down menus feature roll over functionality, providing the user with additional information to enhance usability. To show off a bit of the Butterfly personality, our 404 page was a real hit. It threatens to blow up the Internet with a countdown timer, finishing off with a nuclear bomb gif before redirecting users back to the homepage.

Execution
Our new website echoes Butterfly personality and company values. Case studies are upfront and the content architecture encourages users to read it. It’s easier to find the information you are looking for and you get more of a sense of what Butterfly are about and what we are able to do. One of the unique selling points of working with Butterfly is the ongoing in-house support that we offer our clients. Keeping this point of difference in mind, we designed our help centre to be more intuitive. It looks like a dashboard, with large, tactile icons separating each section. Upon click, content is revealed beneath each section heading. This saves space on the page, by including only necessary content, specific to the user’s requirements.

Our services pages have been individually designed, and utilise an anchored menu allowing ease of navigation on longer pages.

Results and achievements
Our new website is a showcase of responsive design and development, acting as a useful demonstration tool in the sales process when explaining responsive to clients. We also have an ongoing commitment to maintaining our site in not allowing it to grow stagnant with new content added regularly. We are constantly refining the site to ensure continuous improvement of the user experience and implementing feedback from both internal and external user sources.

Our new website has certainly delivered on the goal of clean and minimal, and showcasing our work upfront. In addition, our design was a finalist in the Digital Experience – Website category at the 2013 Melbourne Design Awards and a finalist in the 2013 Premiers Design Awards (Victoria).

How does this teach other practitioners to become better at their work?
Cultivating an environment where constructive feedback is encouraged during the process is crucial. So often, we only assess projects on completion, but the digital space is one where we are constantly breaking new ground, and collaboration between designers, developers and digital producers can be extremely valuable. Don't be afraid to make mistakes, learn from them and feedback to your team throughout the duration of the project. Not only does this create a powerful collaboration of various skills, it allows us to complete a gap analysis and address these gaps during the project to improve the outcome.

What can other companies learn from how you conceived of and designed this experience?: 

One of the most important things that other companies can learn from the way in which we conceived our website, is the importance of considering the most suitable method for delivering any experience. When we were deciding how to best execute our website to achieve our strategic goal, we carefully considered a number of different solutions to the problem in order to come up with the one that was most fit for purpose and resulted in the website experience that we designed and built. In our case, the best solution was responsive design. But responsive design is not always the best solution for every circumstance or business due to a range of factors that include things like budgetary, design and content constraints. Careful consideration of the goals of the digital solution and the intended audience along with thorough planning, help to ensure that you make the right design decisions that best meet the needs of your strategy, your business and your user.

How did your company articulate the business goal or strategy that led to the creation of this experience?: 

Our website design was influenced by a business goal that road mapped a shift to being more digital agency rather than simply website developer. We wanted to show off the extent of what we could do and showcase our talents in a more direct way to our clients by making our work easy to find and by making our own website a part of this showcase. Being in the business of digital design ourselves, considerations towards user experience form an integral part of the work that we do each and every day. This extends not only to the digital projects that we design and build, but the way in which we interact with our clients and the service we provide. So considerations to user experience were at the forefront of our minds when creating the digital experience that would support our strategy. Our clients are at the heart of everything that we do, and so they are also at the heart of our business goals and strategy. The business goal or strategy was articulated both in the brief for our website, but also in the Butterfly values and we like to think that these shine through in our website experience – Supportive environment – A collaborative and egalitarian culture with the freedom to express, grow, learn, make mistakes and improve. This creates the space for our other values to thrive. Great relationships – Positive client and team relationships with trust, honesty and transparency at their heart. Having fun dammit! – Interesting, unique, flexible solutions for clients and ourselves, in our work, problem solving and design essence. Innovation and creativity – Embrace the quirky. Enjoy the weird. Encourage playfulness and humour in everything that we do. Continuous improvement – Evolving and transforming over time to understand and learn from positives and negatives.

Please describe how the concept for the experience came about, and what research, information, inspiration, etc. informed it.: 

The concept for the experience came about through the combined experience of our design and development teams. We create and build websites for our clients each and every day and the rebuild of our own website was an opportunity for us to harness that experience in order to demonstrate what was possible and showcase our talents in a strategic way. We researched current trends for design inspiration whilst creating something truly Butterfly, and carefully considered how each and every piece of the experience would come together in a seamless way. Most of the innovative features of our site were borne from the question “Wouldn’t it be cool if…?” and we then determined if that met the brief, if it was possible and then set out to create it. Bright, bold, ambitious but simple to navigate were the goals. We wanted to showcase our work and create something that would stand out in a crowd – just the way we like to build websites for our clients. Collaboration was critical to the development of ideas, and our producers, designers and developers worked closely together to solve problems, refine the experience and deliver the magic.

What are the key ways the experience contributes to the realization of the business goal or strategy, both directly and indirectly?: 

Our new website has without doubt bolstered our business strategy for growth, showcasing our work and solidifying the Butterfly essence through our primary piece of marketing communication. The sales enquiries it generates are from the larger clients we were targeting. The case studies and imagery allow us to share our work with our clients, which helps to inspire them in turn to create wonderful digital experiences. The blog allows us to share our thoughts and expertise through a wide variety of articles. Our own website and the ability it has created for us to position our work in the marketplace has led to several awards, one of which was the Best Melbourne Studio (20+ staff) at the Melbourne Design Awards, as well as recognition across a wide variety of digital and design awards programs. All of this contributes to company growth and shares our work with the world in the way that it deserves.

How might the experience inspire, inform, or act as a starting point for how your business addresses other goals and strategies?: 

We certainly hope that our website acts as inspiration to other businesses in the way in which they approach their website development. Whether this be through exploring the work we have designed and developed for our clients to imagine how that might be implemented for their business, by accessing our help dashboard for assistance with their content management system, or by reading a blog that makes them feel more informed about the digital space. The digital world is changing at a rapid pace and for some businesses this is daunting. But with a good strategy and the right digital partner, businesses have the opportunity to enhance their business through creating engaging experiences in the digital space.