In Part 1 of the Building RSAConference.com series, Robert covered the Strategy phase of the project – where discovery, planning and decision making takes place. In Part 2 of the Building RSAConference.com series, Marcel covered user testing – a key element of ensuring a good user experience. Today in Part 3, we'll share our creative process to establishing and designing the new look and feel of RSAConference.com.
RSA Conference's events are dynamic, fun, educational and intensely engaging. They are the go-to events for the security industry. The RSA Conference team wanted to not just improve the overall aesthetics of the site, but for it to exude the same fun and thought leadership that the live conferences offer. It needed to build the same excitement in conference goers leading up to the actual conference.
In our design kickoff, we helped the RSA Conference team identify the key goals the new design should serve:
- Clean, modern, and engaging look, but also allow each year's confernece theme to express its distinct visual style.
- Establish a visual style for each conference location, using and extending the existing brand.
- Support smartphones, tablets and desktops equally, using responsive design to create an accessible resource for attendees and security professionals.
Being that this is a conference website, it was important attendees could easily access it from their smartphone, tablet or desktop while attending the conference. Every visitor should get as much content, visual, and interactive richness as their browser can support, regardless of what device they happen to use.
We chose a responsive design approach to ensure that all visitors will get a complete experience, regardless of their device — but still optimized for that device, whether it be a desktop, phone or tablet.
We designed three fluid layouts (using CSS3 media queries) to ensure a pleasing and consistent experience across phones, mid-size tablets, large tablets and desktops. We paid close attention to text size, line length, download size and proximity of calls-to-action to ensure each layout delivers clear, readable, engaging content that loads quickly.
To establish a baseline of visual likes and dislikes, iMarc's creative team benchmarked various websites with the RSAConference.com team. Next, we created three distinct style tiles exploring different directions in font, color, and user interface elements that evolve RSA Conference's visual brand for the web.
Overview of a style tile's key elements:
Each conference needed its own identity within the site, so the iMarc team created branded cityscapes that used color and key land marks from each conference location to differentiate each conference and ground each page.
Bring it all together
With style tile providing direction and key visual elements defined, iMarc's creative team (with wireframes in hand) began designing the homepage. We find that starting with the homepage design is a great way to establish most of the major styles that will inform the rest of the pages.
Final design for RSAConference.com homepage
Explore the fruit of these labors at www.rsaconference.com.
# # #
Next week: Part 4: Engineering
So how do we turn all the planing, user testing, and design work into a working site? Next week, find out from our very own A-Team leader Jeff "Hannibal" Turcotte.