Best Practices for University Websites

9,936 views
9,539 views

Published on

Cool Schools: A look at the design and technology features best in class Higher Education websites are utilizing to distinguish themselves.

Published in: Education, Technology
3 Comments
21 Likes
Statistics
Notes
No Downloads
Views
Total views
9,936
On SlideShare
0
From Embeds
0
Number of Embeds
315
Actions
Shares
0
Downloads
351
Comments
3
Likes
21
Embeds 0
No embeds

No notes for slide

Best Practices for University Websites

  1. 1. OLS COOOL SCH est-in-class Creating b y websites. universit
  2. 2. Multiple programs, stakeholders and technology options make higher education sites a major challenge.
  3. 3. For most prospective students, your website will be their first impression
  4. 4. Failure to effectively manage your web presence may eventually affect enrollment and rankings.
  5. 5. Three keys to ensuring your web site achieves best in class:
  6. 6. ONE: Step 1: User Experience Design We do thorough research.
  7. 7. UX Design is an approach to designing interactive systems that considers the overall experience of the end user. Context User Interface Copywriting Interactivity Products Layout and Design Design Usability Content Services UX user experience Information Architecture Human Factors Brand Company Logo Community Engagement Lifestyle Business Process Product Culture
  8. 8. Instantly engage students with compelling visuals.
  9. 9. Simple, elegant design creates a strong first impression. example 2 9
  10. 10. Photos can tell powerful, emotionally affecting stories. 10
  11. 11. Create an instant affinity with prospective students. stats 11
  12. 12. Extend visual experience to interior pages. stats 11
  13. 13. Create an intuitive navigation system and information architecture.
  14. 14. Experience Flows ensure rigor around navigation structure Device Starting Content Smartphone Home Page Tablet Home Page Desktop/ laptop Landing Page 1-st Interaction 2-nd Interaction 3-rd Interaction
  15. 15. Content and flows should be organized around distinct user profiles. example 2 13
  16. 16. Create visual cues to different navigation types. example 1 14
  17. 17. Build your key value propositions into your Information Architecture stats
  18. 18. Use tabs and visual callouts to create alternate navigation paths. stats
  19. 19. Create dedicated social media channels for admissions and integrate prominently on pages. stats
  20. 20. More focus on providing a strong feel for the school experience.
  21. 21. Create visually driven features on unique aspects of life at the school 21
  22. 22. Incorporate video tour guides with interactive elements. 18
  23. 23. Design a tour around typical activities rather than geography. stats 19
  24. 24. Give prospective students an experience of campus life from a credible source. 24
  25. 25. Two: Mobile Experience
  26. 26. A mobile version of your site content is essential to reaching today’s students.
  27. 27. By 2014, mobile traffic will outpace non-mobile.
  28. 28. 28
  29. 29. 29
  30. 30. The goals when designing a Mobile version of your site • Make elements touch-friendly • De-emphasize distractions • Create a visual hierarchy • Allow users to quickly jump to different content • Match branding
  31. 31. There are new options for engineering a mobile experience from your existing site.
  32. 32. EXAMPLE: Moovweb provides a cost effective approach to engineering a mobile site. • Deliver amazing responsive experiences without expensive rebuilds • Plan mobile delivery from the beginning of the projects • Leverage our expertise and process to define mobile experience
  33. 33. Moovweb allows you to design logic and re-prioritization of content for mobile.
  34. 34. UNIVERSITY MOBILE SITES BEST PRACTICES
  35. 35. Essential Header Elements • • • • Search Retina Logo Button for persistent navigation no more than three buttons to maintain a clutter-free experience
  36. 36. Hero Images • • The best performing hero images are static and simple. Customers rarely swipe or wait to view a second or third hero image inside of a carousel.
  37. 37. Navigation • • Appears on the home page of each site, allowing the user to quickly select desired content The menu options are identical to the desktop’s navigation.
  38. 38. Search • • • Search on mobile websites is expected Customers are accustomed to immediately seeing a search bar on the homepage often used as a way to circumvent complex navigation.
  39. 39. Accordions • • Accordions are another commonly used method for organizing extensive content. A large section of text is collapsed into a button with an icon to represent either a closed or open state.
  40. 40. Three: Rigorous Process
  41. 41. A successful launch comes as a result of executing a well defined process. 41
  42. 42. PROCESS OVERVIEW
  43. 43. Research Phase 1. Kick/off discovery session with key stakeholders (Including development team leaders) 2. Competitive analysis report 3. Define user roles and target personas 4. List user goals and needs
  44. 44. Planning 1. Content inventory and prioritization of content by device 2. Site map 3. SEO analysis and plan 4. Compile draft of site copy 5. Home page sketches 6. Architectural solution
  45. 45. Design and Branding 1. Design/creative Kickoff Meeting (including developer) 2. Mood boards 3. Multi Device Sketches 4. Detailed Wireframes 5. High fidelity designs 6. Style Guides
  46. 46. Development 1. Kick Off meeting with designers, developers and PM to review design user stories, functional and non-functional requirement 2. Development of Beta Site 3. Internal Review of site by designer/ account manager and fixes 4. External Review by Client and fixes 5. Reporting/Analytics set up
  47. 47. Quality Assurance / User Acceptance 1. Internal beta testing/Fixes 2. Client Beta testing/UAT/Fixes 3. Client Sign-off 4. Tutorial 5. Prepare manual (if applicable)
  48. 48. Launch 1. Site Deployment 2. Post Launch Monitoring
  49. 49. RECAP
  50. 50. Multiple programs, stakeholders and technology options make higher education sites a major challenge.
  51. 51. For most prospective students, your website will be their first impression
  52. 52. Failure to effectively manage your web presence may eventually affect enrollment and rankings.
  53. 53. Here are three keys to ensuring your web site achieves best in class: 1. User Experience Design 2. Mobile Experience 3. Rigorous Process 6
  54. 54. Who We Are Jar Creative is a digital experience agency based in Toronto, Canada. We are designers, strategists and technologists who are passionate about building great websites, mobile applications and online products. Our clients include well-known international brands and small entrepreneurial businesses. www.jarcreative.com

×