In my last post, I wrote about Initial Sketches and Page layout.  At this stage I will use our content management system’s “playground” to build each page offline and experiment with content types as solutions to the limitations and constraints. Once I have built each page, it will be a matter of migrating the content to the live pages.

One of the most important pages to design is the degree page.  As we have learned from our analytics analysis, our target audience navigates directly to degree pages from our search bar.  This means we need to pay careful attention to the language we use on our page for the best SEO.  We also need to include all of the elements that the university has mandated for inclusion on this page.

We will need to include:

• a call to action,
• the degree summary
• program description
• application information
• learning outcomes
• links to degree requirements
• transfer information
• ranking information

We have decided to include:

• alumni testimonials
• Department contact information
• Link to the events calendar
• Entrance requirements
• Careers outcomes
• Unique banner
• 2 hero images

We may also include:

• Additional opportunities
• Study abroad
• Honors
• Specific course offerings
• Internships
• Exhibitions opportunities

Zones:

The site has three zones: A (central), B (right) and C (Left). 

In our web layout and structure explorations, we have decided to eliminate left hand navigation and so we will be working with a layout that just included zones A and B.

After much experimentation, I will be using the following basic web structure:

Banner
Horizontal Navigation
Hero Image	Call to action
Degree Description	Degree Requirements
Secondary Image	Program of Study
Secondary Description	Alumni Testimonial
Learning Outcomes	Ranking Information
Portfolio review information	Contact Information
Technical/Equipment information	Calendar of Events link
Emphasis/ Honors Information
Internships and Careers
Exhibition Information
Transfer Call to Action
Standard University Footer

Which once I chose the content items from the types available in our CMS, we have this as a basic structure:

Of course when we are optimizing this for mobile we are working with a single zone.  So our chart will look like this:

Banner

Horizontal Navigation

Call to action

Degree Requirements

Program of Study

Hero Image

Degree Description

Secondary Image

Secondary Description

Alumni Testimonial

Learning Outcomes

Portfolio review information

Technical/Equipment information

Emphasis/ Honors Information

Internships and Careers

Exhibition Information

Transfer Call to Action

Ranking Information

Contact Information

Calendar of Events link

Standard University Footer

I will use this basic pattern to create the photography, Digital Design, Art History, and Visual Art Degree pages. Standardizing this content will also serve another function.  Departmentally we have many content contributors, and this will allow us to standardize how we check for updates.  It will be easy to create a form that says: “Check your alumni quote, your primary content, images, and submit any updates to the web manager.”

Overall, I am pleased with this layout and I think we are going to have an exciting page that informs our target audience.

Next steps:

Project Management: Identifying and collecting content, teaching others how to write for the web, introducing a sprint.

I recently led a redesign for the Art and Art History departmental web pages at Seattle University.  Previously I wrote about Identifying the Objectives, and The New IA.  My third step was designing the initial page layout.

My foremost design goal was to adhere to the identified objectives of:

• navigation
• redundancy
• relevance

Limitations:

In the previous iteration of this site, the navigation and IA were limited by the structure, the content types available in the Content Management System, the university branding guidelines, and elements mandated to be included in particular places and on particular pages.  These limitations are still at play in the redesign although we will attempt to work with and around them when possible. Maintainability is a primary consideration, as there are staff and time constraints to keeping the information on these pages current. 

Design limitations will include:

• Layout
• Color
• Content types
• Content items
• Branding guidelines

As determined in the restructuring of the IA, the new menu structure will be horizontal and fixed to six items:

Pages that need to be Built:

• The Main department page: Art and Art History “splash page”
• Degrees and Minors Page
  • Digital Design Degree Page
  • Art History Degree Page
  • Photography Degree Page
  • Visual Art Degree Page
  • Minor in Studio Art Page
  • Minor in Art History
• Innovative Programs Page
• Classrooms and Galleries Page
• Alumni Page

As a personal preference, I usually start designing with a sharpie and paper, making quick outlines of elements and general placement.  In this particular case, these sketches were very important to illustrate to the web team where we were heading.

Art and Art History departmental “Splash Page”

This page serves an introduction to the department. The Department needs to keep the content current and fresh. This page is not as important as it would seem, most of the audience will not be searching for the department, but the degree pages.  Nevertheless, the page should be impactfull and needs to be representative of a dynamic and diverse department. 

I envision the department page as a carousal of rotating content highlighting; the faculty, gallery exhibitions, visiting artists, student features, events, and courses produced by the department. The page will also feature an overview of the department.  I will need to update the content quarterly.

Degrees and Minors Page:

This page will include the educational philosophy for the department, a mission statement so to speak, brief descriptions and hero images for each of the degrees offered and links to the degree pages.

This page is a provides a brief overview of each degree, serves as a landing page for prospective students who’d like to explore additional degrees offered by the department.

Individual Degree Pages Photography, Design, Art History, Visual Art

The Individual Degree pages are arguably the most important pages.  The university does do analytic tracking and has concluded that prospective student are landing at particular degree pages through the search bar.  This is the most important audience as prospective students are our customer base.

There are elements mandated for inclusion on this page. Including: a call to action, the degree summary, program description, application information, learning outcomes, links to degree requirements, etc.

My first inclination with these pages is to make them very similar to each other, this way the pages will be learnable, and maintainable.  This sketch will be the general degree page plan.

Faculty and Staff Page

Directory pages are straightforward, images and basic contact information.  This is a content type maintained at the college level, and it will just be a matter of including the banner, navigation and organizing into an understandable hierarchy.

Innovative Programs

The section we are titling innovative programs is a bit of a catchall.  It is a navigational summary, and a concentrate of content that in the past has contributed to the spread of the IA. It is also a way to introduce our audience to the breath of what we offer. The web committee went around in circles trying to name this section, before eventually landing on innovative programs.  It is a difficult thing to categorize partnerships, endowments, assistantships, internships, and residency programs into a single menu heading.

This page will have photos and descriptions in similar content blocks, with links were applicable, to standalone program pages.

Classrooms and Galleries

The Classrooms and Galleries page will have photos of the spaces and descriptions of what happens in those spaces.  In the case of the Galleries, there will be links to individual gallery pages. This seemingly simple page is vital to selling our prospective students on enrolling.  Students will need to imagine themselves in the space so dynamic photos and strong enticing descriptions will be imperative.

This page will have a list of spaces with links to content further down a long scroll page.

Student work

This page is a bit of a conundrum.  Ideally, this page will include work from students in each major, and likely will have a slideshow of images for each degree. The trick will be careful asset management to ensure swift load times. If multiple slideshows are not reasonable, I will explore alternative designs.

Alumni

The Alumni page resolves to contain images and news features on departmental alumni.

Next steps:

Because this is a redesign of a site controlled by a content management system that has a “playground, instead of moving to design comps, I will begin to build each page offline and experiment with content type solutions. Once I have built each page, it will be a matter of migrating the content to the live pages.