58

Redesigning Your Site For a Better User Experience

Embed Size (px)

Citation preview

Page 1: Redesigning Your Site For a Better User Experience
Page 2: Redesigning Your Site For a Better User Experience
Page 3: Redesigning Your Site For a Better User Experience

Redesigning Your Site for a Better User Experience

BySylvia Nicosia

Director of Web Programming & DevelopmentFarmingdale State College

Page 4: Redesigning Your Site For a Better User Experience

Two Major Web Redesigns Since 2011

2012 2015

Page 5: Redesigning Your Site For a Better User Experience

Right After Going Live in 2015...

Admission Inquiries

down 22%

General Information

inquiries down 14%2014 2015

0

50

100

150

200

250

300

350

400

450

500

AdmissionsGeneral Information

Page 6: Redesigning Your Site For a Better User Experience

The Secret For Our Success1. COMMUNICATION2. Smart Content Contributors 3. Right Tools4. Awesome Team5. Time

Page 7: Redesigning Your Site For a Better User Experience

5) Time

T A K E Y O U R T I M E

Page 8: Redesigning Your Site For a Better User Experience

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

Page 9: Redesigning Your Site For a Better User Experience

But most important…

Page 10: Redesigning Your Site For a Better User Experience

3) The Right Tools

Page 11: Redesigning Your Site For a Better User Experience

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.

Page 12: Redesigning Your Site For a Better User Experience

Information from Internal & External Audience for all Navigation

Page 13: Redesigning Your Site For a Better User Experience

Qualitative Data to Backup Information Architecture

Data collected through “Contact Us” form for a period of two years.

farmingdale.edu/about/contact-us.shtml

Page 14: Redesigning Your Site For a Better User Experience

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.

Page 15: Redesigning Your Site For a Better User Experience

Data that provides the “Why”

Page 16: Redesigning Your Site For a Better User Experience

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!!

Page 17: Redesigning Your Site For a Better User Experience

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.

Page 18: Redesigning Your Site For a Better User Experience

Final Information Architecture

Page 19: Redesigning Your Site For a Better User Experience

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).

Page 20: Redesigning Your Site For a Better User Experience

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.

Page 21: Redesigning Your Site For a Better User Experience

Secondary Navigation Top 5 links from both internal and external

audiences, regardless of device.

Page 22: Redesigning Your Site For a Better User Experience

Footer = General Information Important information from the

institution. Calls to action

Page 23: Redesigning Your Site For a Better User Experience

FAQ Page = Repetitive Data from Contact Us Form Repetitive

inquiries ended up on FAQ page.

Page 24: Redesigning Your Site For a Better User Experience

Anything Else: A - Z Links PagePlus: Global & Local

Search Box. Dynamic Back to

Top button for easy navigation

Page 25: Redesigning Your Site For a Better User Experience

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.

Page 26: Redesigning Your Site For a Better User Experience

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.

Page 27: Redesigning Your Site For a Better User Experience

1) Communication

Image Source: http://jameswooddesign.blogspot.com/2011/04/star-wars-lego-campaign-poster.html

Page 28: Redesigning Your Site For a Better User Experience

“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

Page 29: Redesigning Your Site For a Better User Experience

Constant Communication with Campus

Page 30: Redesigning Your Site For a Better User Experience

Results…

Page 31: Redesigning Your Site For a Better User Experience

Data from 2014 & 2015 shows…

2014 20150

50

100

150

200

250

300

350

400

Admission to FarmingdaleAlumni RelationsCareer DevelopmentCommencementFinancial AidInternational StudentsOrientationOther/UnsurePolice (parking)RegistrarStudent AccountsTransferringUse of FacilitiesWebsite/Mobile

Page 32: Redesigning Your Site For a Better User Experience

Tracking User Behavior Through Goals with Events

Page 33: Redesigning Your Site For a Better User Experience

More Goal Conversions

Page 34: Redesigning Your Site For a Better User Experience

Happier Content Contributors :D

Page 35: Redesigning Your Site For a Better User Experience

Empowered With ONLY What They Need

ALL Content Contributors with Level 1 Toolbar Only 5 users with HTML out of 133

Page 36: Redesigning Your Site For a Better User Experience

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…

Page 37: Redesigning Your Site For a Better User Experience

Nay - Absolutely NOT to the Following:

1. Restore Auto-Saved Content2. Underline3. Strikethrough4. Indents5. Alignment6. Font Family7. Font Size8. Font Color9. Background Color

10. Insert/Embed Media11. Special Characters12. Cleanup Messy Code13. Show/Hide Guidelines/Invisibles14. Show/Hide Block Elements15. HTML16. Code Protect17. Form Tools

Page 38: Redesigning Your Site For a Better User Experience

Content Contributors Are NOT Designers

“Make something sweet with your content”

Page 39: Redesigning Your Site For a Better User Experience

Here’s Your Toolbar

Page 40: Redesigning Your Site For a Better User Experience

And the Result is This…

Page 41: Redesigning Your Site For a Better User Experience

And Leaving Their Directory Like This:

Page 42: Redesigning Your Site For a Better User Experience

Wouldn’t it be better…

Tell them Exactly What to Doand Give them the RIGHT Tools?

Page 43: Redesigning Your Site For a Better User Experience

Here’s Your Toolbar

Page 44: Redesigning Your Site For a Better User Experience

The Result:

Page 45: Redesigning Your Site For a Better User Experience

And Their Directory :D

Page 46: Redesigning Your Site For a Better User Experience

Before with Full Toolbar:

Page 47: Redesigning Your Site For a Better User Experience

After “Enhanced” Toolbar

Page 48: Redesigning Your Site For a Better User Experience

Before…

Page 49: Redesigning Your Site For a Better User Experience

After…

Page 50: Redesigning Your Site For a Better User Experience

Before… After…

Page 51: Redesigning Your Site For a Better User Experience

Before… After…

= Paste as Plain Text ONLY

Page 52: Redesigning Your Site For a Better User Experience

Give Them The Tools To Do Their Job

farmingdale.edu/ou-training/snippets.shtml

Page 53: Redesigning Your Site For a Better User Experience

To Wrap Up5. 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.

Page 54: Redesigning Your Site For a Better User Experience

Questions

???

Page 55: Redesigning Your Site For a Better User Experience
Page 56: Redesigning Your Site For a Better User Experience

Contact InformationSylvia E. NicosiaDirector of Web Programming & [email protected]@farmingdale.edu

Page 57: Redesigning Your Site For a Better User Experience
Page 58: Redesigning Your Site For a Better User Experience