jess3 featured in computer arts for foursquare i voted

30 Project one Interface design

Computer Arts Projects _September 2011 www.computerarts.co.uk

CAP153.feat_print2web.indd 30 7/26/11 10:51:00 AM

From brief to screen 31

Subscribe at www.myfavouritemagazines.co.uk/capp15 or see page 40 September 2011_ Computer Arts Projects

From brIeF to screen

Illus

trat

ion

Ho

rt

Could you turn a list of polling stations into an engaging design? What about creating a website from cardboard milk cartons or Lewis carroll-related artefacts? or designing a compelling visual that will get people excited about e-learning? turning a website brief into a client-pleasing design requires imagination, invention, and a detailed understanding of the client’s objectives and brand values. speaking to four creatives about these issues, all emphasised the importance of

establishing trust right from the start – clients with absolute confidence in their web design team may allow them a surprising amount of freedom. that said, the people you really need to understand are your users and just what will interest and engage them, whether you’re using parallax scrolling to visualise a brochure or producing a series of games about the health benefits of milk. turn the page to find out how four project teams managed to crack these creative conundrums.

How do you turn a creative brief into a winning website design? Anne Wollenberg gets the inside story on four exciting projects


01 Jenkins says: “the big challenge was that this site had to live up to the standards of the award-winning Got milk? campaigns. I started off by exploring interactive storytelling concepts. each game on the site champions a different health benefi t and provides a link to a massive amount of information, so I spent quite a bit of time thinking about how a user would experience this space. I didn’t want to create a site where it felt like you were either playing games or digging for information – it was really important to make sure the two weaved together seamlessly.”

02 Jenkins says: “Heath robinson’s wacky illustrations inspired us – they’re crazy contraptions that do very simple tasks, so there seemed to be a parallel there. the image of the milk carton itself was another inspiration, and we decided we wanted to create characters that felt like they’d been made out of milk cartons. We played with the properties of what a card-like environment could offer – ping a pig out of a cannon and if she misses, she crumples as she hits the ground, for example. We made characters and portions of scenes fl at-pack and sink into the fl oor. “

03 Jenkins says: “the key thing is not to just think about how best to leverage a brand, although that’s always there at the back of your mind, but to consider how best to encourage user interaction and strike a balance between effort and reward. so you need to add little things – win a game and you can download one of the characters, for example. that extra attention to detail is crucial. It’s an animation principle – you need to feel the human touches. Add what may seem like small details and they all add up to a fi nished, polished piece of work.”


ALeX JenKIns LeD A teAm oF DesIGners AnD DeVeLoPers At UnIt9 on A mIssIon to GIVe tHe cALIFornIA mILK Processor boArD’s GotmILK.com A sUPerHero FAceLIFt

01 overhauling the Got milk? site

DesIGnerAlex Jenkins, interactive art director

London-based freelance interactive art director and designer Alex Jenkins was previously interactive director at unit9. He has also worked as senior interactive director at b-reel and digital design director at Attik, working on projects and campaigns for brands including coca-cola, Virgin Active, Vodafone, Doritos and Adobe creative suite. www.alex-jenkins.co.uk

cLIentPaul Charney, creative director at Goodby, Silverstein & Partners

Paul charney studied at brown University and worked as a copywriter at several ad aganecies as well as founding californian arts organisation Killing my Lobster. charney joined the ad agency Goodby, silverstein & Partners, based in san Francisco, in 2006, and became associate creative director on the Got milk? project. www.goodbysilverstein.com

B R I E F :

Charney says: “there were a couple of levels to the original brief. Firstly, the previous website was pretty old. It was still in a basic HtmL format and was just behind the times. the Got milk? campaign knew where it was at strategically and creatively, so the brand site needed to be just as impressive.

the other key thing was the strategy itself – we were executing that milk is a super drink that does all these great things for you. It strengthens your hair, strengthens your teeth and prevents brittle bones. It also rebuilds your muscles, so it’s great after a workout.

bryan Houlette and I were the associate creative directors overseeing the team coming up with the strategy before developing the creative outlet for it. then unit9 brought a lot of the production and creative details to the table.”


1

2

3



Subscribe at www.myfavouritemagazines.co.uk/capp15 or see page 40 July 2011_ Computer Arts Projects

D E B R I E F :

Charney says: “the website is really approachable and defi nitely true to the Got milk? campaign. everyone did such a great job. It worked so well because it has the brand attributes. It’s a really accessible site. It’s wholesome without being boring, and it shows the power of creativity. It’s really fun and surprising, and as long as it can live up to those qualities then people will be engaged. I think it’s also really clear – it’s not too confusing or esoteric.

Websites can be closed-off and you can think: what am I here for, what am I doing? this one does a really good job. You see the milk cartons going through a conveyor belt – you click on something and get this little interactive experience that pops up about how milk helps rebuild muscles, so that’s why this little horse is on the treadmill and then drinks it.

our client had a lot of faith and trust in the strategy itself. It’s a longstanding relationship and we take that very seriously.”

Main imagethe fun yet informative site slotted in perfectly with the Got milk? campaign’s history and branding

September 2011_ Computer Arts Projects


01 Richards says: “Users are now familiar with interactive maps, so we wanted to use that knowledge and add a sense of discovery to the experience. the site needed to show 100,000-plus polling stations across the UsA, so the data visualisation on the map needed to work across different zoom levels. When the user zooms out to a national level they get an overview of check-ins by state, whereas if they enter their zip code they get the nearest polling station and number of check-ins. Deciding what to show at these levels so as not to create an incomplete experience was key.”

02 Richards says: “the custom map visual was both a creative and technical challenge – we were recreating the whole of the UsA. We decided to use open street map (osm) (www.openstreetmap.org) as the technical solution, and as a plus it also worked from a creative point of view. We downloaded the raw map data from osm and recreated it visually so it matched the rest of the site and could be matched for the rendering process. We then had to create 12 layers so the user could zoom in at different levels to view the information, allowing for streets and parks to be seen differently.”


WHen FoUrsQUAre WAnteD to tUrn Acres oF VotInG DAtA Into An InterActIVe WebsIte, tHeY eLecteD Jess3 to PUt tHem on tHe mAP

02 Foursquare’s election site

DesIGnerRobin Richards, director of information design at JESS3

born on st. Helena Island, robin richards studied in colchester, essex, before returning home and starting the only design business in a 1,500-mile radius. He moved to bristol in 2009 and focused on infographics at a new start-up before joining Jess3, where he works on projects ranging from infographics and data visualisation to developing user interfaces for web and mobile platforms.www.jess3.com

cLIentEric Friedman, director of business development at Foursquare

eric Friedman studied at George Washington University. before joining Foursquare, he worked at venture capital fi rm Union square Ventures and also spent three years at sem, seo and social media agency start-up reprise media. eric has combined his entrepreneurial interests and experience in product management, fi nance, marketing and account management in his current work.www.foursquare.com

B R I E F :

Friedman says: “the initial brief for the elections site was to encourage civic participation through awareness of voting locations. We wanted to show, in real time, where people were voting across the Us on an interactive, embeddable map.

It was meant to be both live on the Foursquare site, as well as that of anyone else who wanted to help people fi nd their nearest voting location, and show the activity on the day of the election.

Apart from showing check-ins, the site was also a resource for fi nding your local polling station, and we wanted to provide a high level overview of how the voting was going. so tracking the total number of check-ins, number of locations, the gender split and activity across the four time zones of the Us was essential. these were then presented as supporting features, allowing the map to focus on elements related to the individual check-in locations.”


1

3

2

03 Richards says: “We reduced the site down to its core functions to show the election through a Foursquare lens. All the elements needed to meet this goal and serve the data. If they did not, they were removed. We also needed to be sure that we presented the data in a clear and simple manner so that the average web user would understand it and wouldn’t have to work hard to comprehend what they were looking at. everything had to be clean and clear so that the user understood the design, making for a fun and enjoyable experience refl ecting the identity of Foursquare.”




D E B R I E F :

Friedman says: “the brief didn’t change much from the initial idea as we kept the concept simple. the site turned out better than we imagined it would and we were extremely happy with the result. Initially, it was just focused on displaying check-ins. As the goals of the website evolved, so did the concepts – incorporating civil actions like encouraging people to vote, along with capturing and showcasing some of the conversation buzz around the elections. While continuing to make the data the main focal point, the other elements were incorporated in a simple, clear manner that made for easy discovery.

We received word from people around the country, and the world, who would not have voted if they had not been pointed to the nearest location, and from those who were excited about us bringing them this information. by showing visually that every vote counts, we were able to inspire how people make a difference in an election.”

Main imagethe interactive map not only gave users information on who was voting where, but actively encouraged them to vote


01 Seccafi en says: “We wanted to tie all the programme information together in an interesting and fl uid way, and a single-page vertical scrolling layout seemed a very natural means of enhancing information that dealt with education and professional progression. We were very eager to create a site that differentiated moso’s program from others like it and promoted its innovative aspects, and we felt it would lend itself very well to bright colours and simple vector illustrations as well as using parallax scrolling. A more conservative website structure wouldn’t have communicated the level of innovation, creativity and layering of information that the UFbs programme is all about.”

02 Seccafi en says: “before we got too carried away with our illustrative ideas and elaborate scrolling techniques, we quickly ran everything by mcKegrey and Greg Judelman, moso’s design director, along with a mock-up of some ideas for background illustrations. Initially, we imagined the site following a more literal translation of the programme booklet, which had all the information condensed. After viewing our proof of concept, mcKegrey and Judelman fell in love with the idea and what was to be a four-page site ballooned into an 11-page Dr. seuss-inspired concotion of interactivity, business and art. After our concept was approved, we began producing the rest of the illustrations.”

03 Seccafi en says: “We then worked closely with Judelman to refi ne the typographic treatments, ensuring they were consistent with moso’s internal brand communications. He had a clear idea of what he wanted: bold and minimal, to contrast with the whimsical, playful illustrations, but not cold or conservative. the project took just two weeks from our fi rst contact with moso to the site being live and fully functional. there have been a few minor refi nements since then, mostly cross-browser compatibility tweaks as well as a few mobile browser issues, such as the iPhone and iPad interpreting the scrolling awkwardly. We had fun and are very proud of what we managed to accomplish.”



WHen toronto stArt-UP moso AsKeD cArtoGrAm to ‘WebIFY’ Its sALes brocHUre, tHe resULt WAs An IrreVerent concoctIon oF Dr. seUss-InsPIreD DesIGn

03 translating moso’s e-learning brochure

DesIGnerMatthew Seccafi en, founder of Cartogram Inc

matthew seccafi en is a web designer and developer with a passion for building long-lasting, accessible websites. He gained a bachelor of Design from the York University and sheridan college design programme in ontario, canada, and is based in toronto. His studio, cartogram, was formed in 2010 and is now a joint venture with his partner Fiona mcDougall – who also worked on the moso project. www.studiocartogram.com

cLIentRoss McKegney, chief operating offi cer at Moso

moso is a toronto-based start-up company aiming to build a social platform for innovation. business technologist and serial entrepreneur ross mcKegney has a decade of experience in areas such as enterprise management, product management, technical pre-sales and software r&D. He also teaches technology strategy at the University of ontario Institute of technology and is an advisor to several start-ups. www.moso.com

B R I E F :

McKegney says: “one of moso’s fi rst products is the Unfi nished business school (UFbs), a six-week hyperlocal training programme to teach managers the practical tools of business design. the impetus for the UFbs site was that the fi rst cohort of the school was about to launch, a beta with six corporate clients, and a sales tool to promote and explain the programme was needed. the site spec was initially to ‘webify’ our sales PDF, a four-page document explaining the course’s format, modules and faculty. We wanted the site to stand out and make it clear this was an innovative social learning experience. We needed something that would effectively communicate the details of our unique programme. the initial brief was very crude: boxes and arrow wireframes of the moso.com homepage and the UFbs landing page, and a reskinning of the moso blog. We prioritised UFbs, as that was the product we wanted to focus on selling, but it was part of a larger rebranding of the moso web presence.”

1

3

2




D E B R I E F :

McKegney says: “the fi nal site didn’t match the initial brief because what we asked for just wasn’t possible. the initial spec called for a site that matched the content structure of the course PDF – the intro, programme, and faculty. but then we realised that the information was far too dense, and we also started to see the incredible visual design talent cartogram brought to the table. the solution to the content density problem was to restructure the programme and faculty into six parallax scrolling ‘pages’, one per week. We chose to bump up the scope of the project and gave the team complete artistic freedom. We are extremely happy with the fi nished site. It communicates a fairly complex programme very effectively. beyond that, it differentiates moso and our UFbs from all the other related products on the market. this was a collaborative effort across companies – we got to where we did not from a cheques-and-balances process, but from a shared vision and unwavering trust in the team.”

Main imagethe UFbs site turned a two-dimensional PDF brochure into an exciting, interactive user experience


01 Actman says: “the brief was relatively open. callooh callay is a quirky place with a great deal of character and personality. We were inspired by the space itself, and were really keen on the idea of taking the experience of going for a drink in callooh callay and translating it in a visually interesting way. It’s a great little place with lots of interesting decor and hidden surprises. the name is taken from the Lewis carroll poem the Jabberwocky and it was very important that the design hinted at this sense of fun, fantasy and magic. “

02 Actman says: “our initial ideas were based on testing how much of this character we revealed and how much we alluded to without giving everything away. the various objects that make up the navigation bar, such as the gramophone and fl amingo, were things we found around the bar and photographed. there are a number of different wallpapers at callooh callay, and we liked the idea of using a different wallpaper pattern for the background of each page, but when we came to try it the visuals looked way too in-your-face, so that idea went in the bin.”

03 Actman says: “the design process was relatively smooth. once the time had been spent coming up with the overall concept, the rest of the process fell into place. Plenty of discussions early on in the design process ironed out any potential problems before they became issues. this project really highlighted how much easier and more enjoyable a trusting client can make the design process. once richard and Kate had seen our initial ideas and liked them, they gave us a lot freedom to take our design ideas wherever we felt was right.”

Computer Arts Projects _ www.computerarts.co.uk



mAt DoLPHIn Went tHroUGH tHe LooKInG GLAss to GIVe LeWIs cArroLL-InsPIreD LonDon bAr cALLooH cALLAY A WeIrD AnD WonDerFUL onLIne WonDerLAnD

04 creating a magical online home for callooh callay

DesIGnerTom Actman, creative director at Mat Dolphin

tom Actman is a multi-disciplinary creative director specialising in graphic design and art direction.He studied at ravensbourne college and is co-founder of London-based design agency mat Dolphin, whose clients also include Disney, Kodak, Heineken and sony. He worked with Phil cook, also creative director at mat Dolphin, on the callooh callay project.www.matdolphin.com

cLIentRichard Wynne, director of Callooh Callay bar

richard Wynne has worked in every element of the bar world for over a decade, from cellars and cocktails to waiting, in high street chains to boutique cocktail bars. co-director Kate crutchley previously launched an arts space in east London and organised product launches, gigs and parties before joining forces with Wynne to open callooh callay in november 2008. www.calloohcallaybar.com

B R I E F :

Wynne says: “this project was ‘version two’ of the callooh callay website. We approached mat Dolphin to do this because our old website simply wasn’t working hard enough for us. We wanted to create something that would really refl ect the personality of the bar, and give our customers a much clearer sense of what it’s actually like to go down the rabbit hole into callooh callay.

the other really important thing was that we needed to be able to update the website content ourselves. We have a lot to say, and our previous website didn’t allow us to get this information across. so we needed the ability to add a new menu or some information about a special event, for example, as and when we might want to.”

1

3

2




D E B R I E F :

Wynne says: “We love the site. mat Dolphin understood our brand and what we needed from the website. Ultimately, the studio ensured that the site worked for us – and it continues to work hard every day. the fl ow from page to page keeps a clear brand identity but also showcases the uniqueness of callooh callay and the fact that each room and page is a little discovery.

the website is better than we could have envisaged. We feel it perfectly combines great design with practicality, which is a rarity. our website is very informative, clear, concise and easy to navigate, but what makes it really special is that our landing page holds the key to everything. You can see what callooh callay is up to and join in through the social media updates and links, so you know who we are, what we do, when we are open and everything that’s coming up. “

Main imagethe site was inspired by the space itself and encaptured its quirkiness and sense of mystery


jess3 featured in computer arts for foursquare i voted

Design

design director

creative brief

website brief

founding director

interactive director

winning website design

engaging design

sitealex jenkins