Our web team started this year’s Dreamforce journey with a tall order from the salesforce.com
executives: we had to bring the magic of Dreamforce to the web, for every visitor and on any device.

What began as a challenging task, turned out to be one of our team’s proudest moments this year. Here are the top five things we learned while creating and deploying the #df12 website:

1. Have a clear vision and know your goals

As started to work on the website, we met with Rachel Thornton, the VP of Dreamforce, and asked her our first of many questions: “What’s your vision and goals for this website?” Rachel wanted to “bring the magic of Dreamforce to the web and ensure we get more people at the event than ever before”. Rachel’s clear vision and goals paved the way for a solid plan.

2. When every visitor counts, think “mobile first”

After that initial meeting, it was clear that the website must be so inspiring, informational and easy to use, that registration would be a snap for every user. The best way to achieve this? The Dreamforce 2012 website needed to be mobile and the team needed to approach the design thinking “mobile first.”

Mobile devices are not meant for consumption of lengthy content with complex multi-level navigation, so in order to get to a point in which the content is easily consumable and navigable, thinking “mobile first” means thinking “content first.”

Final Dreamforce 2012 website on a few mobile devices

3. Mobile first = content first

At this point we asked Rachel our toughest question: “What is the absolutely most important content we need on this site?”

Her response was that the Dreamforce attendees should to be able to come to the site and quickly digest what the event is about, what’s relevant for them and how to register. The Dreamforce energy should exude from the page. Everything else could go.

The next step was distilling our 40+ page Dreamforce 2011 website down to a few pages that would be a good balance between useful content and easy navigation. To visualize this process, we recreated the 2011 website content on sticky notes and pasted them on the wall. Then we started taking down the non-vital content note by note.

At this point we focused on creating wireframes for different screen sizes and getting the creative team to think about this year’s look and feel. We also engaged with our analytics team and examined last year’s user navigation paths to the site and to the registration page. 

  Initial wireframes (mobile version on the right)

4. Find your technology Tao. Implement what works for you.

To successfully build an all-device website, we knew we had to invest in a solution that was robust enough to sustain months of updates and maintenance, but also elegant enough to do justice to our creative team’s incredible designs. 

After considering the options, we decided the best solution for this particular project was to create a responsive website and we partnered up with UpStatement for their phenomenal RWD (Responsive Web Design) work.

Since we were building a responsive website with one code base that adapts the layout to multiple devices and browsers, our design, development and production teams needed to work much closer together from the very beginning. And as soon as the UpStatement team got to our San Francisco offices, we did just that. Within hours we had a rough but working prototype of what’s now our home page. Using this prototype to go through executive review meetings generated earlier feedback loops and faster approvals.

   One of our initial RWD working prototypes 
   (in small screen portrait mode)

5. If a tree falls in the forest...don’t hide it, socialize it.

Once the work on the site was finished, we wanted to make sure that our audience knew about it. 

During the weeks leading up to our launch, the social media team began working on what I like to call the “Social Media Tai Chi.” They built an integrated social media campaign that would push out Dreamforce 2012 content to social outlets while successfully pulling people back into our site for more information and registration. And since (to date) more than half of Facebook users are on their mobile devices, our social media team was thrilled with our RWD site.

In true Salesforce fashion, we took a huge plunge into a cutting edge way of building websites and our top executives supported us all the way through. I want to thank the tremendously talented team of developers, designers, web producers, testers, program managers, session content owners and web analytics people who would not stop until the site was worthy of wearing the Dreamforce 2012 logo. Needless to say we’re extremely proud of the site and our registration numbers are trending much better than we had predicted!

If you want more details on the website or the project, or want to give us some feedback, you can find me on Twitter @fornyvv.

See you at Dreamforce 2012 and don’t forget to register: www.dreamforce.com.
--
Vivi Forny is a Senior Interactive Marketing Manager at salesforce.com.