Responsive website from Blue Ant Media introduces Smithsonian Channel to Canadian audiences
16/10/14

Case Study by Jennifer West RGD, Blue Ant Media

The Smithsonian consists of 19 museums and galleries as well as the National Zoological Park and nine research facilities based out of Washington DC. To build on the institution's established reputation in the United States, this project asked us to introduce some of the Smithsonian's programming to Canada with a responsive website design for the Smithsonian Channel.

With programming spanning air and space, science, nature, history and pop culture, the subscription-based channel is part of the larger Smithsonian network which focuses on the diffusion of knowledge through commercial-free programming. 


Background

Blue Ant Partnered with Smithsonian to bring the channel to Canada. The project began in October 2013, and was completed on November 13, 2013. With a little over a month for design and development, the objective was to design a responsive website marking the launch of the Smithsonian Channel in Canada.

Initially, Smithsonian was expecting a verbatim copy of their American site, with the addition of responsive elements. We were aware of a planned re-design for the smithsonianchannel.com website and knew there would be many changes in the coming months. To avoid the issue of creating a Canadian site that would be immediately outdated, we took a risk by presenting something different with a more high-end, modern design.

We set out to produce a visually stunning website that would celebrate the launch of the new channel. Our goal was to make the brand stand out from other premium television channels by using modern typography and dramatic imagery to showcase the extraordinary content being offered. 

Process

With the branding and overall colour palette pre-determined, re-envisioning the site meant intelligently paring down the existing site to essential information and reinterpreting the very strict guidelines for how the Smithsonian Channel brand should be treated online. We were given specifications for almost everything, including colour and font, page width, specific font-sizes for headlines, air times, descriptions, and even specific pixel dimensions for margins and spacing between elements. 

 

A sitemap was created that outlined the user flow and general functionality of the website including key navigation and information for each page template. We initially presented two concepts to the client: one that was exactly what they were expecting and one that wasn’t. The first concept was essentially a re-skinned version of their existing site. The second was a re-imagined site that focused on high impact images. Both followed the guidelines provided, however the second version with the larger images was more modern and premium-looking which ultimately helped it get approved.

 

 

Because the site needed to be responsive, the break points of the page needed to be considered at each stage of the design to ensure that the pages would work across various platforms. Starting with the initial design for desktop, simple changes were made to the layout to optimize the site for tablet and mobile. The guidelines that had been identified for the site were specific to the desktop format, which meant we had the opportunity to design a responsive framework according to our own grid. Adjustments to the type size on each page were made for maximum legibility on each screen-size and items on the page were shifted or hidden depending on the dimensions of the screen. On the homepage, this meant that the top navigation was collapsed into the menu button and the horizontal schedule organized into a single vertical column. 

 

 

Working closely with the development team and the Smithsonian team in New York meant the process moved very quickly. As soon as a page was designed and approved it went straight to development. With development happening parallel to the design process, the developers worked on the functionality of each page before CSS was introduced, then the style was applied to the already functioning page.

Once the pages were functional, we then worked back and forth between design and development to make sure the code matched the designs for each page. Finally, the website was tested across browsers before it went live.

Challenges

One of the challenges was taking an established brand and re-introducing it to a new audience. At first we were concerned that the client would resist the bold redesign in favour of their current website, but we showed them both options: one they were expecting and one they weren't. While option one met their expectations by repurposing the existing site with new content, the other presented a complete re-imagining with large, bold imagery. Because we had little over of a month, we needed approval almost right away, but by showing several pages of the more edgy design we were able to win them over and got approval to build the design.
 

 

Another challenge was that the site needed to be responsive, to look as good on a tablet and mobile screen as it did on a desktop. While responsiveness was taken into consideration during the design phase, the tight deadline meant there wasn’t enough time to fully customize the design of the site for each screen size. The solution was to work closely with the developers to optimize the way the content would fit on each screen as much as possible.

With regular additions of new shows and specials, the content would be constantly evolving, meaning the site needed to be scalable and easy to edit. Not being able to fully control the hero images post-launch, we implemented two text modes for the homepage; one with dark text for use on light images and the other with light text for dark images. To make implementing images site-wide as easy as possible, all the images on the site are the same aspect ratio, so that the same crop of an image will work throughout the entire site.

Result

The website looks high-end and modern and successfully celebrated the launch of the Smithsonian Channel in Canada. Within the month and a half we were given to produce smithsonianchannel.ca, we not only made a responsive website that highlighted the channel’s stunning content, but exceeded all client expectations.

Within the year that followed the launch of the Smithsonian Channel Canada, the website was used as the basis for the redesign of five other premium channel websites, each using the Smithsonian design as a starting point.

 

 

Designer Takeaways

  1. Don’t settle on the first design. Keep pushing until you find an innovative solution that both you and the client can be proud of.
  2. Thoroughly evaluate the project needs and limitations up front to make sure the final product fulfills all aspects of the brief. This will mitigate rework and save time overall.
  3. Be honest about what can realistically be achieved within your timeframe. Set realistic client expectations and don’t be afraid to push back when client demands threaten to delay the project and make your timeline unattainable.

 

Client Takeaways

  1. Find ways to consolidate feedback. Set up meetings with key stakeholders and anyone whose opinion might hold up approvals so that everyone who needs to comment has a chance to do so. Make sure to limit the amount of back and forth so that communication doesn’t get confusing.
  2. Share your design vision with your design team but remain open to improvements (after all, you hired them for their expertise).
  3. Provide any assets you might have that would help propel the project forward up front. This includes logos, fonts, images and any branding and background material that could be useful in communicating your brand.

 

Interested in submitting a case study to appear on the RGD website? Download 'Guidelines for Contributing Content' and email