Community College Website Do s and Don ts

Transcription

1 4/15/2014 Community College Website Do s and Don ts April 15, 2014 About Phoenix College Maricopa Community College District 10 Colleges & 2 Skill Centers. One of the largest providers of higher education in the United States. Established in 1920, Phoenix College is the flagship of the Maricopa Community College District. 150 degree and certificate programs, including 3 online degrees. 1

2 Student Demographics The student body represents over 100 different countries. More than 50 different languages are spoken on campus every day. 12,600 students per semester 27% Full Time / 73% Part Time 27% years 15% years 17% years Poll #1 Which Issues Apply To Your Your Website? (Choose all that apply) Poor Navigation Unorganized Content layout Outdated Content Inferior Quality Photos Unappealing Design Limited or No Social Media Integration Not Mobile Friendly Unsatisfactory SEO results Other (use chat box) 2

3 Phoenix College Website Issues Poor Navigation Outdated Design Limited Content Space Inconsistent Program Information Difficult to Edit - Content Managers Non-Responsive Design Proprietary CMS ANGRY CUSTOMERS Preliminary Steps Hire Web Master Research Best Practices CMS Trends Edustyle: EduCheckUp: educheckup.com/ Recommended Literature Web Design Beginners Guide [Willard] Eye Tracking Usability [Nielsen & Pernce] Web Designers Idea Book [McNeil] Web ReDesign Workflow that Works 3

4 Preliminary Steps Develop Task Force Purpose: To plan, design, develop, and implement the comprehensive redesign of the college website to enhance the visual appeal and navigation. This will include the development of a new site structure and navigation scheme that is student centered, supports instructional needs, and allows visitors to more quickly find the information they are seeking. Consensus Communication Wiki: Task Force Minutes Blog: Update Campus & Team Basecamp Online Project Management Tool Phases of Website Design and Development 1. Discovery - Information Gathering 2. Planning : Development of Site Structure 3. Site Design/Branding 4. Development/Production 5. Testing and Delivery 6. Maintenance 4

5 Phase 1: Discovery Phase Determine Purpose & Goals Identify Target Audience Conduct Needs Assessment Conduct Competitive Analysis Analyze Current Website Decide How to Measure Success! Phase 1: Draft Purpose & Goals Faculty & Staff Survey: Purpose of the PC Website (Ranked in Order of Importance) 1. Student Communication 2. Student Recruitment 3. Student Retention 4. Promotion of Activities 5. Community Awareness 6. Delivery of Online Courses 5

6 Phase 1: Develop Student Profiles Career Advancer Name: Seth Worthington Age: 35 Job: Public Relations Director at a Resort Hotel EDUCATIONAL GOAL: Works full-time and overtime and wants to obtain a degree in hotel management and transfer to the university to further career goals. He would like to take most of his classes online. High School Grad Name: Camille Castro Age: 17 Job: Works part-time at the mall in retail EDUCATIONAL GOAL: Wants to be a Kindergarten Teacher. First in her family to go to college and is applying for scholarships to help fund her education. She plans to go to college full-time and be active in clubs on the campus. Phase 1: Conduct Needs Assessment Student Survey Phoenix College conducted an online student survey designed to gather information about how students use the current website. 643 Responses: Current & Prospective Students, Alumni, Community Members Age range varied from under 17 to over 55 years of age (17 and under (3%) (57%) (21%), %, 55+ 3%). Most respondents tended to visit the website on a daily up to a weekly basis, and 94% were able to find what they were looking for when they visited. Note: Convenient Survey Tool Survey Monkey 6

7 Phase 1: Survey Questions & Responses Sample Question What information would help you make a decision about a specific degree or program? Response 96% Certificates and Degrees (Moderate 20% Important 76%) 94%% Time it Takes to Complete the Program (Moderate 26% Important 68%) 95% Career Information (Moderate 21% Important 74%) 91% Steps to Enroll (Moderate 26% Important 65%) 70% Faculty Biographies (Moderate 43% Important 27%) 68% Student Testimonials (Moderate 40% Important 28%) Phase 1: Student Survey Results What would you like to see improved? Better Navigation More Appealing Design Links to Important Areas (Financial Aid, Library, Bookstore, Scholarships) Calendar of Events Blackboard Link Program Degree Information Pages Improved Search Engine Instructor Information User Friendly Schedule of Classes Student Portal Sign-On Student Resources Page Organized by Task 7

8 Phase 1: Current Student Survey College Branding If PC were a car, what type of car would it be? And why? Qualities Cited Most Often: Comfortable, Reliable, and Affordable An Old classic - Been around forever and always reliable! Lincoln Navigator - Spacey, family like, and stylish at the same time but not too flashy!! Humble but respectable. Public Bus - Anyone can ride, there is plenty of room, gets you where you want to go, affordable and reliable. Scion - Affordable yet sufficient. Volkswagen Bug - It s a timeless classic. Everyone knows what it is and its been around forever and just gets better with time and new development. It is roomier than it looks. Phase 1: Conduct Competitive Analysis 1. Ten Second Test. What do you remember? 2. Website Evaluation Form MODEL WEBSITES Cornell University o o Strengths Classical design inspires confidence o Rich colors and images provided added interest. Northland College o o Strengths Large quality photos, creative use of fonts, interesting student profiles add to a casual and inviting design. Washtenaw Community College o o Strengths Creative design and illustrations add a warm, welcoming feel to the site. 8

9 Phase 1: Analyze Current Website Faculty & Staff Evaluation - Needed Improvements Easier to Edit and Update Clear Navigation More Space for Web Page Content Simplify Layout Updated Appearance Updated Information Consistency Phase 1: Develop a Wish List Faculty & Staff Survey: New Features Ad Space for Program/Event Highlights on Department/Program Web Page Calendar of Events Submission Form Student Activity Photo Gallery Ability to Create and Send Online Newsletters Communication Tools & Space (Blog, PodCast, Twitter, etc.) Interactive Forms Faster Editing Capability / User Friendly 9

10 Phase 1: Formal Discovery Brief Web Redevelopment Process: Discovery Website Objectives: Communication 1) Recruitment 2) Retention Findings & Recommendations o Key Redesign Goals o Competitive Analysis o Needs Analysis - Key Survey Findings Budget Proposal Key Redesign Goals 1. Improve and update the overall visual appeal while maintaining the brand image. 2. Provide an interactive personalized user experience. 3. Provide more space for content while allowing flexible use of space. 4. Increase usability and accessibility through consistent, clear and intuitive student focused navigation. 5. Simplify maintenance of site. 6. Optimize for maximum search engine visibility. 7. Use a web development platform and content management system that is extendable, developer-friendly, and sustainable. 8. Provide consistent, current and relevant information for all departments and programs. 9. Condense, simplify, and upgrade copy content using web writing styles and standards. 10. Add features which improve user experience. 10

11 Discovery Phase: Do s & Dont s DO Set SMART Goals. Make sure that your goals are strategic and measurable. Build an Integrated Web Task Force. Include critical stakeholders such as faculty, staff, students. Include area experts: IT, Web, Photographers, Designers, Copywriters. Follow Best Practices. Take a look at competition and capture what work s best. Use Communication Tools. Determine which communication tools work best for your team and agree on a method of decision making. Read Current Materials. Web ReDesign Workflow that Works helped our team to better understand the redesign process and build a working vocabulary. Discovery Phase: Do s & Dont s DON T Skip Discovery Phase. You may not want to conduct the Discovery Phase yourself but you should get involved in determining the needs of your stakeholders. Gather Information Through One Channel. Conduct focus groups with current and prospective students. Create survey s and post on current website and social media. Forget Alumni. Your alumnus can provide you with a wealth of information. They probably become your super users and can tell you which pages helped them the most. 11

12 Phase 2: Planning Development of Site Structure: 1. Select a Vendor 2. Leverage Analytics 3. Site Map and Information Architecture 4. Content Management System 5. Usability Testing Phase 2: Select a Vendor RFP Process Develop criteria Review vendor qualifications Select a Vendor 12

13 Phase 2: Leverage Analytics Search terms Pageviews Type and amount of traffic Phase 2: Site Map Site map and information architecture Navigation and menu structure User experience 13

14 Poll: #2 Content Management Systems What type of content management system does your college use? Campus Suite Drupal Ingeniux OmniUpdate SharePoint WordPress Jadu We don t use a CMS Other (use chat box) Phase 2: Content Management System Open Source vs Proprietary Features Share code Lock-in Funding 14

15 Phase 2: Content Management System Open Source Requirements Enterprise-ready Documentation Maintainability Features Commercial support Phase 2: Usability Testing Usability Testing Set Up Perform Tests Collect Data Report Results 15

16 Planning Phase: Do s & Dont s DO Create a site map. Building a site map will help you to understand your content and your audience better, and will help you to prioritize tasks when redesigning. Review your analytics. Your web traffic tells a lot about what students actually want. Don t ignore it. Consider maintainability. When selecting a content management system (CMS), choose a well known, well supported and welldocumented content management system. This will reduce long-term costs and frustration. Planning Phase: Do s & Dont s DON T Choose a CMS that is complex to use. A complex system will frustrate editors and cause dissatisfaction among stakeholders. Ensure the CMS is usable for basic editors. Assume. Don t make assumptions. Back up your research with data, and plan accordingly. 16

17 Phase 3: Site Design/Branding 1. Develop Rough Layout Wireframes 2. Create Design Style Guide 3. Develop Design Wireframes 4. Create Illustrations, Photography, and other Graphic or Audiovisual Content 5. Research, Write, Organize, and Edit Content Phase 3 Design: Develop Rough Wireframes Visual Representation of Content Layout Placement of Page Features Header, Footer, Content, Sidebars, and Navigation Benefits of Wireframing 17

18 Phase 3 Design: Develop Style Guide Develop Graphic Design Templates Develop a Style Guide* o Color Palette o Typography o Layout (Wireframe Guide) Elements o Image Guidelines Phase 3 Design: Graphic & Audiovisual Content Design Elements Illustrations Photography Video 18

19 Phase 3 Design: Design Wireframes Include Visual Elements 2 Options 3 Rounds Phase 3 Design: Writing Web Copy Research Program (Visit O*NET OnLine for detailed job descriptions, education requirements, wage and employment trend information.) Develop a Template Use Experienced Copywriters and Editors Verify Accuracy of Information Use Sub Headers & Bulleted Lists Sample: 19

20 Design Phase: Do s & Dont s DO Look at Design Trends. But don t be bound by them. Remember what your brand is and make sure that you strengthen your brand with a new design. Trends can go quickly. Keep Text Concise and Clear. Use sub-headings and bulleted lists to make it easier to read. Trust the Designer. This is their area of expertise. They will follow the Discovery Brief and present two or three templates for your team to work with. Design Phase: Do s & Dont s DON T Use Stock Photography. Hire a professional photographer and use your own students as models. Use Too Many Colors. Stick to a simple and pleasing palette. Integrate a lot of white space. Expect to Please Everyone. Team members may have conflicting opinions. Listen to their reasoning but do refer back to findings from the Discovery Phase. 20

21 Phase 4: Development & Production Working with a Vendor Theming and Development Customization and Refinement Content Entry & Migration Phase 4: Working with a Vendor Project Management & Communication Expectations Web Team Wireframes & Design Review Dealing with Contingencies 21

22 Phase 4: Theming and Development Converting the Designs Features & Functionality Customization and Refinement Phase 4: Customization and Refinement In-Progress Review Feedback and Refinement Programming and Customization User Experience 22

23 Phase 4: Content Entry & Migration Adding and Migrating Content Photography and Graphics Choosing Features Development Phase: Do s & Dont s DO Get caught up in small details. Don t worry about pixel perfection on the web pages. There are differences between different browsers and between different versions of the same browser. Don t spend too much time on insignificant features. Think about the big picture instead, and on the most important features to students. DON T Customize too much. Too much customization will cost more in the long run, and be harder to maintain. Don t expect the vendor to do all your work. Do your homework. Perform your research. Know your audience. Listen to stakeholders. 23

24 Phase 5: Testing & Delivery Evaluate Web Site Refinement Launch Update and Refine Maintenance: Do s & Dont s Collect Feedback Manage Content Update and Maintain 24

25 Maintenance: Do s & Dont s DO Collect and respond to feedback. Provide a way for faculty and staff, students, and visitors to submit comments. This ensures they have a voice in the process and have been considered. Provide ways for editors to contribute to the website. Whether it be through request forms, direct page editing, or workflow procedures - you can provide a consistent message and still give others a voice. Do provide options for departments and editors. Whether it be through request forms, direct page editing, or workflow procedures - you can provide a consistent message and still give others a voice. Maintenance: Do s & Dont s DON T Let content get old. Come up with a plan to review web content periodically and send notices to stakeholders when information needs to be updated. Be left without support. Maintain the website by funding a maintenance contract with a vendor, or be prepared to update and provide bug fixes to keep the site running smoothly. 25

26 Web ReDevelopment & ReDesign Timeline 2009: Web Task Force - Discovery Phase I (Fall) 2010: Discovery Completed, Preliminary Budget Approved (Spring), RFQ Design (Summer), Homepage & Subpage Wireframes, Style Guide / District RFP Process (Fall) 2011 Vendor Proposals (Spring) / Vendor Chosen / Additional Budget Approved Redesign and Redevelopment Started 2012 Content Editing, Migration Launch of New Website (Summer 2012) Resources Links Hand Outs Phoenix College Web Evaluation Guide PC Website Style Guide Web Redesign Brief 26

27 Thank you for your time! Questions? 27