web design project approach
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.comTRANSCRIPT
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
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
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
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
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.
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
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
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
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
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
Project Crucible
Project Timeline
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
Project Crucible
Enhanced visual appeal and modernization
Use of strong photography
Clear division of screen real estate
Breadth of offerings and promotions
Project Crucible
Masthead visible on all web pages
Primary navigation segments traffic
Secondary navigation
Utility navigation
Breadcrumb navigation
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
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
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
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.
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
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
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
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