best practices for university websites
DESCRIPTION
Cool Schools: A look at the design and technology features best in class Higher Education websites are utilizing to distinguish themselves.TRANSCRIPT
![Page 1: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/1.jpg)
SCHOOLSCreating best-in-class university websites.
COOL
![Page 2: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/2.jpg)
Multiple programs, stakeholders and technology options make higher education sites a major challenge.
![Page 3: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/3.jpg)
For most prospective students, your website will
be their first impression
![Page 4: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/4.jpg)
Failure to effectively manage your web presence may eventually affect enrollment and rankings.
![Page 5: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/5.jpg)
Three keys to ensuring your web site achieves best in class:
![Page 6: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/6.jpg)
Step 1:We do thorough research.
ONE:
User Experience Design
![Page 7: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/7.jpg)
User Interface
Context
Copywriting
Services
Human Factors
Products
DesignUsability
Content
UXuser experience
Layout and Design
Information
Architecture
Company Logo
Lifestyle
Product Culture
Business Process
Community Engagement
Interactivity
Brand
UX Design is an approach to designing interactive systems that considers the overall experience of the end user.
![Page 8: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/8.jpg)
Instantly engage students with compelling visuals.
![Page 9: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/9.jpg)
9
example 2
Simple, elegant design creates a strong first impression.
![Page 10: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/10.jpg)
10
Photos can tell powerful, emotionally affecting stories.
![Page 11: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/11.jpg)
11
stats
Create an instant affinity withprospective students.
![Page 12: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/12.jpg)
11
stats
Extend visual experience to interior pages.
![Page 13: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/13.jpg)
Create an intuitive navigation system and information architecture.
![Page 14: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/14.jpg)
Experience Flows ensure rigor around navigation structure
Device Starting Content 1-st Interaction 2-nd Interaction 3-rd Interaction
Smartphone Home Page
Tablet Home Page
Desktop/laptop Landing Page
![Page 15: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/15.jpg)
13
example 2
Content and flows should be organized around distinct user profiles.
![Page 16: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/16.jpg)
14
example 1
Create visual cues to differentnavigation types.
![Page 17: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/17.jpg)
stats
Build your key value propositions into your Information Architecture
![Page 18: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/18.jpg)
stats
Use tabs and visual callouts to createalternate navigation paths.
![Page 19: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/19.jpg)
stats
Create dedicated social media channels for admissions and integrate prominently on pages.
![Page 20: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/20.jpg)
More focus on providing a strong feel for the school experience.
![Page 21: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/21.jpg)
Create visually driven features on unique aspects of life at the school
21
![Page 22: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/22.jpg)
18
Incorporate video tour guides with interactive elements.
![Page 23: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/23.jpg)
19
stats
Design a tour around typical activities rather than geography.
![Page 24: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/24.jpg)
24
Give prospective students an experience of campus life from a credible source.
![Page 25: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/25.jpg)
Two:
Mobile Experience
![Page 26: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/26.jpg)
A mobile version of your site content is essential to reaching today’s students.
![Page 27: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/27.jpg)
By 2014, mobile traffic will outpacenon-mobile.
![Page 28: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/28.jpg)
28
![Page 29: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/29.jpg)
29
![Page 30: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/30.jpg)
• Make elements touch-friendly
• De-emphasize distractions
• Create a visual hierarchy
• Allow users to quickly jump to different content
• Match branding
The goals when designing a Mobile version of your site
![Page 31: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/31.jpg)
There are new options for engineering a mobile experience from your existing site.
![Page 32: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/32.jpg)
• 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
EXAMPLE:Moovweb provides a cost effective
approach to engineering a mobile site.
![Page 33: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/33.jpg)
Moovweb allows you to design logic andre-prioritization of content for mobile.
![Page 34: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/34.jpg)
UNIVERSITY MOBILE SITESBEST PRACTICES
![Page 35: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/35.jpg)
Essential HeaderElements
• Search
• Retina Logo
• Button for persistent navigation
• no more than three buttons to maintain a clutter-free experience
![Page 36: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/36.jpg)
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.
![Page 37: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/37.jpg)
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.
![Page 38: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/38.jpg)
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.
![Page 39: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/39.jpg)
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.
![Page 40: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/40.jpg)
Three:Rigorous Process
![Page 41: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/41.jpg)
A successful launch comes as a result of executing a well defined process.
41
![Page 42: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/42.jpg)
PROCESS OVERVIEW
![Page 43: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/43.jpg)
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
![Page 44: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/44.jpg)
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
![Page 45: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/45.jpg)
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
![Page 46: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/46.jpg)
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
![Page 47: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/47.jpg)
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)
![Page 48: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/48.jpg)
Launch1. Site Deployment
2. Post Launch Monitoring
![Page 49: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/49.jpg)
RECAP
![Page 50: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/50.jpg)
Multiple programs, stakeholders and technology options make higher education sites a major challenge.
![Page 51: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/51.jpg)
For most prospective students, your website will
be their first impression
![Page 52: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/52.jpg)
Failure to effectively manage your web presence may eventually affect enrollment and rankings.
![Page 53: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/53.jpg)
6
1. User Experience Design2. Mobile Experience3. Rigorous Process
Here are three keys to ensuring your web site achieves best in
class:
![Page 54: Best Practices for University Websites](https://reader034.vdocuments.site/reader034/viewer/2022051412/54c205064a7959a87b8b458d/html5/thumbnails/54.jpg)
Who We AreJar 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