Web Design Project Approach

22
Project Crucible PROJECT CRUCIBLE Web and CMS Transformation Whatever is put into a crucible comes out transformed. A crucible is a container that can withstand very high temperatures and is used for metal, glass, and pigment production. Crucibles can be made from any material that withstands temperatures high enough to melt or otherwise alter its contents. Association of College and University Housing Officers - International

description

There are many approaches to overhauling a website's design and CMS. This project for the Association of College and University Housing Officers - International is an approach that will help leapfrog the association to the forefront of web design and best practices. Project led by Shaun Holloway and James Baumann. http://www.srholloway.com

Transcript of Web Design Project Approach

Page 1: Web Design Project Approach

Project Crucible

PROJECT CRUCIBLEWeb and CMS Transformation

Whatever is put into a crucible comes out transformed.A crucible is a container that can withstand very high temperatures

and is used for metal, glass, and pigment production. Crucibles can be made from any material that withstands temperatures

high enough to melt or otherwise alter its contents.

Association of College and University Housing Officers - International

Page 2: Web Design Project Approach

Project Crucible

Project Overview

• Purpose

– Aged design and back-end support environment currently hold back potential of leveraging online capabilities

– Transform user experience, content management, and availability of channel integration

Page 3: Web Design Project Approach

Project Crucible

Project Overview

• Strategic Fit

– Web must attract, retain, and serve current and future members, donors, and sponsors

– Aid in being the indispensable authority on college and university housing

– Complement specific strategies and goals of different departments and communication needs

Page 4: Web Design Project Approach

Project Crucible

Goals and Impact

• Advance brand and available marketing channels

• Improve user experience and accessibility

• Enable flexibility in website management

• Increase revenue opportunities

• Amplify the voice of ACUHO-I members

Page 5: Web Design Project Approach

Project Crucible

Success Metrics

• Increased utilization of web presence– Engagement metrics– Program and course registrations– Revenue streams

• Enhanced reputation amongst benchmarks

• Increased visibility and visitor participation– Search engine results– Analytic stats… visitation, time, etc.

Page 6: Web Design Project Approach

Project Crucible

Current Situation

• Analytic and System Data (2011)– ~264,000 visitors– 2,405 average visitors per day

• Phone Logs Reveal Need for:– Clearer content– Self-service

Jan-11

Feb-11

Mar-11

Apr-11

May-11

Jun-11Jul-1

1

Aug-11

Sep-11

Oct-11

Nov-11

Dec-11

0

20,000

40,000

60,000

80,000

100,000

120,000

140,000

160,000

180,000

200,000

PageViewsVisitors

Page 7: Web Design Project Approach

Project Crucible

Benchmarking

• Mix of sister associations and sites utilizing modern design and usability principles

• NASPA• APPA• NACUFS• Ronald McDonald

House Charities• BarackObama.com• Resource.com

• U. of Washington Alumni Association

• Specialized Library Association

• Crestron.com• Lyris.com• Investools.com• nasa.gov

Page 8: Web Design Project Approach

Project Crucible

Benchmarking

• Key findings

– Use of modular design in content elements

– Use of photography and key messaging

– Action-oriented language with sales twist

– Information is organized and hierarchal

Page 9: Web Design Project Approach

Project Crucible

Parallel Track Development

• Web Strategy Model

• Design, System, and Social tracks working at the same time

Resource

Attract Retain

Serve

EngageSales

Orientation

InformAdvertising Orientation

Design

System Social

InterfaceUsability

NavigationSitemap

IntegrationServer architecture

Database designAdmin tools

New mediaVisibility

ConnectionApplication

Audience Content

Channel

Page 10: Web Design Project Approach

Project Crucible

Approach

• Phase One– Focus on development of global elements, styles,

templates, and tools– Establish a “launchable state” for the framework– Each area will launch but may not get an overhaul

• Phase Two– Continue completion of evaluations for each

sub-site; similar process done at the site level

Page 11: Web Design Project Approach

Project Crucible

Project Timeline

Page 12: Web Design Project Approach

Project Crucible

Concept Designs

• 3-step process to work to present concept

• Hired professional designer to work with us

• Analogy… this is an architectural rendering.– Design will change slightly during construction

Page 13: Web Design Project Approach

Project Crucible

Enhanced visual appeal and modernization

Use of strong photography

Clear division of screen real estate

Breadth of offerings and promotions

Page 14: Web Design Project Approach

Project Crucible

Masthead visible on all web pages

Primary navigation segments traffic

Secondary navigation

Utility navigation

Breadcrumb navigation

Page 15: Web Design Project Approach

Project Crucible

Display of mega dropdown navigation

Additional visual screen real estate

New navigation depth to improve usability from anywhere

Faster drill down of key messages

Page 16: Web Design Project Approach

Project Crucible

Modular approach to content display

Dynamic content and feed capable

ADA compliant

User familiarity

Standardized footer visible on every page

SEO and SEM friendly

Page 17: Web Design Project Approach

Project Crucible

Level 1 Landing Page

Consistent layout

Use of photos for impact and key messaging

Begin left navigation

Showing and telling ACUHO-I’s story with a sales focus

“Intra-site” advertising, promote own offerings

Page 18: Web Design Project Approach

Project Crucible

Level 2+ Web Page

Consistent layout

Sub-site display with various display tools

Flexible for content and applications in the main content column

Right column area for content… text, photos, videos, links, etc.

Page 19: Web Design Project Approach

Project Crucible

Smart Phone Size Version

Responsive design moves online presence to be accessible on many devices

This is NOT an app. It is the browser view.

View the “desktop version” link displayed

Page 20: Web Design Project Approach

Project Crucible

Smart Phone Size Version

Example of content display on brand

Modular approach allows content to flex

No content duplication, maximum availability

Stable environment, update from anywhere

Page 21: Web Design Project Approach

Project Crucible

Email Newsletter Design Concept

An example of what an email template may look like.

Series of email templates with varying wireframe styles will be developed.

Continues web look and feel

Delineates area for own offerings promotion

Page 22: Web Design Project Approach

Project Crucible

Next Steps

• Upcoming Milestones by January 2013– Design approval– Sitemap approval– CMS decision

• Other Project Touch-points– AMS project… portal design, email templates, etc.– Mobile app project… design, content feeds, etc.– Foundation for future projects