Redesigning Your Site
for a Better User
Director of Web Programming & Development
Farmingdale State College
Two Major Web Redesigns Since 2011
Right After Going Live in 2015...
inquiries down 14%
The Secret For Our Success
2. Smart Content Contributors
3. Right Tools
4. Awesome Team
T A K E Y O U R T I M E
4) Awesome Team
• VP for Institutional Advancement
• Senior Director of Communications
• Director of Web Programming &
• Creative Director
• Digital Media Manager
• Graphic Designer
• Junior Programmer/Work Study
But most important…
3) The Right Tools
Quantitative - Google Analytics, The
• 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
Information from Internal & External
Audience for all Navigation
Qualitative Data to Backup
Data collected through
“Contact Us” form for a
period of two years.
Over 3,000 submissions reviewed.
Repetition dictated location for
Categories became the areas for the
Global, Local, Left Menu, Top Landing pages, FAQ page.
Data that provides the “Why”
Give Users What They Need…
Back To Top Button
Faculty Pages Not What
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
Final Information Architecture
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.
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.
Top 5 links from both internal and
external audiences, regardless of device.
Footer = General Information
Important information from the
Calls to action
FAQ Page = Repetitive Data from
Contact Us Form
up on FAQ page.
Anything Else: A - Z Links Page
Global & Local
Dynamic Back to
Top button for easy
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
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.
Image Source: http://jameswooddesign.blogspot.com/2011/04/star-wars-lego-campaign-poster.html
“Communication is the key
element of a successful and
timely CMS implementation”
- Marcel Ayers, Director of
Constant Communication with Campus
Data from 2014 & 2015 shows…
Admission to Farmingdale
Use of Facilities
Tracking User Behavior Through
Goals with Events
More Goal Conversions
Happier Content Contributors :D
Empowered With ONLY What They
ALL Content Contributors with Level 1 Toolbar
Only 5 users with HTML out of 133
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…
Nay - Absolutely NOT to the Following:
1. Restore Auto-Saved Content
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
16. Code Protect
17. Form Tools
Are NOT Designers
“Make something sweet
with your content”
Here’s Your Toolbar
And the Result is This…
And Leaving Their Directory Like This:
Wouldn’t it be better…
Tell them Exactly What to Do
and Give them the RIGHT Tools?
Here’s Your Toolbar
And Their Directory :D
Before with Full Toolbar:
After “Enhanced” Toolbar
= Paste as Plain Text ONLY
Give Them The Tools To Do Their Job
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.
Sylvia E. Nicosia
Director of Web Programming & Development
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.
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
Digital Media Manager
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.
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.
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.
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
Cleanup Messy Code
Show/Hide Block Elements
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
Image source: http://www.lifecare-edinburgh.org.uk/thankyou/
Closing image slide