An Event Apart Relaunches–New Design, New Features

On Saturday, December 1st, 2012, An Event Apart quietly relaunched its website. You’re soaking in it. Some of the new site’s goals as articulated by the AEA client team would show up on the checklist of pretty much any site redesign: make it easier to use, enhance readability and remove clutter, shore up existing features and introduce new ones, and (most importantly) make it work well across a wide variety of networked devices. But there was more.

Goals and challenges

From the service front lines, An Event Apart’s Marci Eversole has long fielded phone calls from potential attendees who’ve had problems understanding the site, or using it to secure needed content. From unclear navigation labels to holes in our content strategy: if the site failed to fulfill a need, Marci has heard about it. The site redesign would need to solve these problems. Addressing them provided our initial UX and content strategy road map.

A new way was also needed to present cities and shows on the home page. In the site’s initial design by Jason Santa Maria, An Event Apart was a fledgling conference, hosting only a handful of events per year. The design was crafted for a business model that AEA quickly outgrew. 

Even when Jeffrey Zeldman subsequently redesigned the site, AEA held four events annually, and the site’s fixed-width layout was optimized for that occurence as if it were a permanent condition. But AEA hosted seven events in 2012 and will run eight in 2013. The old grid, and the old way of showing events on the home page, needed a rethink. Contingency design and extensibility couldn’t just be something we preached; it had to be baked into the redesign, from concept to back-end implementation.

Two other goals of this site relaunch were more ambitious: 1.) become a destination site rather than simply a place to announce conference dates and sell tickets; and 2.) evolve An Event Apart’s brand, separating it from parent brand A List Apart and literary sibling A Book Apart.

Monkey Do Did

As partners in the site relaunch we chose Monkey Do, a small and super-smart NYC web design and development studio. Monkey Do’s motto, “Standards Driven, User Focused, Content Is King” accords with our way of thinking; we’ve long admired their projects (including HTML5 Reset) and client work; they’ve collaborated beautifully with Happy Cog on several projects; and one of us shares studio space with them, which meant that Monkey Do and An Event Apart could be in constant contact throughout the redesign. Not every agency and client can work in the same space, of course. But when personalities and work styles allow for it, this kind of constantly simmering collaboration can be a beautiful thing.

To showcase multiple events on the site’s front page and accommodate more or fewer events each year without requiring a redesign, Monkey Do created a responsive carousel that expands and contracts elegantly as the page is resized (or as new events are added). The carousel disappears on smaller screens, where it is replaced by a more straightforward presentation in a single or double column, depending on the width of the viewing screen. (The carousel also contains Easter Eggs, but we won’t spoil the surprise by describing them.)

Monkey Do developer Tim Murtaugh powered the responsive/disappearing carousel and addressed all our other content-first, multi-device usability concerns via RESS (Responsive Design + Server Side Components). Among other things, the RESS approach enables the responsive carousel to appear or disappear without forcing users of small networked devices to download components they won’t use.

Content First

Monkey Do designer Mike Pick began his brand update by modernizing and beefing up the typography on the AEA logo, walking away from the classical and literary qualities of the parent A List Apart brand, and choosing a typeface more commensurate with a multi-device conference. As Jason Santa Maria had previously done on the A Book Apart brand, Mike also changed the look of the AEA wreath bug. Where ALA, AEA, and ABA once shared the same typeface and the same wreath bug, now each brand has its own typographic flavor and its own wreath. (More will be evident when A List Apart relaunches in January.)

To update the brand and site experience, Mike threw out prior assumptions and dated elements (such as the once-mandatory sidebar) and focused on content first—designing a site that was not only easy but also pleasurable to read. Big type and strong visuals brought interest and readability to templates that had once been mere copy shells.

Take a typical News or video page. Because AEA was initially conceived as a place to advertise event dates and sell tickets, the design of our content pages got short shrift. Even when we began trying to turn AEA into more of a destination site by posting hour-long videos of some of our finest speakers delivering some of their best presentations, the traditional blog page template of our old site disinvited readability and fought our goal of turning AEA into an educational resource you can turn to and come back to. With big type and plenty of breathing room, big images and plenty of relevant content to view next, the new design finally gives us a platform to make AEA’s site as educational and fun as the events themselves. (Well, almost.) The new pages are also fun to play with on a desktop, using the old responsive drag-and-view.

The design team also reminagined how schedules and other information are presented on event pages (take Atlanta for instance) and what footers are good for (among other things, photo credits).

More to come

Please note: This is a site relaunch, not a shopping cart relaunch. The shopping cart runs on a different custom system created by Kevin Skoglund’s development firm Nova Fabrica. While the new site and the shopping cart have been integrated in terms of function, the shopping cart does not yet sport the new site’s look and feel, as you will surely notice if you shop for tickets in the next few weeks. Patience, Grasshopper.

Mike and Tim are writing articles to describe their design and technical challenges in greater detail, so although we could gush on, we’ll put a cork in this write-up for now. We hope you like the new AEA site. Let us know what you think by contacting us or via the Twitters and Facebook

Credits

Clients: Marci Eversole, Toby Malina, Eric Meyer, Jeffrey Zeldman. Structural Advisor: Eric Meyer.  Designer: Mike Pick. Developer: Tim Murtaugh. Creative Directors: Mike Pick, Tim Murtaugh, Jeffrey Zeldman.

The new site is powered by ExpressionEngine with mag wheels and custom leather interior.  HTML5, CSS3, JavaScript and JQuery spoken here. Tell your friends if you like us, tell us if you find a bug.