WRAL.com Redesign Presentation Made to Triangle AMA on November 21, 2013


Published on

Thank you to the Triangle AMA chapter for having WRAL.com's General Manager John Conway and Director of Sales and Marketing William Ammerman as keynote speakers for the November 2013 lunch meeting. The WRAL.com Redesign has been a year in the making and we're pleased to be able to share our key takeaways from the project. Please share your thoughts on Twitter with the hashtag #WRALredesign.

Published in: Business, Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WRAL.com Redesign Presentation Made to Triangle AMA on November 21, 2013

  1. 1. WRAL.com Redesign #WRALredesign
  2. 2. Industry Trends: Multi-Screen “We are a nation of multi-screeners.” -Forbes (9/23/2013)
  3. 3. Industry Trends: Multi-Screen You are here
  4. 4. How Big is the WRAL.com Redesign? • Over 3 million unique visitors per month • Over 100 million page views per month • Over 300,000 story level assets • 7.5 TB of data transferred on a peak day • As many as 100,000 weather alerts per hour • Over 46,000 lines of server side code for the redesign (not including our Javascript and CSS)
  5. 5. Set Goals for the Redesign The WRAL.com redesign has been compared to rebuilding a jet while it is in flight. What are we trying to accomplish? • Seamless experience across desktop, laptop, tablet, and mobile devices • Updated look and cleaner, less cluttered design • More room for images • Fast page loads • Innovative ad units • Better use of video
  6. 6. About Responsive Web Design Consumers access WRAL.com on many devices Key Concept: Responsive web design delivers a layout best suited for the user’s screen. This insures a great experience on any screen.
  7. 7. About Responsive Web Design Ethan Marcotte wrote “Responsive Web Design” He defined three components of responsive web design: 1] Media queries 2] Fluid grids 3] Flexible images
  8. 8. About Responsive Web Design Media Queries Introduced as part of the new CSS3 specification, media queries allow us to inspect the physical characteristics of the device rendering the website. Using a media query, we can build a style sheet for displaying our website on a specific device, or a specific screen size. This allows us to use one set of code to deliver the same website differently to different devices.
  9. 9. About Responsive Web Design Fluid Grids Once the media query has determined the size of the user’s screen, a fluid grid allows information to be positioned in the best way for that specific screen. The layout of the webpage “reflows” and changes based on the screen resolution. Fluid grids mean that the way information is presented changes from screen to screen.
  10. 10. About Responsive Web Design Flexible Images Rather than designing for a fixed column width measured in pixels, responsive web design relies on proportion. Images and text fill the available area, depending on the screen size.
  11. 11. What Influenced Us The Boston Globe was one of the first local news websites to use responsive web design.
  12. 12. What Influenced Us USA Today went to a cleaner design with simplified navigation and bolder images.
  13. 13. What Influenced Us ESPN.com uses a drop down menu that shows, at a glance, what’s contained in that section, complete with images and subnavigation.
  14. 14. Usability For Dummies Steve Krug wrote “Don’t Make Me Think” and “Rocket Surgery Made Easy”
  15. 15. Usability For Dummies Key quotes from Steve Krug: 1] Don’t make me think. If you have room in your head for only one usability rule, make this the one. 2] Get rid of half the words on each page, then get rid of half of what’s left. 3] We don’t read pages. We scan them. 4] Create a clear visual hierarchy. 5] A morning a month, that’s all we ask.
  16. 16. Usability For Dummies A few notes on layout: 1] Layout affects scanning patterns. 2] Your headline has about 1 second to gain attention. 2] People key on faces and follow other people’s eyes. Source: www.grokdotcom.com
  17. 17. The Redesign Process The redesign process starts with a rigorous look at your audience and how they use your website. WRAL.com Heat Map Showing User Interest
  18. 18. The Redesign Process Every detail of the site has to be thought through for different audiences using different devices. Flow Charts Site Analytics Wire Frames
  19. 19. The Redesign Process
  20. 20. The Redesign Process Options to consider in a responsive web design.
  21. 21. The Redesign Process Consider how elements should reflow from a 3-column layout, to a 2-column layout, and a 1 column layout. Map the existing site and ensure that critical units are preserved 1 to 1. Existing site Redesign 3-column view 2-columns 1-column
  22. 22. Advertising in Responsive Web Design Responsive web design requires rethinking ad placement.
  23. 23. Advertising in Responsive Web Design
  24. 24. Sneak Peek of the new WRAL.com Simplified navigation makes it easier for users to find important information quickly. 3-column view 2 and 1-column view
  25. 25. Sneak Peek of the new WRAL.com A cleaner, less cluttered home page delivers: • • • • • • • • • Updated look Larger images Faster load time Streamlined navigation Enhanced video features Enhanced weather features Flexible alert notifications New page sponsor ad units Sharp new footer design
  26. 26. Sneak Peek of the new WRAL.com Roll-over sub-navigation “Mega Menus” provide greater insight and depth at a glance.
  27. 27. Sneak Peek of the new WRAL.com Story level pages provide a utility bar to make it easy for users to: • • • • Comment Print Share Adjust font size
  28. 28. Sneak Peek of the new WRAL.com Story level pages provide a utility bar to make it easy for users to: • • • • Comment Print Share Adjust font size
  29. 29. Sneak Peek of the new WRAL.com Story level pages provide a utility bar to make it easy for users to: • • • • Comment Print Share Adjust font size
  30. 30. Before
  31. 31. After
  32. 32. Biggest Takeaways Your website needs to keep up with changes in technology.
  33. 33. Biggest Takeaways Analyze your end users and how they interact with your site.
  34. 34. Biggest Takeaways Clearly define your goals and deliverables for your team, partners, and stakeholders.
  35. 35. Biggest Takeaways Budget carefully. It isn’t cheap!
  36. 36. Biggest Takeaways Communicate changes to your internal and external audiences.
  37. 37. Biggest Takeaways Involve key stakeholders early to achieve buy-in.
  38. 38. Biggest Takeaways Apply usability testing to achieve a world-class user experience.
  39. 39. Biggest Takeaways Consider how your redesign impacts your web developers, content creators, ad operations, and partners.
  40. 40. Biggest Takeaways How will you measure success?
  41. 41. Biggest Takeaways Give yourself time.
  42. 42. Biggest Takeaways Have a dedicated project manager.
  43. 43. Biggest Takeaways …and the number 1 takeaway…
  44. 44. Biggest Takeaways Plan.
  45. 45. Contact Us John Conway General Manager jconway@wral.com 919.821.8849 William Ammerman Director of Sales & Marketing wammerman@wral.com 919.821.8772