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.

Redesigning Your Site For a Better User Experience

675 views

Published on

Using analytics and qualitative data, we implemented a simple, yet powerful Bootstrap design. The site’s information architecture now aligns with our audience’s expectations, so visitors are able to locate information without confusion. Since going live in June 2015, admissions questions have been reduced by 22% and inquiries for general information have decreased 14%.

Published in: Education
  • Be the first to comment

Redesigning Your Site For a Better User Experience

  1. 1. Redesigning Your Site for a Better User Experience By Sylvia Nicosia Director of Web Programming & Development Farmingdale State College
  2. 2. Two Major Web Redesigns Since 2011 2012 2015
  3. 3. Right After Going Live in 2015...  Admission Inquiries down 22%  General Information inquiries down 14% 0 50 100 150 200 250 300 350 400 450 500 2014 2015 Admissions General Information
  4. 4. The Secret For Our Success 1. COMMUNICATION 2. Smart Content Contributors 3. Right Tools 4. Awesome Team 5. Time
  5. 5. 5) Time T A K E Y O U R T I M E
  6. 6. 4) Awesome Team • VP for Institutional Advancement • Senior Director of Communications • Director of Web Programming & Development • Creative Director • Digital Media Manager • Graphic Designer • Photographer • Junior Programmer/Work Study
  7. 7. But most important…
  8. 8. 3) The Right Tools
  9. 9. Quantitative - Google Analytics, The “What” • How is the audience accessing our content? • Filters by IP Address. • Review pages by device. • Review landing pages and bounce rate. • Review search queries on internal and external search boxes.
  10. 10. Information from Internal & External Audience for all Navigation
  11. 11. Qualitative Data to Backup Information Architecture Data collected through “Contact Us” form for a period of two years. farmingdale.edu/about/contact-us.shtml
  12. 12. Data Analysis  Over 3,000 submissions reviewed.  Repetition dictated location for navigation.  Categories became the areas for the navigation system:  Global, Local, Left Menu, Top Landing pages, FAQ page.
  13. 13. Data that provides the “Why”
  14. 14. Give Users What They Need…  Search Tool  A-Z Links  FAQ Page  Back To Top Button  Global Navigation  Secondary Navigation  Left Menu  Footer  Campus Directory  Faculty Pages Not What They Want!!
  15. 15. How? Goals from Quantitative and Qualitative Analysis: 1. Concentrate on a simple design/layout that WORKS as intended. 2. Provide most sought information within reach, one and two-click max from any page. 3. Provide tools to navigate and find any additional information.
  16. 16. Final Information Architecture
  17. 17. Global Navigation – Top Links  Most viewed FSC pages for internal and external audiences.  15 most popular pages from Google Analytics in dropdown, grouped according information from contact us form (i.e. Admissions, Orientation).
  18. 18. Next 35 Popular Links Went to Landing Pages General information about admission to Farmingdale, regardless of department. Specific information about the admission process, from the Admissions office.
  19. 19. Secondary Navigation  Top 5 links from both internal and external audiences, regardless of device.
  20. 20. Footer = General Information  Important information from the institution.  Calls to action
  21. 21. FAQ Page = Repetitive Data from Contact Us Form  Repetitive inquiries ended up on FAQ page.
  22. 22. Anything Else: A - Z Links Page Plus:  Global & Local Search Box.  Dynamic Back to Top button for easy navigation
  23. 23. 2) Smart Content Contributors  Make them smart by teaching them right!  A Year and a half of constant training to prepare them for a new Website and a new version of our CMS.  Mandatory workshops from 2014 to 2015. Those who did not attend lost publishing privileges.
  24. 24. Content Migration, a Team Effort  Content Contributors worked closely with the Office for Institutional Advancement cleaning content before and after migration.  A second revision of content underwent a week before going live.
  25. 25. 1) Communication Image Source: http://jameswooddesign.blogspot.com/2011/04/star-wars-lego-campaign-poster.html
  26. 26. “Communication is the key element of a successful and timely CMS implementation” - Marcel Ayers, Director of Implementation, OmniUpdate  http://blog.omniupdate.com/posts/2015/best-practices-for-implementing-a-cms.html
  27. 27. Constant Communication with Campus
  28. 28. Results…
  29. 29. Data from 2014 & 2015 shows… 0 50 100 150 200 250 300 350 400 2014 2015 Admission to Farmingdale Alumni Relations Career Development Commencement Financial Aid International Students Orientation Other/Unsure Police (parking) Registrar Student Accounts Transferring Use of Facilities
  30. 30. Tracking User Behavior Through Goals with Events
  31. 31. More Goal Conversions
  32. 32. Happier Content Contributors :D
  33. 33. Empowered With ONLY What They Need  ALL Content Contributors with Level 1 Toolbar  Only 5 users with HTML out of 133
  34. 34. Yay  Choice of RED or GREY text  Choice of BLUE or GREY background  Additional icons added on a single basis  Too many icons gave users way too many ideas…
  35. 35. Nay - Absolutely NOT to the Following: 1. Restore Auto-Saved Content 2. Underline 3. Strikethrough 4. Indents 5. Alignment 6. Font Family 7. Font Size 8. Font Color 9. Background Color 10. Insert/Embed Media 11. Special Characters 12. Cleanup Messy Code 13. Show/Hide Guidelines/Invisibles 14. Show/Hide Block Elements 15. HTML 16. Code Protect 17. Form Tools
  36. 36. Content Contributors Are NOT Designers “Make something sweet with your content”
  37. 37. Here’s Your Toolbar
  38. 38. And the Result is This…
  39. 39. And Leaving Their Directory Like This:
  40. 40. Wouldn’t it be better… Tell them Exactly What to Do and Give them the RIGHT Tools?
  41. 41. Here’s Your Toolbar
  42. 42. The Result:
  43. 43. And Their Directory :D
  44. 44. Before with Full Toolbar:
  45. 45. After “Enhanced” Toolbar
  46. 46. Before…
  47. 47. After…
  48. 48. Before… After…
  49. 49. Before… After… = Paste as Plain Text ONLY
  50. 50. Give Them The Tools To Do Their Job farmingdale.edu/ou-training/snippets.shtml
  51. 51. To Wrap Up 5. Time: Don’t rush. 4. Team: Detach yourself. 3. Tools: Research & test. Support. 2. Content Contributors: Empower them! 1. Communication: All levels, at all times.
  52. 52. Questions ???
  53. 53. Contact Information Sylvia E. Nicosia Director of Web Programming & Development @synicosia sylvia.nicosia@farmingdale.edu

×