Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From Design to Delivery

708 views

Published on

Session during Dreamforce 2015 on Thu Sept 17, 2015.

Join us to learn how Salesforce executes digital marketing strategies on www.salesforce.com to increase leads and brand awareness, balancing the right mix of creative, technology, and business. See how our web experience management team works with UX, Design, Analytics, Strategy, SEO, and Localization to deliver impactful journeys for our customers.

Published in: Marketing
  • Be the first to comment

From Design to Delivery

  1. 1. From Design to Delivery See how WEMs execute digital marketing strategies on www.salesforce.com Jeffrey Cortez Sr. Manager, Web Experience @jeffcortez jcortez@salesforce.com Nina Saeang Producer, Web Experience @ninasaeang nsaeang@salesforce.com David Waclo Manager, Web Experience @oakeydave dwaclo@salesforce.com
  2. 2. Introduction Agenda We’re constantly evolving Design to Delivery at Salesforce The Process in Action: Example Recap Q&A
  3. 3. Who are we? Jeff Nina Dave
  4. 4. Business What is a WEM? Web Experience Technology Creative
  5. 5. Introduction Agenda We’re constantly evolving Design to Delivery at Salesforce The Process in Action: Example Recap Q&A
  6. 6. Agenda The Process in Action: Example Recap We are constantly evolving Design to Delivery: Process Q&A
  7. 7. Introduction Agenda We’re constantly evolving Design to Delivery at Salesforce The Process in Action: Example Recap Q&A
  8. 8. Then and now You’re never really done. 2009 to present.
  9. 9. A closer look: 2009
  10. 10. A closer look: 2011
  11. 11. A closer look: 2013
  12. 12. today
  13. 13. Evolution 2009 2011 2013 Today
  14. 14. Introduction Agenda We’re constantly evolving Design to Delivery at Salesforce The Process in Action: Example Recap Q&A
  15. 15. Strategy Research UX Design/Content Development SEO Analytics Localization WEM Creative Brief Wireframing/ Prototyping Visual/UI Design Content Creation Development Authoring QA Localization Release Analyze/Monitor Test/Re-test DESIGN DELIVERY
  16. 16. Creative Brief 18 questions, 2 pages Broken into two sections: 1. Project Structure 2. Project Strategy Sample questions: What are we making? What is the timing? What is the goal of the project? Who is our audience? How will we measure success?
  17. 17. Wireframing/ Prototyping
  18. 18. Visual/UI Design Content Creation
  19. 19. Development
  20. 20. Authoring Content Matrix Images Video Loops Styleguide Drivers codes A/B Test codes Tracking pixels Name Capture ID Lead routing rules HTML/CSS Templates Components Custom code Business Technology Creative Content Management System
  21. 21. QA browser/OS platform and performance testing
  22. 22. Localization
  23. 23. Release
  24. 24. Analyze/Monitor Test/Re-test
  25. 25. Strategy Research UX Design/Content Development SEO Analytics Localization WEM Creative Brief Wireframing/ Prototyping Visual/UI Design Content Creation Development Authoring QA Localization Release Analyze/Monitor Test/Re-test DESIGN DELIVERY
  26. 26. Introduction Agenda We’re constantly evolving Design to Delivery at Salesforce The Process in Action: Example Recap Q&A
  27. 27. Example: Sales Cloud Product Page 2013 Present
  28. 28. Brief The Process in Action Audience: • Prospect (75%) Goal: • User-centric website • Benefits-driven • Lead-generation Metrics: • Page Views • Entry (Internal vs. External) • Visits • Form Views & Form Completes
  29. 29. Wireframing The Process in Action There’s more to it than that. • User journey • Site architecture • User testing • Prototyping ...and much more
  30. 30. Visual Design + Content Development The Process in Action
  31. 31. Development The Process in Action Requirements: • Design specs • RWD • Interaction
  32. 32. Authoring The Process in Action + = ● Copy ● SEO metadata ● Videos ● Drivers/Analytics tracking ● Form values/lead routing info ● mboxes much more...
  33. 33. QA The Process in Action +
  34. 34. Localization The Process in Action Please translate asap and deliver languages as they become available. xliff files: https://org62.my.salesforce.com/06930000005U DU8 word count:https://org62.my.salesforce.com/06930000 005UDTy 1. Overview (DE, FR, NL, JP, CN, KR) http://web-auth.salesforce.com/sales- cloud/overview/ 2. Lightning (DE, FR, NL, JP, CN, KR) http://web-auth.salesforce.com/sales- cloud/lightning/ 3. Navigation (DE, FR, NL, JP, CN, KR) http://web-auth.salesforce.com/sales- cloud/modules/navigation.jsp
  35. 35. Analysis The Process in Action
  36. 36. +21% form conversion: WATCH DEMO Analysis The Process in Action
  37. 37. Visual attention diminished significantly below the midway point Left nav received consistent attention Tagline is salient for the first few moments Copy as well as headlines captured visual attention. Note how icons were largely ignored Analysis The Process in Action
  38. 38. The process is iterative. Ideation, test, analyze, repeat.
  39. 39. One team, one dream. Collaboration is key. Campaigns Dev & QA Marketing Technology Marketing Operations Localization Program Management Search Engine Optimization (SEO) Search Engine Marketing (SEM) Creatives Content Marketing Analytics Web Experience (WEM) Web Strategy User Experience (UX) Visual Design
  40. 40. And it’s far from simple. Visual Design DevWireframeBrief HTML Localization AnalysisQA Product Marketing Research + Strategy Content Creation Translation Launch Testing More Testing
  41. 41. How does a web project get delivered at your company?
  42. 42. Introduction Agenda We’re constantly evolving Design to Delivery at Salesforce The Process in Action: Example Recap Q&A
  43. 43. 1. Start with a creative brief. 2. Work as one unit: collaborate. 3. Always be evolving Takeaways
  44. 44. Introduction Agenda We’re constantly evolving Design to Delivery at Salesforce The Process in Action: Example Recap Q&A
  45. 45. thank y u

×