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

1. OLS
COOOL
SCH
est-in-class
Creating b
y websites.
universit

2. Multiple programs, stakeholders and
technology options make higher
education sites a major challenge.

3. For most prospective
students, your website will
be their first impression

4. Failure to effectively manage your
web presence may eventually
affect enrollment and rankings.

5. Three keys to ensuring your web
site achieves best in class:

6. ONE:
Step 1:
User Experience Design
We do thorough research.

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. Instantly engage students with
compelling visuals.

9. Simple, elegant design creates a
strong first impression.
example 2
9

10. Photos can tell powerful,
emotionally affecting stories.
10

11. Create an instant affinity with
prospective students.
stats
11

12. Extend visual experience to interior
pages.
stats
11

13. Create an intuitive navigation system
and information architecture.

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. Content and flows should be organized
around distinct user profiles.
example 2
13

16. Create visual cues to different
navigation types.
example 1
14

17. Build your key value propositions into your
Information Architecture
stats

18. Use tabs and visual callouts to create
alternate navigation paths.
stats

19. Create dedicated social media channels for
admissions and integrate prominently on pages.
stats

20. More focus on providing a strong feel
for the school experience.

21. Create visually driven features on
unique aspects of life at the school
21

22. Incorporate video tour guides with
interactive elements.
18

23. Design a tour around typical
activities rather than geography.
stats
19

24. Give prospective students an experience
of campus life from a credible source.
24

25. Two:
Mobile Experience

26. A mobile version of your site content is
essential to reaching today’s students.

27. By 2014, mobile traffic will outpace
non-mobile.

28. 28

29. 29

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. There are new options for engineering a
mobile experience from your existing site.

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. Moovweb allows you to design logic and
re-prioritization of content for mobile.

34. UNIVERSITY MOBILE SITES
BEST PRACTICES

35. Essential Header
Elements
•
•
•
•
Search
Retina Logo
Button for persistent
navigation
no more than three
buttons to maintain a
clutter-free experience

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. 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. 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. 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. Three:
Rigorous Process

41. A successful launch comes as a result
of executing a well defined process.
41

42. PROCESS OVERVIEW

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. 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. 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. 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. 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. Launch
1. Site Deployment
2. Post Launch Monitoring

49. RECAP

50. Multiple programs, stakeholders and
technology options make higher
education sites a major challenge.

51. For most prospective
students, your website will
be their first impression

52. Failure to effectively manage your
web presence may eventually
affect enrollment and rankings.

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