We have just wrapped on a video shoot here around iMarc East's office and thought, since celebrities leak photos of themselves, we could give you all a peak at some behind the camera shots. We had a blast working with Off The Front Productions on this video and can't wait to share it with you all soon. Stay tuned!
Some of us obviously had more beautifucation needs than others and were good sports about getting makeup applied for their cameo. Yes that beard is real, I swear.
When we were out filming on Inn street, some pedestrains passing by asked if we were filming an episode of cupcake wars (there is a cupcake shop next door to our office) or a new Mark Wahlberg movie.
Action shots compliments of Tim Gurczak.
Previously in the Building RSAConference.com series, we showed some of the Strategy, User Testing and Creative phases. In part 4, we will be forging ahead with the a focus on the technology; the tools engineered to ensure a great experience for both visitors and the administrative team of RSAConference.com.
Very early in the process it was determined that RSAConference.com would best be suited to a Custom CMS on an Open Source Platform. Custom because they had a lot of structured data that was specifically tailored to the management of their events, and open source because they needed a tool with zero lock-in which can be augmented and enhanced easily as needs change from year to year. With this approach, we could also ensure that all components were up to the high security standard that is is critical to the RSA Conference brand.
Since the RSA Conference CMS was built specifically for their problem set, the RSA Conference administrative team can use a workflow tailored to them, as opposed to forcing their workflow into a generic product.
Some highlights of the tools that RSA Conference has at their disposal are:
Allows the admin to create and edit any page on the site, either through a simple WYSIWYG editor or free-form HTML (if somebody is so inclined). Structured data, such as Upcoming Events or a list of Top Event Sponsors, can be placed within pages, making it dead-simple to incorporate data managed through another tool. This means RSA Conference administrators can make a single update to conference metadata, and have it cascade site-wide throughout all their pages.
Admins can manage all Conference meta data including Sessions, Speakers, Sponsors, and many more. As an international conference, they work with a multitude of registration vendors, so this gives them a lot of flexibility moving forward. The registration vendors can focus on the actual registration process, while RSA Conference can maintain control over how attendees and potential attendees explore the conference information, giving a much more consistent user experience and in turn solidifying their brand.
The custom CMS gives RSA Conference full control over the homepage hero element (otherwise known as the splash banner), making it a very powerful promotional tool. The RSA Conference team can make the week to week changes that they require without the need to call on a designer or developer. That said, the tool is flexible enough to give a designer plenty of leeway to make a splash if necessary.
Blogs are huge part of the new RSAConference site. With a large number of guest bloggers keeping content fresh, we created specific blog author access levels to the CMS, allowing RSA Conference fine grained control over who can post what, when, and where. The administrative area allows RSA Conference to manage drafts and versions, manage guest blogger logins, and review and approve guest blogs.
We also deployed LiveFyre LiveComments to lower the barrier to entry to participate in discussions and share content.
The RSA Conference team had a lot of content for their audience. A major goal of the site was to make it an up-to-date content repository of session videos, podcasts, and presentations to keep people coming back. We put custom tools in place to manage all of these different kinds of content, link them to their respective conference metadata, and integrate with RSA Conference’s CDN(s) of choice.
Deployment and updates
Our server team took the finished site and deployed it to a multi-server cloud setup to handle the ever-growing traffic requirements. iMarc’s code deployment system gives RSA Conference no-downtime updates.
Post-launch, with the collaboration of the RSA Conference team, we are reviewing analytics, doing performance tweaks, and continually ensuring that RSAConference.com is the product that will work the way they desire and best represent what they do.
See you at RSA Conference!
# # #
Learn more about iMarc’s engineering practices and standards in our Handbook, and explore some of our Open Source projects and tools at github.com/imarc.
Interested in working with the iMarc team? See current opportunities at imarc.net/hiring.
Missed the earlier parts of the series?
- Building RSAConference.com: Part 1 of 4: Strategy
- Building RSAConference.com: Part 2 of 4: User Testing
- Building RSAConference.com: Part 3 of 4: The Creative Process
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.
# # #
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.
In Part 1 of the Building RSAConference.com series, Robert covered the Strategy phase of the project – where copious planning and decision making takes place. Here in Part 2, we will forge ahead with a focus on the user experience.
The RSA Conference team was concerned about the experience their users were having while using the website. Content was deeply buried and lacked focus, account management tasks were cumbersome, and the site was not device-agnostic. What steps would we take to get actual users involved in the redesign?
After collaborating with the RSA Conference team on site maps and wireframes, we needed to take that extra step to ensure the new web experience aligned with what users expected. So iMarc and RSA Conference conducted live usability sessions onsite at RSA Conference 2013 in San Francisco, CA.
Our usability sessions were divided into two activities:
- Tasked-based analysis via clickable prototype
- Card sorting
Tasked-based analysis via clickable prototype
We converted our wireframes from static files to clickable HTML prototypes. Over 30 minutes, we assigned our participants a number of tasks to complete. These tasks related directly to project goals and pain points. Our usability participants all nailed it.
One of the most important elements of a productive usability session is “thinking out loud”. The more we can get the participant to vocalize their thoughts as they try to complete a task, the better. We received plenty of feedback during task-based analysis.
Our testers showed some unexpected behaviors. For example, we discovered that the dropdown navigation menus were heavily used to explore the site (which we expected), but some testers used the homepage “hero” banner’s links as navigation and ignored the menus completely! But overall, the testers found the new layout and menus to be fast and easy to use, and offered positive feedback.
Tip: always record the screen/audio (with permission, of course) if possible. No matter how thorough a notetaker you are, you will miss something. We used Camtasia with Samson Go Mics.
With our audio still recording, we moved to some physical card sorting exercises. Card sorting, as Robert mentioned in Part 1 of this series, yields insight not only in the final layout of the cards, but along the way. Again, our participants nailed this exercise. All vocalized their thought process as they arranged their cards on the table.
This exercise is especially useful for the “color” it gives to the data, especially compared to the surveys conducted earlier. We learn not just what, but why. For example, most of our participants told us they prefer slide presentations because they are quick to read and easy to share. But a few strongly preferred podcasts because they can listen to them during a commute or at the gym.
Conducting these usability sessions helped us make informed decisions. We made some final tweaks to our site map and wireframe documents that really strengthened them — and in turn, a more focused design and a better user experience.
# # #
Want to know more about iMarc's UX practices? Check out our Handbook, which documents our processes and deliverables. We've published it under the Creative Commons 2.0 (BY-SA) license, so you are welcome to borrow from it.
We just took the cover off a project that has been under wraps for a while now… a complete re-design of the leading security industry conference's website, rsaconference.com!
In the coming weeks on the iMarc blog, you'll be reading more about how the new site was planned, tested, designed, and built.
Before starting part 1 of the 4-part series on building RSAconference.com, I’ll let our project sponsor speak for himself:
“RSA® Conference helps drive the global information security agenda and provides a 360-degree view of the security industry. We selected iMarc as our partner to redesign the RSA Conference site to drive registration, engage users year-round, and better promote our online content. Through great collaboration the team excelled and delivered an exceptional, user-centric and responsive site, optimized for mobile devices.”
—Craig Hansen, Senior Web Technology Manager
So how do you redesign the face of the conference, with dozens of content contributors, outside vendors and service providers, multiple points of technical integration, stringent uptime requirements, and a long-established brand identity that must be adapted into a responsive, mobile-friendly design? And oh, by the way, it's a security site so it will be attacked by hackers…
Craig's team of dedicated pros were instrumental to the project success. A project this big doesn't happen in a vacuum; the RSA Conference team was on-point, on-time, insightful, constructive in every way, and open to anything at all! My hat's off to RSA Conference: they are fantastic collaborators.
Okay, ready? Let's descend into the depths of the project…
Part 1: Strategy
“Strategy without tactics is the slowest route to victory. Tactics without strategy is the noise before defeat.” —Sun Tzu, The Art of War
Before you can solve a problem, you must understand it. So, of course, the first step of any project is learning. Appropriately enough, the 2013 conference theme is Security in Knowledge.
What are the goals?
"If everything is important, then nothing is." ―Patrick Lencioni
To succeed, you must focus your energies on the core things that matter most. This entails making decisions, and saying “no” to some things. This allows you to say “yes” to the ones that matter.
We've found that a very good way to help our clients prioritize their goals is to conduct a card sort exercise. Often used to organize existing content, a closed sort methodology is well suited to organize and prioritize goals and audiences as well.
The real value is not in the results themselves, but in the process of getting to them. All the client team members gather around a table. A stack of cards, with one goal written on each, is distributed among the team. We ask them to place each card into a priority grouping: Top, High, Medium, Low. To add a bit of discipline, only three can be Top Priority.
And then we stand back. The client team lays out each card, talks about it, and decides where to put it. Occasionally they create a new card, or remove an irrelevant card. As they talk, they create a consensus they can agree on, flush out disagreements, and resolve them. And, as they free associate ideas and chat, we learn countless facts and tidbits that would otherwise be undiscovered. The conversation informs our explorations and decisions as we move forward.
(For the curious: top goals were to improve the user experience, grow year-round engagement, and improve natural SEO. Surfacing RSA Conference's great-but-buried content was a key element for all of these. It's a cliché, but content is king!)
That's just a starting point. Many other activities followed, including…
- Assessing current site content, usability and technical infrastructure
- Auditing current content, origination, staffing and publication processes
- Interviewing internal stakeholders and contributors
- Conducting competitive benchmarking and audience analysis
- Creating user personas
- Conducting a user survey of attendees
- Analyzing current web traffic
- Identifying integration points
- Analyzing current search engine performance
The Discovery Report
Our deliverable at the end of the discovery process is the discovery report: a document which catalogs and summarizes research in a way that is easy to understand.
Through the rest of the project, it was used as a touchstone to look back on and vet decisions. It's also useful for quickly onboarding members of the development and production team, and new contributors on the client team.
Site maps, wireframes, and specs, oh my!
“Now the general who wins a battle makes many calculations in his temple ere the battle is fought. The general who loses a battle makes but few calculations beforehand.” —Sun Tzu, The Art of War
Having spent weeks learning, we were prepared to create the documents defining the new site.
There's a lot of iteration. We went through 16 versions of the site map, which describes content and navigation, making changes based on testing it with tools suck as TreeJack and based on our evolving plans for the site.
Wireframes define key page layouts, content and functions. These required fewer revisions, thanks to extensive and collaborative benchmarking with the RSA Conference team. We identified many best practices and sketched out ideas in meetings before ever opening a drawing app.
Finally, with site maps, wireframes, discovery findings and plenty of conversation under our belt, we could create the Production Specification — the blueprint for the new site.
The Production Spec defines every point of integration, every page, every content tool, every user interaction. It sounds like a waterfall process, and at this stage, it is. We'll test it (more on that in Part 2, including our work at the conference itself in San Francisco), and based on that we'll make changes as we do design (coming in Part 3), and during development, the engineers adapt and change the site as needed in a very agile fashion (Part 4).
In other words, plans change. But plans there must be.
# # #
Want to know more about iMarc's strategy process? Check out our Strategy Handbook, which documents our processes and deliverables. We've published it under the Creative Commons 2.0 (BY-SA) license, so you are welcome to borrow from it.
These are not the users you're looking for…
He can go about his business … Move along.
We're excited to return to the E2 Conference in Boston next week. Last year, we met a lot of forward-thinking business leaders and had some great conversations around web and mobile strategies for enterprises. We even forged new partnerships from our experience at the conference and cannot wait to attend again this year for more exchanges and connections.
This year, members of the iMarc team will be taking in sessions around user experience and mobile applications. Be sure to follow @imarcllc on Twitter for updates from these tracks. You can also find us at Pod 10 featuring our recent applications and designs, and demonstrating our mobile and web platforms. The iMarc business development team will also be available to chat, and are eager to discuss new digital strategies for providing exceptional user experience and building brand equity. One lucky E2 attendee who stops by our Pod will also win an iPad Mini; don't miss your chance to enter!
If you are in the Boston metro this Tuesday or Wednesday, use iMarc's Priority Code CMIMARC to register for a FREE pass to the exhibit hall (http://www.e2conf.com/boston/). Then, stop by the iMarc Pod and say hello! We'll be ready to start planning your next project.