Fast Responsive Design for Higher Education

1. Background

2. Principles

3. Process

4. Design: Best Practices

Houston Community College A case study

A focus on higher educationStrategy

UX

Design

Development

Social media

iFactory

My brain

Designer

Developer

What is Responsive Design?

A site whose visual display responds to the device on which it is used

“Make our site work on mobile”

It’s not...

a separate mobile site

a native app

a site that talks to you

HCC Redesign: Challenges

14,000 pages

81 subdomains

7 colleges

20 locations

8+ audiences

Massive site

25% of traffic from mobile

Would be higher if mobile experience was good

For many users, mobile is their primary or only means of web access

Skyrocketing mobile use

4 months

Aggressive timeline

July November

Principles

1A great user experience and extensible / maintainable

2Don’t dumb down mobile – offer same functionality on all devices

3Prioritize calls to action

4Avoid an accidental look – always appear intentional

Process

Wireframe 5 most important screens

Step 1: On-site working session

Home Typical Program & Course Finder

College Home

Academic Dept

Step 2: Desktop designs

Step 3: Tablet & phone designs

Chrome

Firefox

IE9

IE8

Step 4: Build & Test

iPhone

iPad

Android 4 phone

Android 4 tablet

Android 2.3 phone

Design: Best Practices

Primary navigation & search

Navigation

Mega menus

Navigation

Section navigation

Navigation

Filters

Navigation

Manage white space – don’t fear it

Layout

Hover & click – multiple actions on same link

Touch

Large tap targets

Touch

Swipeable carousels

Touch

Logos, icons, shapes

Resolution

Optimized Not Optimized

1. Let principles drive tradeoffs

2. Abbreviate the process via working sessions

3. Test on the most popular devices

4. Avoid reinventing the wheel by following best practices for design

Time-saving tips

Thank You

Facebook iFactoryBoston

Twitter @iFactoryBoston