writing » new media design in canada
Changes in the marketplace have meant changes in the way designers now approach new media projects. Applied Arts hit the wires to ferret out the best in Canadian web design. Four stellar efforts are featured here.
The last year has not been kind to the dot com world, with across the board job purges in both pure play internet firms and also in the vast number of support companies that grew up around them. This has caused a sea change in the way web design is conducted Initially people who created web pages were Jacks of all trades, and quite often they were masters of none. They were expected to be illustrators and graphic designers, software interface experts, programmers, marketing gurus and project managers — all the while producing for an audience and a stage whose technical attributes were diverse and constantly shifting. Web design has become far more specialized in recent days. People who create pages have realized they need to focus on a core set of skills and excel at those — when they are faced with problems beyond those skills they look to collaborate with work colleagues or specialty shops to solve them. The days of the general web practitioner are almost over. Most projects now have creative or artistic leaders, user interface designers, page layout coders, programmers and developers, content creators, Flash designers, database engineers, network administrators and project managers. If you don't have the talent on staff you outsource it to a specialist, much as your doctor will send you to a podiatrist for that nagging foot cramp you keep complaining about — the doctor is at a loss, and needs to call in the experts. Hand in hand with this has been the evolution of the “client” — those who want web presences have become more and more educated and demanding. They want measurable results. Marketers want to see quantifiable success from their web efforts, e-commerce sites need user interfaces that improve sales. Web sites that are pure marketing vehicles are more tightly bound into overall traditional campaigns — often supported by outdoor, print and television creative. New tools and methodologies for measuring, qualifying and quantifying web audiences has put demands on page creators to tightly target their designs and ideas to preferred demographics and desired user activities. The web is the most measurable communication medium, and this has created challenges for designers, as they can tell what works and doesn't work almost immediately. There is an old advertising maxim that you waste half your money on advertising, you just don't know which half. Well, the web is increasingly able to show you which half. With the advent of tracking technologies such as cookies, with instantaneous user feedback mechanisms, and with new tools to examine the footprints of visitors (the humble web server log), site builders can now watch (often in real time) how people use their creations. If you want to get into the business — or want to rise quickly through it — pick a niche and become a master of it. Current areas in great demand are Flash designers (Macromedia's vector based web application), user interface experts, HTML and page layout gurus, and as always, programmers with an artistic bent. No longer is a knack for Photoshop noodling and a facility with an HTML code editor going to guarantee you success. The programs and tools used to create web pages have become complex, and the myriad of issues surrounding the serving of sites and the different compatibilities of end users' computers causes even seasoned web veterans to tear their hair out on a regular basis. What constitutes a successful web project? Certainly a happy client helps. Page views and traffic are still a good benchmark. If you're an e-commerce site growing sales and good customer feedback are an excellent sign. If you can accomplish these goals and still have something that looks good and functions well under the mouse of your audience, than you have achieved something stellar. Applied Arts hit the wires in Canada to ferret out good examples of these principles in action, and we give you four case studies here of exemplary and diverse work being produced and mounted in Canada. THE SITES SITE: ORAGE (riderstemple.orageski.com) The client is Orage, a clothing and “attitude” producer. The clothing and accessories are for snow boarders and snow boarding wannabees. The site opens literally with kinetic imagery (Orage splash screen) as Javascript is used to shake the screen — almost as much as a gnarly wipeout would shake your cranium. “The concept behind the piece is to first sell a culture, an image to riders, secondly, of course is to sell the clothing”, says Daniel Fortin — Creative Director of Montreal's Époxy the firm who created the site, launched in January of this year. Pounding original music accompanies your surf around Orage, supplied by Montreal hardcore band Carving Stone. The interface (Orage Interface) is a nifty left to right scroll (as opposed to the usual north-south orientation) showing professional Canadian boarders against a shifting mountain backdrop illustration replete with lightning flashes and eerie music As your mouse passes over the riders, short bios come up and a click reveals more information and the ability to view photos and videos of your heroes in action. The photography (Orage Photo), illustration (Orage splash screen), and animated bits on this site are strongly rendered, with gorgeous mountain photography and irreverent rider portraits. The visual, aural and aesthetic impact of this site is perfect for the audience it is targeting. The site is marketed on the hills and in the shops and clubs where snow boarders hang out. Orage also uses the riders themselves to pitch the pages, and wear the clothes. Snow boarding and the web seem to be a natural fit. “The client is extremely happy, and they think that the web site accomplished their goals. We were targeting the youth market, the riders of new school — and from the first day we have been receiving lots of hits”, says Fortin of the new breed of young fashion conscious boarders with expendable income, who like to go fast, do tricks and party hard. All in all the site is a thrilling shred, but we'll leave the last word to boarder Rory Will, quoted on the site, who says in the parlance of his tribe, “Orage has clothes you can rock on the mountain, or at the party that night to celebrate what you did in the park. And, they will help you get more chicks.” SITE: GROCERY GATEWAY (www.grocerygateway.com), DESIGN: Armantus and Stephen Tallevi Director, Web Grocery Gateway, BRANDING: Garneau Würstlin Philp Brand Engineering For those who live in the greater Toronto area it is hard to miss web grocery retailer GroceryGateway. Every where you look you see a billboard (Grocery Billboard) or a piece of outdoor creative, and their delivery vans are ubiquitous. Users of the web site will find an efficient, well planned and attractive user interface. The site was first designed and programmed in a beta version by GG's Stephen Tallevi the Web Director, in Visual Basic (VB), a programming language that allows for rapid prototyping, but is difficult to bring to the web because of scalability challenges. Toronto design firm Armantus was hired to “refine the shopping interface and to enhance the new corporate image”, says Tallevi. “Armantus' job was a delicate balance between introducing significant site design improvements, while at the same time minimizing any disruption for our existing customers — the collaboration works extremely well. Armantus focuses on understanding our corporate and our customer needs, and only then do they use technology to address problems, build our brand, and help create an easier and more enjoyable shopping experience.” (Grocery Main) The site is now served with ASP technology (Active Server Pages) a web hybrid of VB, which allowed Armantus to leverage a lot of the architecture and logic Tallevi created. The interface is built around grocery store metaphors, with aisles and carts. “Storefront” and “shopping cart” metaphors are very prevalent on the web, but are rarely actualized with any success. Users often become frustrated finding products on e-commerce sites, and checking out is often fraught with problems. A Jupiter Communications study last year found that over 65% of potential customers abandon web purchases because of problems with the site's interface or payment screens. GG's shopping (Grocery Shopping) and checkout is simple and painless, and they have the advantage of letting users choose to pay when the groceries are delivered to their home, easing many customer's concerns about using their credit cards online. “The interface is designed to reduce the time and effort required to buy groceries. Most of our consumers shop our site by browsing our aisles (Grocery Shopping), as they do in a physical store. Our interface design accommodates this behaviour, by ensuring that aisle and category filters are always visible, with listings arranged in short, vertical tables for easy scanning”, says Tallevi. The site also has an excellent search engine should you wish to zero in on a product. Tallevi grows and refines the user experience through various mechanisms. “We use customer feedback by email, focus groups, usability studies, and on-line consumer shopping behaviour data provided by food manufactures and research firms to modify the site”, he says. Grocery Gateway also draws on a strong branding image based on the corporate icon of delivery guy Jim (created by branding specialists Garneau Würstlin Philp Brand Engineering) “Jim's illustration style is reminiscent of service-oriented businesses in the 40's and 50's. This helps link the brand to a high standard of service, which consumers usually think of as a thing of the past. This standard of service is captured in the character of the brand — earnest, committed, focused, modest, energetic, and eager to please”, says Tallevi. SITE: CLUB SOLO www.clubsolo.com
DESIGN: DIESEL
Phillipe Meunier Creative Director ClubSolo.com is a marketing piece for mobile phone service mounted last year by Bell Mobility. The Solo branding is widely promoted with catchy point of sale displays featuring the handset in silver canisters. Club Solo (Solo Main) is an extension of this effort meant to focus on a cheap rate promotion targeting 18-35 upwardly mobile and trendy urban adults — the holy grail of advertisers. Created by Montreal designers Diesel, the Club Solo website was part of an overall marketing blitz that included outdoor and other traditional promotion, and even the creation of magnets which were stuck to cars in club and bar districts where the demographic was known to play. Much of the promotion of Club Solo was concentrated to downtown Toronto. “The Solo brand is stronger in Toronto than Montreal so most of the marketing of the site was done there”, says Diesel's Creative Director Phillipe Meunier. The site's jewel is an interactive video piece set in a bar, where the male of the species attempts to pick up a female by sending her a phone and a drink. Users are encouraged to flip a digital coin to determine the outcome of our hero's attempts and several endings to the scenario are possible. The movie/game is visually stunning and unique on the web, which usually presents video that is either postage stamp sized, choppy, or both. The video (Solo Movie Solo Movie1) was shot in a studio against a white background with a regular hand held digital camera set on high contrast. The file was then dumped frame by frame into Photoshop where the contrast was boosted even higher, vectorized and dumped into a Flash presentation. The effect is a very stylized, sexy and reasonably fast loading movie. The whole project was on an accelerated timeline. “Cossette did an original website for Solo, but I don't think they understood the brand as well. The client came to us and said ‘Can you do something funky and sexy for us?’ The site was built in 3 1/2 weeks, from concept to execution — that's really fast. The story boarding and shooting of the movie, digitizing it, working up the flash container to hold it, writing and recording the soundtrack — we had to hire in some people to help because of the timelines” says Meunier. The site works in one way because of what is called viral marketing — the target audience is drawn to the piece, and then tells their friends to check it out — everyone plays the game and tries to find the different endings. “It's getting lots of hits, but for me more impressive aspect is that users are staying for 20 minutes or more — they're watching the video and playing the game a few times, and then they e-mail their friends to check it out. I think it works as a promotional thing because it is fun and edgy, and people talk it up”, says Meunier. SITE: FLOW935.COM www.flow935.com/ When the CRTC awarded an FM radio license in Toronto to Milestone communications it ended a frustrating 12 year wait. Canada's largest radio market had been without a true voice for black music (Rap, Hip-Hop, Reggae), and Milestone had been lobbying, fighting, and pitching for one every time a license came up. FLOW93.5 launched early this year — and of course it has a cracking web site to complement it. Milestone Radio approached Toronto design firm TAXI early in November of 2000 to build both the website and the brand for the new radio station, with tasty results. The station is also heavily marketed with outdoor (Flow billboard), television and print campaigns — and there are stickers and posters everywhere you look in Toronto, featuring the catchy branding, particularly the bouncing head, which is a old vinyl record with a face in the middle — the black vinyl looking like an afro. This image is available as a screen saver, which can be downloaded from the site (Flow downloads). “The brand experience is about urban, from the streets. It is also about the music beginning with Reggae, Hip Hop and R&B. The creative is replicated across communication medium including the web resulting in a consistent brand experience” says John Stevenson, Taxi's Interactive Strategist. The site starts with an impressive Flash introduction, and a simple but effective interface (Flow main). The main metaphor is the LP record, and the main purpose of the site is to get the user to listen to the music. You can popup a small window (Flow Console), which will connect to servers that will play the station's music. You can surf around anywhere on the web while listening to the cool urban sounds of FLOW93.5. The hardest part of creating this site was figuring out the audio aspect according to Stevenson. “Finding a streaming broadcaster was the most challenging part of this project. The big players — MCI Worldcom and UUNet — don't offer the kind of services we needed, although they both kept saying that they were just about to. We ended up with NetVuLive who have been a great supporter of the station.” The site works as part of an integrated communication strategy, and the visual and audible aesthetics of the site help get the message out to a potential audience online — Milestone is extending it's relationship with Taxi beyond this product launch, and that should insure cohesive marketing efforts continue to support the station as it gets off the ground.
DESIGNER: ÉPOXY, Daniel Fortin — Creative Director
DESIGNER: TAXI John Stevenson Interactive Strategist
