Responsive website design and digital brand development for a leader in branded content.
In the fall of 2016, we met to Polar through a mutual acquaintance we’ve worked with in the past. At the time, Polar was ramping up for a complete digital rebrand and custom responsive website design and build. We got together at Polar’s downtown Toronto office for an initial discovery session and outlined key project goals from which we could collectively work to achieve.
Establishing Our Design Goals
- A slight refresh of their existing logo – the logo design was functional and recognised within the industry. Our role was to provide some minor alterations to help balance the logo and make it a little more cross-media friendly. We achieved this by scaling back the icon to no longer overshadow the wordmark and adjust the spacing within the elements of the icon to offer a clearer representation and smaller sizes.
- A complete website redesign and development – this was the bulk of the project. Polar has got by for a while using a purchased template on a popular website builder but lacked the flexibility to create a fully branded and controlled experience for their audience. Now ready to break free from the shackles of web builders, we opted for a responsive redesign and custom WordPress website offering Polar unprecedented control over their website and digital brand.
- A complete rebrand of marketing materials – as a key player in the branded content market, Polar is very active in publishing blog articles, downloadable resources, and presentations. Following the successful web design and deployment, we carried the new digital brand and style throughout the marketing assets to create a consistent user experience for the audience.
Our Design Process
Strategy and Research
As with just about every website redesign project, we began our initial strategy and research with a thorough review of the existing website’s Google Analytics. Through this design research, we established a baseline to measure the success of the new website against as well as identified areas of the website that was most popular among visitors and those that were underperforming and creating issues with user flow or conversion. We also measure other metrics like page speed performance and mobile responsiveness to create a complete of the existing website and how people are interacting with it. Once we were able to identify these markers, we began to come up with our website conversion strategy for the new website design and started piecing everything together.
In addition to reviewing the existing website analytics, we also took some time to get acquainted with competitor marketing by examining Polar’s top competitor websites. With a better understanding of the competition, we were able to immerse ourselves in the industry and better understand the search engine marketing and design style we were competing with.
Following our initial research into current website performance and the competitive market, we began our in-depth business analysis and started creating mood boards. Through a series of fun questionnaires we’ve designed, we compiled a database of actionable design and functional feedback from which we drew inspiration for the creative phase. By putting in the legwork early on in the project, we limited the need for multiple design concepts and reduced the number of design revisions necessary later on, saving our client time and money.
Next up was the design of the new site map. In the site map, our goal was to identify all pages within the new website plan, where these pages will live in the overall architecture and how each page will connect and communicate with the others. By this stage, everyone involved had a rock solid understanding of the direction we were heading, and we quickly moved ahead with the changes to the navigation and into wireframing.
During the wireframing stage, the website began to take shape. Through this exercise, we worked closely with the Polar team to build out the new page architecture and organise page content and information to create an optimal user flow and develop a road map that we could follow throughout the design of the website. We have a nifty prototyping tool that allowed all team members from both Polar and Parachute Design to collaborate, comment, sketch and discuss changes in real time on the wireframes as well as click through the wires to understand the new user experience and website interface in context.
Website Design and Creative
Once everyone had signed off on the wireframes, we moved into what everyone always refers to as the most fun part of the website design project – the creative phase. Working with our carefully planned wireframes and inspirational mood boards, we put together the initial website design concept to review with Polar. Again, using our prototyping tool, we gave Polar a contextual view of what the website would look like in and respond to both the desktop and mobile environments. Having put in the strategy and research before hand, we were right on the mark and required minimal design revisions before getting approval to move ahead with the design expansion of the complete prototype.
Once everyone had signed off on the wireframes, we moved into what everyone always refers to as the most fun part of the website design project – the creative phase. Working with our carefully planned wireframes and inspirational mood boards, we put together the initial website design concept to review with Polar. Again, using our prototyping tool, we gave Polar a contextual view of what the website would look like in and respond to both the desktop and mobile environments. Having put in the strategy and research before hand, we were right on the mark and required minimal design revisions before getting approval to move ahead with the design expansion of the complete prototype.
A challenge we faced with the Polar website design was having to remain flexible to new functional ideas and scope changes throughout the design phase without jeopardising the complex requirements on the backend. Relying on our years of experience in web design and development, we quickly identified the challenge and met it head on by dividing our design and development efforts. We continued working up mock-ups for review with our client while our development team worked up an initial prototype that we could begin testing some of the new functional ideas on while the front end development was under way.
Some of the most interesting design elements we created within the Polar website are the very versatile promotional tools we designed and built from the ground up. Within most templates included in the new website, we created a handful of different methods to promote content to users. With the click of a button, Polar can promote content in the form of a modal pop-up, or by selecting one of three unique modular in-page panels. To accommodate this type of flexibility, our website design approach needed to be well planned and executed to deliver a fully functional website.
Brand Extension
Once Polar approved the new website interface design for development we again divided our efforts for Polar. One path took our creative team on to the brand extension. This exercise married the new website and brand styles and applied them to the various marketing materials Polar planned to use on a daily basis. This task included the custom design of a monthly HTML email newsletter that for use within Pardot by Polar as well as the application of the new brand to white papers, resources, and various other infographics.
What our client had to say
Greg Bella“We engaged Parachute Design to redesign our website and revamp our digital branding. Parachute helped us identify existing pain points and plan solutions by walking us through their strategy and design process. Most importantly, Parachute was flexible throughout the design and development of the new website accommodating our evolving needs. We are very proud of our new website and would highly recommend Parachute to anyone tackling a website design project.”
Director of Marketing, Polar
Custom WordPress Website Development
Following the approval of the new website, then our development team took over and began the front end development of the responsive website as well as the development of the custom WordPress content management system.
Our web development team created custom functions in the backend to allow the Polar’s website administrator to offer a fully customised and flexible experience to the end user on a per-page basis. We achieved this by enabling the website admin to easily drag and drop page modules to reorder content and promotional panels to focus their marketing within the user flow of each page.
In addition to developing a flexible page framework, we integrated third party software within the WordPress backend to allow Polar to easily embed web forms from their Pardot account in order to take control of their landing pages and maintain an end-to-end marketing funnel. We also integrated career management tools from Breezy to help Polar manage job postings and grow their team.
Some of our favourite features of the new website design didn’t evolve until just before launch day. These features were the addition of animated GIFs to help illustrate Polar’s services in context, and custom video backgrounds applied throughout the website bringing life to the pages and also showcasing what it’s truly like to work with or work at Polar.
One of the final stages of our website development was our on-site search engine optimisation In this process, we ensure that the website content and imagery is configured and tagged correctly within the CMS and run through our checklist to ensure all the right script compressions and processes are in place to keep Google happy.
All Hands on Deck Website Deployment
Upon the completion of beta testing, when everyone was happy with the website it was time to roll out to production. We set up the managed WordPress hosting platform and made sure all our ducks were in a row a week ahead of time to ensure a smooth, soft-launch.
We pushed the beta website from our private development server to the new staging server to put the new website through its final quality assurance testing. When everything was ready, we pushed to production with confidence.
Following deployment, we helped Polar configure their new Google Tag Manager account and install various tracking scripts to efficiently manage and measure the success and performance of the new website. This process also involved submitting and configuring the new sitemap within Google Webmaster Tools to ensure an efficient transition from the old website to the new within search engine results.
CMS Training and SEO Best Practices
Following the launch of the Polar website, we all regrouped for CMS training via guided screen share. We walked Polar’s team through the day to day management of the website using their new custom WordPress CMS and review of SEO best practices to rely on as they began publishing their content.
About Parachute Design
Parachute Design has practised professional responsive website design and development in Toronto, Ontario since 2003. In addition to our expertise in custom WordPress theme design and development, we also offer a wide range of services including corporate branding and custom logo design.
