Redesigning Your Site For a Better User Experience
•Download as PPTX, PDF•
2 likes•910 views
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%.
Recommended
Recommended
More Related Content
What's hot
What's hot (10)
Viewers also liked
Viewers also liked (20)
Similar to Redesigning Your Site For a Better User Experience
Similar to Redesigning Your Site For a Better User Experience (20)
Recently uploaded
Recently uploaded (20)
Redesigning Your Site For a Better User Experience
- 3. Redesigning Your Site for a Better User Experience By Sylvia Nicosia Director of Web Programming & Development Farmingdale State College
- 4. Two Major Web Redesigns Since 2011 2012 2015
- 5. 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
- 6. The Secret For Our Success 1. COMMUNICATION 2. Smart Content Contributors 3. Right Tools 4. Awesome Team 5. Time
- 7. 5) Time T A K E Y O U R T I M E
- 8. 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
- 10. 3) The Right Tools
- 11. 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.
- 12. Information from Internal & External Audience for all Navigation
- 13. Qualitative Data to Backup Information Architecture Data collected through “Contact Us” form for a period of two years. farmingdale.edu/about/contact-us.shtml
- 14. 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.
- 15. Data that provides the “Why”
- 16. 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!!
- 17. 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.
- 19. 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).
- 20. 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.
- 21. Secondary Navigation Top 5 links from both internal and external audiences, regardless of device.
- 22. Footer = General Information Important information from the institution. Calls to action
- 23. FAQ Page = Repetitive Data from Contact Us Form Repetitive inquiries ended up on FAQ page.
- 24. Anything Else: A - Z Links Page Plus: Global & Local Search Box. Dynamic Back to Top button for easy navigation
- 25. 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.
- 26. 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.
- 27. 1) Communication Image Source: http://jameswooddesign.blogspot.com/2011/04/star-wars-lego-campaign-poster.html
- 28. “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
- 29. Constant Communication with Campus
- 30. Results…
- 31. 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
- 32. Tracking User Behavior Through Goals with Events
- 34. Happier Content Contributors :D
- 35. Empowered With ONLY What They Need ALL Content Contributors with Level 1 Toolbar Only 5 users with HTML out of 133
- 36. 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…
- 37. 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
- 38. Content Contributors Are NOT Designers “Make something sweet with your content”
- 40. And the Result is This…
- 41. And Leaving Their Directory Like This:
- 42. Wouldn’t it be better… Tell them Exactly What to Do and Give them the RIGHT Tools?
- 44. The Result:
- 45. And Their Directory :D
- 46. Before with Full Toolbar:
- 48. Before…
- 49. After…
- 50. Before… After…
- 51. Before… After… = Paste as Plain Text ONLY
- 52. Give Them The Tools To Do Their Job farmingdale.edu/ou-training/snippets.shtml
- 53. 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.
- 54. Questions ???
- 56. Contact Information Sylvia E. Nicosia Director of Web Programming & Development @synicosia sylvia.nicosia@farmingdale.edu
Editor's Notes
- Black slide at intro (and closing) of template is here so you can set up your presentation prior to your event, and have it ready and running on screen, without anyone seeing it. Our AV technicians will love you for this.
- Generic Intro Slide
- Farmingdale State College is part of the SUNY system (State University of New York), one of 64 campuses, located on Long Island, NY.
- We’ve been happy OmniUpdate customers since 2011. We have gone through two major Web redesigns: the first one was in 2012, and the second one in June 2015. The last one we did a Web redesign while launching OU Campus version 10. We thought that we wanted to do both so Content Contributors wouldn’t have to go through training twice. We also learned from the first redesign and we were committed to make this time things differently. We took our time not only in the planning, but on each phase of the project. The result was a very smooth process and a very successful launch. If anyone is going through a similar roll out (or happening in a near future), we hope our experience and steps we took help you in any way.
- 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%. Additionally, our new modular design makes life much easier for content contributors, who are now actually looking forward to attending training sessions. In this session, I will discuss our redesign process, including our analysis of analytics, the information architecture overhaul, and the preparation and launch of the new layout. 0% Complaints 100% Positive Feedback Website very well received More Goal conversions
- The secret for our successful Website launch: COMMUNICATION – Since day one, we made sure we had communication at all levels and all platforms. Email, Weekly E-Newsletter, PLENTY of workshops, feedback surveys. Smart Content Contributors – The key here is “empowered Content Contributors.” We made sure they had all the necessary training and tools to make their job efficiently. Right Tools: From framework to images, we did our homework. As per the Content Management System, you want their full support. Awesome Team – Essential to have all the support from the top; plus a great team. Time – Take all the time needed for researching, planning, developing, and testing. Never rush because of a deadline!
- As with any project, TAKE YOUR TIME. Better take extra time and present something awesome, than coming up with a project rushed, and halfway done just to meet a deadline. Not only did we take our time researching, discussing, developing, testing, but we extended several pre-established deadlines just to ensure that everything worked as intended. Image source: http://www.edp24.co.uk/news/environment/remote_broads_island_prepares_for_once_a_year_opening_by_hosting_limpet_games_1_1480958
- Get yourself awesome people that love their job with passion. A successful project begins with a strong leader and an amazing team, where everyone is good in their field, good at what they do. Support from the top is essential. Also very important that support comes all the way from the top. Team met weekly for year and a half to discuss design, architecture, and template elaboration. There was an intensive review of current site, page inventory; analysis of navigation architecture. Our 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 Image source: https://www.linkedin.com/pulse/lego-case-study-team-culture-michael-fearne
- Key Point: Detach yourself, don’t take things personally, it’s for the good of the institution. It’s not your Website, it’s not your baby, it’s the college’s Website! Essential that ALL team members understand that. It’s the basic for a successful Web project. Every members to have defined roles and responsibilities. Important because each team member’s responsibilities are interconnected and dependent upon another. Very important to leave ego on the side. If some of your ideas are not accepted, instead of fighting, try to understand it from their point of view. Always present data to backup your ideas. If not possible. Always try to compromise. In two years of meeting weekly, the team occasionally had disagreements. However those disagreements were always backed up with data from all parties, and at the end the solution was the one that benefited the users, not the team. Image/sources: https://wanelo.com/p/2621763/keep-calm-and-love-sharks-shark-8-x-10-print-buy-2-get-1-free-keep-calm-art-keep-calm-poster-keep-calm-print http://www.forbes.com/sites/glennllopis/2012/10/01/6-ways-successful-teams-are-built-to-last/#3e81346268dd
- Choosing the right tools was an elemental part of the project. Determining what our audience was looking for and why, as well as to what tools to use to redesign the Website. Choosing the right tools for the right job: Quantitative = The What Qualitative = The Why Framework = The How Adaptive Images = For Image Resizing Content Management System = Essential to get all of the above working.
- We began reviewing Google Analytics to see what our internal and external audiences were looking for from their desktops and mobiles devices. Internal and External audiences based on IP addresses filters. Search queries for both Google Search and custom search in A-Z links, we also did them based on device. With Google Analytics, we reviewed landing pages and bounced rates to determine content effectiveness. We also applied views filtering internal and external IP address to determine paths for desktop, tablet, and mobile. We were able to determine what each platform was looking for and began building our navigation based on that.
- This helped us determine location for links: Global navigation, Local navigation, or Footer. Whether visible or in dropdown. Example, email link popular on internal and external audiences, and on all devices. The decision was to leave Email link visible for all devices and audience.
- Contact Us – Qualitative Data A gold mine of information. This form is set based on areas; the user chooses and the question gets emailed to that area. These options come as categories in the submissions.
- We also used qualitative data for our navigation menus: over 3,000 submissions were reviewed from our “Contact Us” form. Based on the type of request, this gave us a strong idea what our users where looking for. Users where the ones placing the information in categories for us, based on how they search for information. Something that we thought would belong to Students Accounts, they would expect it to find it in Admissions. Based on categories’ repetition, we started to plan and develop our information architecture. We added this information on the top navigation and footer. Content popular but not as popular, we placed it in the A-Z links page. Then there was information that was consistently sought. This information got placed in a new page, FAQ – Frequently Asked Questions, a collapsible page that provides answers to questions where there’s no specific landing page for it.
- This information helped us support our Google Analytics information. If a page had a high bounce rate, let’s say for example Admissions, and we got a lot of requests for admission information, this helped us look at the content level to determine if indeed any information was missing and if any calls to action where needed. This also applied to many of our landing pages.
- Different from our 2012 redesign, we focused on giving our users what they needed to find information and not what the wanted. Not everything gets listed on the homepage as they wanted. Departments wanted to have their faculty listed on each department site; give them a universal Faculty page that can be viewed from the department’s directory.
- From Quantitative and Qualitative Data, we came up with the following goals: Concentrate on a simple design/layout that WORKS as intended. Provide most sought information within reach, one and two-click max from the homepage or any page. Provide tools to navigate and find any additional information.
- Navigation: Global Local Left Menu Footer Tools: Search box, A-Z Links, Back to Top button
- We grouped top navigation links based on most popular landing pages based on all our audiences: General public, students, faculty and staff (global information). Global information for Admission, Academics, Campus Life, Students, Faculty & Staff, Alumni & Friends, Athletics, and Give. Top 15 pages (approximately, based on popularity) were added to the top navigation drop down.
- Next 35 popular pages were added to top navigation landing pages, grouped based on how audience is searching. For example, we separated admissions information into Admissions and General Admission Information. The General Admission Information landing page contains all information about the admission process regardless of department, and arranged based on how users expect to find this information (the admission application is from Admissions, while Orientation falls under the Dean of Students office). Prospective students don’t know that, so trying to find this information at different places complicates their search. We created a sort of hub where all information is gathered in one place regardless of area. The Admissions Office link on the other hand, contains information exclusively about the admissions process. Taking advantage of Bootstrap classes, we solved the issue on having every department listed on the home page. Using built-in collapsible drop-downs, with one link from the top navigation, every department is listed on the landing page, http://www.farmingdale.edu/academics/index.shtml#collapseAcademicsAZ
- The secondary navigation includes top 5 links for all audience: students, faculty and staff. Email, Directory, Library, A-Z Links.
- Important information about the institution, might not be that popular on GA, but is information we want to push (About). Also other important, but not so important links there. Also where our calls to action are. Any other important information not related to information about admissions, academics, students, alumni, and faculty, was allocated on the footer. Information about the college, calendars, resources, and a quick access list was included. Each category also has its own landing page with further links. Call to action buttons added to the homepage with 4 of the most visited links, plus Make a Gift link. Landing pages also have now call to action buttons.
- All that data from the Contact Us form. Information that users ask repetitively but that don’t make it to have their own page, are listed in this FAQ page. The link to this page is in the footer. Again, taking advantage of Bootstrap classes, links to this page use Bootstrap’s built-in collapsible drop-downs, where the link lands to the question, opened: http://www.farmingdale.edu/academics/index.shtml#collapseAcademicsAZ
- Any other link not making the cut in analytics, went to the A-Z Links page. Plus the Global and Local Search boxes help users to find information quickly. The dynamic Back Up button also enhances the navigation experience on all devices.
- We made sure we empowered our Content Contributors with mandatory workshops. Mandatory training for OU Campus Content Contributors began on Tuesday January 13, 2014. Users were trained on the upcoming CMS v10 version. They were also alerted on a new Website redesign in the works. Users who did not attend their mandatory workshop, they would lose their publishing rights in OU Campus and would have to submit for approval. During 2014, two workshops were held for Content Contributors, with hands-on on our v10 sandbox. Everyone was aware that a new Website was in the works.
- Content Contributors worked closely with the Office for Institutional Advancement in cleaning code, deleting old content and pages, updating information, before the content migration in 3/26/2015. It was a coordinated effort. A second revision took place after migration, and before going live on June 26, 2015.
- Big difference between 2012 and 2015 Website launch due to constant communication Image source: http://jameswooddesign.blogspot.com/2011/04/star-wars-lego-campaign-poster.html
- Communication was constant at all levels. Additionally, information about the redesign was available on weekly campus mailings. At all times the campus community had access to feedback forms. Although we didn’t include users or our audiences during the layout design, we based all decisions based on our data. They were informed of the project status, what to expect, etc. Timeline: 8/14/2014: Open session to campus community to test layout. 9/14/2014: Second Open session to campus community to test layout. 11/14/2014: Email to Deans and chairs with link to test layout. 1/13/2015: Email to campus community about progress and what’s coming. 3/20/2015: Email to campus to review content before migration. 4/28/2015: Presentation to Cabinet. 5/27/2015: Email to campus informing about last stages, plus test link. 6/15/2015: Announcement to campus with link to development site for last review before going live. 6/18/2015: Email to campus about “soft” launch coming up (on or about end of June), what to expect, and what to do. 6/26/2015: Official Website launch.
- From June 26, to December 31, for both years 2014 and 2015, we got the following: A 13% decrease on requests for information about admissions A 27% decrease for alumni relations requests A 20 % decrease for career development requests A 23% decrease for Financial Aid A 10% decrease for the Registrar A 32% decrease for student accounts Anything that goes up, we make sure we include this information in the A-Z links, or where it belongs. But this approach tells us clearly how users search for our content.
- More Goal conversion due to easier access to information on all devices.
- Since we went live with our second redesign, our Content Contributors enjoy adding more content; attendance to workshops increased; more people willing to be Content Contributors. Image source: http://www.szeretlekmagyarorszag.hu/nagy-az-erzelmi-intelligenciad-most-megtudhatod/
- The goal designing the new Website is provide all tools so users become “self-sufficient” with the system. Bootstrap allows for a modular system where we can create snippets with rows and columns that users can grab, install, and use them immediately. We also used Bootstrap’s styles for the WYSIWYG toolbar. This time, we gave our users a very limited toolbar, with only the necessary elements (and styles from Bootstrap) to format content. The results have been great and nobody misses the full toolbar. We took away font family, font size, indentation, alignment, text color, background color, embedding media, special characters, HTML, source, messy code, show/hide block elements, and code protect. Instead, we provide some of these formatting elements such as alignment, text color to gray or red, and background color of gray or blue for tables, among others. This approach has helped us
- Instead, we provide them with an “enhanced” toolbar, with the necessary elements and tools for them to add and edit content. We don’t tell them no directly, but we give them the feeling of choosing between two elements. At every workshop, we tell them that this toolbar contains all the necessary elements for them to edit content. We found that by giving them all the icons, they got overwhelmed with so many options.
- ABSOLUTELY NOT given the following: Restore Auto-Saved Content Underline Strikethrough Indents Alignment Font Family Font Size Font Color Background Color Insert/Embed Media Special Characters Cleanup Messy Code Show/Hide Guidelines/Invisibles Show/Hide Block Elements HTML Code Protect Form Tools
- We have to remember that our Content Contributors are NOT designers of layout or color. Their job is to edit content.
- Image source: http://www.bystephanielynn.com/2015/12/winter-hot-chocolate-bar-holiday-entertaining-bigseason.html
- Image source: http://www.thesun.co.uk/sol/homepage/news/6574668/The-pud-the-bad-and-the-ugly.html
- Image source: http://clearheartblog.blogspot.com/2011_10_01_archive.html
- Image Source: http://oneequalsmany.blogspot.com/2011/08/extravagant-goats-cheese-tortellini_26.html
- Image Source: http://oneequalsmany.blogspot.com/2011/08/extravagant-goats-cheese-tortellini_26.html
- Image source: https://www.pinterest.com/zebbo717/get-organized-eat-healthy-with-zebbie-tupperware
- We got ride of “All Paste Options” Two paste options will be available in the toolbar. When the "Paste as Plain Text" toggle is off, the primary paste button will clean up content pasted from Word and retain all basic formatting, tables, and HTML. When the "Paste as Plain Text" toggle is on, all formatting will be stripped out and only plain text pasted.
- Give your users the tools to do their job, so they can concentrate on content and minor formatting. Image source: https://www.feralinteractive.com/en/mac-games/legomovie/characters/#emmet
- Image source: http://www.ebay.com/itm/LEGO-Star-Wars-MiniFigure-Stormtrooper-Finn-FN-2187-From-Polybag-30605-/401085774080
- Thank you! Image source: http://www.lifecare-edinburgh.org.uk/thankyou/
- Closing image slide