JESS3 was featured in the September 2011 issue of Computer Arts Projects for our work with foursquare for the 2010 Elections. Together, we visualized checkins to polling locations across the United States in real-time by leveraging Google and Pew's data (via Voting Information Project) and foursquare's platform + community.
Our client, Eric Friedman of foursquare, shares the background to the project and the brief, while our Director of Information Design, Robin Richards, shares our approach and the project's outcome.
JESS3 Featured in Computer Arts for foursquare I Voted
30 Project one Interface designComputer Arts Projects _September 2011 www.computerarts.co.uk
From brief to screen 31 From brIeF to screen How do you turn a creative brief into a winning website design? Anne Wollenberg gets Illustration Hort the inside story on four exciting projects Could you turn a list of polling stations into establishing trust right from the start – an engaging design? What about creating clients with absolute confidence in their a website from cardboard milk cartons or web design team may allow them a surprising Lewis carroll-related artefacts? or designing amount of freedom. that said, the people you a compelling visual that will get people really need to understand are your users and excited about e-learning? just what will interest and engage them, turning a website brief into a whether you’re using parallax scrolling to client-pleasing design requires imagination, visualise a brochure or producing a series invention, and a detailed understanding of of games about the health benefits of milk. the client’s objectives and brand values. turn the page to find out how speaking to four creatives about these four project teams managed to crack these issues, all emphasised the importance of creative conundrums.Subscribe at www.myfavouritemagazines.co.uk/capp15 or see page 40 September 2011_ Computer Arts Projects
32 Project one Interface design01 overhauling the Got milk? siteALeX JenKIns LeD A teAm oF DesIGners AnD DeVeLoPers At UnIt9 on A mIssIon to GIVetHe cALIFornIA mILK Processor boArD’s GotmILK.com A sUPerHero FAceLIFt 3cLIent DesIGner 1Paul Charney, Alex Jenkins,creative director at interactive artGoodby, Silverstein director& Partners London-based Paul charney studied freelance interactive artat brown University and director and designerworked as a copywriter Alex Jenkins wasat several ad aganecies previously interactiveas well as founding director at unit9. He hascalifornian arts also worked as seniororganisation Killing my interactive director atLobster. charney joined b-reel and digitalthe ad agency Goodby, design director at Attik,silverstein & Partners, working on projects andbased in san Francisco, campaigns for brandsin 2006, and became including coca-cola,associate creative Virgin Active, Vodafone,director on the Got Doritos and Adobemilk? project. www. creative suite. www.goodbysilverstein.com alex-jenkins.co.uk 2BRIEF: Charney says: “there were acouple of levels to the original brief. Firstly,the previous website was pretty old. It wasstill in a basic HtmL format and was justbehind the times. the Got milk? campaignknew where it was at strategically andcreatively, so the brand site needed to bejust as impressive. the other key thing was thestrategy itself – we were executing thatmilk is a super drink that does all these 01 Jenkins says: “the big 02 Jenkins says: “Heath 03 Jenkins says: “the key thinggreat things for you. It strengthens your hair, challenge was that this site had to live up robinson’s wacky illustrations inspired us is not to just think about how best to leveragestrengthens your teeth and prevents brittle to the standards of the award-winning Got – they’re crazy contraptions that do very a brand, although that’s always there at thebones. It also rebuilds your muscles, so it’s milk? campaigns. I started off by exploring simple tasks, so there seemed to be a parallel back of your mind, but to consider how bestgreat after a workout. interactive storytelling concepts. each game there. the image of the milk carton itself to encourage user interaction and strike a bryan Houlette and I were the on the site champions a different health was another inspiration, and we decided balance between effort and reward. so youassociate creative directors overseeing the benefit and provides a link to a massive we wanted to create characters that felt like need to add little things – win a game andteam coming up with the strategy before amount of information, so I spent quite a they’d been made out of milk cartons. We you can download one of the characters,developing the creative outlet for it. then bit of time thinking about how a user would played with the properties of what a card-like for example. that extra attention to detail isunit9 brought a lot of the production and experience this space. I didn’t want to create environment could offer – ping a pig out of a crucial. It’s an animation principle – you needcreative details to the table.” a site where it felt like you were either playing cannon and if she misses, she crumples as to feel the human touches. Add what may games or digging for information – it was she hits the ground, for example. We made seem like small details and they all add up really important to make sure the two characters and portions of scenes ﬂat-pack to a finished, polished piece of work.” weaved together seamlessly.” and sink into the ﬂoor. “Computer Arts Projects _September 2011 www.computerarts.co.uk
From brief to screen 33 DEBRIEF: Charney says: “the website is really approachable and definitely 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 image the fun yet informative site slotted in perfectly with the Got milk? campaign’s history and brandingSubscribe at www.myfavouritemagazines.co.uk/capp15 or see page 40 September 2011_ Computer Arts Projects July
34 Project one Interface design02 Foursquare’s election siteWHen FoUrsQUAre WAnteD to tUrn Acres oF VotInG DAtA Into An InterActIVeWebsIte, tHeY eLecteD Jess3 to PUt tHem on tHe mAP 3cLIent DesIGnerEric Friedman, Robin Richards,director of business director ofdevelopment at information designFoursquare at JESS3 eric Friedman studied born on st. Helenaat George Washington Island, robin richardsUniversity. before joining studied in colchester,Foursquare, he worked essex, before returningat venture capital firm home and starting theUnion square Ventures only design business in 2and also spent three a 1,500-mile radius. Heyears at sem, seo and moved to bristol in 2009social media agency and focused onstart-up reprise media. infographics at a neweric has combined start-up before joininghis entrepreneurial Jess3, where he worksinterests and on projects ranging fromexperience in product infographics and datamanagement, finance, visualisation tomarketing and account developing usermanagement in his interfaces for webcurrent work. and mobile platforms.www.foursquare.com www.jess3.comBRIEF: Friedman says: “the initial brieffor the elections site was to encourage civicparticipation through awareness of votinglocations. We wanted to show, in real time,where people were voting across the Us onan interactive, embeddable map. It was meant to be both live onthe Foursquare site, as well as that of anyone 1else who wanted to help people find their 01 Richards says: “Users are now 02 Richards says: “the custom 03 Richards says: “We reducednearest voting location, and show the activity familiar with interactive maps, so we wanted map visual was both a creative and technical the site down to its core functions to show theon the day of the election. to use that knowledge and add a sense of challenge – we were recreating the whole of election through a Foursquare lens. All the Apart from showing check-ins, the discovery to the experience. the site needed the UsA. We decided to use open street map elements needed to meet this goal and servesite was also a resource for finding your local to show 100,000-plus polling stations across (osm) (www.openstreetmap.org) as the the data. If they did not, they were removed.polling station, and we wanted to provide the UsA, so the data visualisation on the map technical solution, and as a plus it also We also needed to be sure that we presenteda high level overview of how the voting needed to work across different zoom levels. worked from a creative point of view. We the data in a clear and simple manner so thatwas going. so tracking the total number of When the user zooms out to a national level downloaded the raw map data from osm the average web user would understandcheck-ins, number of locations, the gender they get an overview of check-ins by state, and recreated it visually so it matched the it and wouldn’t have to work hard tosplit and activity across the four time zones whereas if they enter their zip code they get rest of the site and could be matched for the comprehend what they were looking at.of the Us was essential. these were then the nearest polling station and number of rendering process. We then had to create 12 everything had to be clean and clear so thatpresented as supporting features, allowing check-ins. Deciding what to show at these layers so the user could zoom in at different the user understood the design, making forthe map to focus on elements related to the levels so as not to create an incomplete levels to view the information, allowing for a fun and enjoyable experience reﬂectingindividual check-in locations.” experience was key.” streets and parks to be seen differently.” the identity of Foursquare.”Computer Arts Projects _September 2011 www.computerarts.co.uk
From brief to screen 35 DEBRIEF: 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 image the interactive map not only gave users information on who was voting where, but actively encouraged them to voteSubscribe at www.myfavouritemagazines.co.uk/capp15 or see page 40 September 2011_ Computer Arts Projects
36 Project one Interface design03 translating moso’s e-learning brochureWHen toronto stArt-UP moso AsKeD cArtoGrAm to ‘WebIFY’ Its sALes brocHUre,tHe resULt WAs An IrreVerent concoctIon oF Dr. seUss-InsPIreD DesIGn 2cLIent DesIGnerRoss McKegney, Matthew Seccaﬁen,chief operating founder ofofﬁcer at Moso Cartogram Inc moso is a toronto- matthew seccafienbased start-up is a web designer andcompany aiming to developer with abuild a social platform passion for buildingfor innovation. business long-lasting, accessibletechnologist and serial websites. He gained aentrepreneur ross bachelor of Design frommcKegney has a decade the York University andof experience in areas sheridan college designsuch as enterprise programme in ontario,management, product canada, and is basedmanagement, technical in toronto. His studio,pre-sales and software cartogram, was formedr&D. He also teaches in 2010 and is nowtechnology strategy at a joint venture with 1 01 Seccaﬁen says: “We wanted tothe University of ontario his partner Fiona tie all the programme information together inInstitute of technology mcDougall – who an interesting and ﬂuid way, and a single-pageand is an advisor to also worked on theseveral start-ups. moso project. www. vertical scrolling layout seemed a very naturalwww.moso.com studiocartogram.com means of enhancing information that dealt with education and professional progression. We were very eager to create a site thatBRIEF: differentiated moso’s program from others like it and promoted its innovative aspects, McKegney says: “one of moso’s and we felt it would lend itself very well tofirst products is the Unfinished business bright colours and simple vector illustrationsschool (UFbs), a six-week hyperlocal training as well as using parallax scrolling. A moreprogramme to teach managers the practical conservative website structure wouldn’ttools of business design. the impetus for the have communicated the level of innovation,UFbs site was that the first cohort of the creativity and layering of information thatschool was about to launch, a beta with six the UFbs programme is all about.”corporate clients, and a sales tool to promoteand explain the programme was needed. 02 Seccaﬁen says: “before we got 03 Seccaﬁen says: “We then the site spec was initially to too carried away with our illustrative ideas and worked closely with Judelman to refine the 3‘webify’ our sales PDF, a four-page document elaborate scrolling techniques, we quickly ran typographic treatments, ensuring they wereexplaining the course’s format, modules and everything by mcKegrey and Greg Judelman, consistent with moso’s internal brandfaculty. We wanted the site to stand out and moso’s design director, along with a mock-up communications. He had a clear idea of whatmake it clear this was an innovative social of some ideas for background illustrations. he wanted: bold and minimal, to contrast withlearning experience. We needed something Initially, we imagined the site following a more the whimsical, playful illustrations, but notthat would effectively communicate the literal translation of the programme booklet, cold or conservative. the project took just twodetails of our unique programme. which had all the information condensed. weeks from our first contact with moso to the the initial brief was very crude: After viewing our proof of concept, mcKegrey site being live and fully functional. there haveboxes and arrow wireframes of the moso.com and Judelman fell in love with the idea and been a few minor refinements since then,homepage and the UFbs landing page, and what was to be a four-page site ballooned into mostly cross-browser compatibility tweaksa reskinning of the moso blog. We prioritised an 11-page Dr. seuss-inspired concotion as well as a few mobile browser issues, suchUFbs, as that was the product we wanted to of interactivity, business and art. After our as the iPhone and iPad interpreting thefocus on selling, but it was part of a larger concept was approved, we began producing scrolling awkwardly. We had fun and are veryrebranding of the moso web presence.” the rest of the illustrations.” proud of what we managed to accomplish.”Computer Arts Projects _September 2011 www.computerarts.co.uk
From brief to screen 37 DEBRIEF: McKegney says: “the final 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 finished 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 image the UFbs site turned a two-dimensional PDF brochure into an exciting, interactive user experienceSubscribe at www.myfavouritemagazines.co.uk/capp15 or see page 40 September 2011_ Computer Arts Projects
38 Project one Interface design04 creating a magical online home for callooh callaymAt DoLPHIn Went tHroUGH tHe LooKInG GLAss to GIVe LeWIs cArroLL-InsPIreDLonDon bAr cALLooH cALLAY A WeIrD AnD WonDerFUL onLIne WonDerLAnD 3 2cLIent DesIGnerRichard Wynne, Tom Actman,director of Callooh creative directorCallay bar at Mat Dolphin richard Wynne has tom Actman is aworked in every element multi-disciplinaryof the bar world for over creative directora decade, from cellars specialising in graphicand cocktails to waiting, design and art direction.in high street chains to He studied atboutique cocktail bars. ravensbourne collegeco-director Kate and is co-founder ofcrutchley previously London-based designlaunched an arts space agency mat Dolphin,in east London and whose clients alsoorganised product include Disney, Kodak,launches, gigs and Heineken and sony. Heparties before joining worked with Phil cook,forces with Wynne to also creative director atopen callooh callay in mat Dolphin, on thenovember 2008. www. callooh callay project.calloohcallaybar.com www.matdolphin.comBRIEF: Wynne says: “this project was‘version two’ of the callooh callay website.We approached mat Dolphin to do thisbecause our old website simply wasn’tworking hard enough for us. We wanted tocreate something that would really reﬂect thepersonality of the bar, and give our customersa much clearer sense of what it’s actually liketo go down the rabbit hole into callooh callay. 01 Actman says: “the brief was 02 Actman says: “our initial 03 Actman says: “the design the other really important thing relatively open. callooh callay is a quirky ideas were based on testing how much of process was relatively smooth. once the timewas that we needed to be able to update the place with a great deal of character and this character we revealed and how much had been spent coming up with the overallwebsite content ourselves. We have a lot to 1 personality. We were inspired by the space we alluded to without giving everything concept, the rest of the process fell intosay, and our previous website didn’t allow us itself, and were really keen on the idea of away. the various objects that make up the place. Plenty of discussions early on in theto get this information across. so we needed taking the experience of going for a drink in navigation bar, such as the gramophone and design process ironed out any potentialthe ability to add a new menu or some callooh callay and translating it in a visually ﬂamingo, were things we found around the problems before they became issues. thisinformation about a special event, for interesting way. It’s a great little place bar and photographed. there are a number project really highlighted how much easierexample, as and when we might want to.” with lots of interesting decor and hidden of different wallpapers at callooh callay, and more enjoyable a trusting client can surprises. the name is taken from the Lewis and we liked the idea of using a different make the design process. once richard carroll poem the Jabberwocky and it was wallpaper pattern for the background of each and Kate had seen our initial ideas and liked very important that the design hinted at this page, but when we came to try it the visuals them, they gave us a lot freedom to take our sense of fun, fantasy and magic. “ looked way too in-your-face, so that idea design ideas wherever we felt was right.” went in the bin.”Computer Arts Projects _ _September 2011 www.computerarts.co.uk
From brief to screen 39 DEBRIEF: 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 ﬂ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 image the site was inspired by the space itself and encaptured its quirkiness and sense of mysterySubscribe at www.myfavouritemagazines.co.uk/capp15 or see page 40 September 2011_ Computer Arts Projects