Best Practices for University Websites

SCHOOLSCreating best-in-class university websites.

COOL

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

For most prospective students, your website will

be their first impression

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

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

Step 1:We do thorough research.

ONE:

User Experience Design

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.

Instantly engage students with compelling visuals.

9

example 2

Simple, elegant design creates a strong first impression.

10

Photos can tell powerful, emotionally affecting stories.

11

stats

Create an instant affinity withprospective students.

11

stats

Extend visual experience to interior pages.

Create an intuitive navigation system and information architecture.

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

13

example 2

Content and flows should be organized around distinct user profiles.

14

example 1

Create visual cues to differentnavigation types.

stats

Build your key value propositions into your Information Architecture

stats

Use tabs and visual callouts to createalternate navigation paths.

stats

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

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

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

21

18

Incorporate video tour guides with interactive elements.

19

stats

Design a tour around typical activities rather than geography.

24

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

Two:

Mobile Experience

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

By 2014, mobile traffic will outpacenon-mobile.

28

29

• 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

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

EXAMPLE:Moovweb provides a cost effective

approach to engineering a mobile site.

Moovweb allows you to design logic andre-prioritization of content for mobile.

UNIVERSITY MOBILE SITESBEST PRACTICES

Essential HeaderElements

• Search

• Retina Logo

• Button for persistent navigation

• no more than three buttons to maintain a clutter-free experience

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.

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.

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.

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.

Three:Rigorous Process

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

41

PROCESS OVERVIEW

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

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

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

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

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)

Launch1. Site Deployment

2. Post Launch Monitoring

RECAP

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

For most prospective students, your website will

be their first impression

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

6

1. User Experience Design2. Mobile Experience3. Rigorous Process

Here are three keys to ensuring your web site achieves best in

class:

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