Butterfly – Innovative Website Design
Our purpose was to create a new and exciting, visually energetic website that connects with present and past clients, inspires new clients and makes competitors go ‘wow’.
The new website aims to present Butterfly as a leader in the digital space, with a personal approach and cutting edge processes and skills. It is intended to highlight both the agency’s technical abilities as well as showcase the creativity and individualism of the team.
Butterfly aims to engage with medium sized organisations searching for excellence in design and development, as well as connect with those interested in digital innovation and thought leadership.
Technically, the site is extremely polished, with animations and transitions creating a seamless flow from section to section. For example, each case study previews the following case, and loads up instantly, using a slide in transition. The content layout is designed to move the user through each section – services or cases – deeper into the site and get a clear understanding of the service offering and process, as well showcasing the achievements of previous work. In presenting the content using this method, Butterfly are actually educating their clients on the website creation process.
To take advantage of the recent inclusion of HTML 5 across browsers, Butterfly wanted to demonstrate exactly what video can do for a website to engage and inspire an audience.
The use of video in new and unusual ways is on the rise and something we are set to see more and more of in the near future. In this case, a high frame rate video has been included as a highly conceptual banner that creates intrigue and mystery when a user first lands on the homepage.
Butterfly chose to use the recently released Drupal 8. The mission was to experiment with and challenge this new CMS, expanding internal knowledge and exploring the possibilities of using Drupal in new and innovative ways. Due to the fact this is a new release, Butterfly custom developed their own form builder, which they will make available to the Drupal community in coming weeks.
Of course the site is responsive, with a 100% fluid template that smoothly adapts to any size screen. As mobile devices won’t play videos automatically, Butterfly converted the background video to a gif, which gives the same feel to the user, without the need to click.
The site also uses an ‘on scroll’ menu which appears if a user tries to flick back to the top to access the home or menu buttons, maximising screen space and giving access to navigation just when it is needed.
Being both the client and the supplier is a unique challenge for agency teams.
Butterfly overcame this by actively putting themselves in the shoes of our clients and running an Agile project focused on quality, creativity and functionality from this perspective. Roles as client and customer were also assigned internally to help identify responsibilities and manage the project\’s engagement levels.
This unusual approach not only helped refine internal processes, it also worked as an opportunity for Butterfly to truly understand the experience clients have with the team from start to finish, and optimise this for a great working relationship.