usd college of arts and sciences - information architecture and style tile

Content Structure and Style TileCOLLEGE of ARTS AND SCIENCES

Presentation Overview

• Recap

• Information Architecture

• Design Elements and Style Tile

• Next Steps

Target Audience

UNDECLARED & PROSPECTIVE

STUDENTS

STAFF & ADMIN

FACULTY

CURRENT STUDENTS

INDUSTRY PARTNERS

HIRING CORPS.

PROSPECT. FACULTY

ALUMNIDONORS

COMMUNITY

Target Audience

Content Focus

Target Audience

Content Focus

Prospective and Undeclared Students

Target Audience

Content Focus


Current Students, Faculty and Staff

Target Audience

Content Focus

Donors, Alumni and Community



Target Audience

Content Focus

Donors, Alumni and Community



Industry Partners and Hiring Corporations

Project Goals

• Audience-Focused

• Well-Balanced Education

• Research & Scholarships

• Strong Relationships

• Student Outcomes

SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN2014 2015 2016

Timeline

RESEARCH& DISCOVERY

Redesign Kick-off

CONTENT &STRUCTURE

Structure Review


Timeline

RESEARCH& DISCOVERY

Redesign Kick-off

CONTENT &STRUCTURE

Structure Review

DESIGN

Design Review


Timeline

RESEARCH& DISCOVERY

Redesign Kick-off

CONTENT &STRUCTURE

Structure Review

DESIGN

Design Review

DEVELOPMENT

Final Review


Timeline

LAUNCH

RESEARCH& DISCOVERY

Redesign Kick-off

CONTENT &STRUCTURE

Structure Review

DESIGN

Design Review

DEVELOPMENT

Final Review

Terminology

Information Architecture:

Identity:

Style Tile:

Landing Page:

structure of a site; navigation flow and how content is organized

different visual components and features that help define the College and its various departments

a set of design elements that create a cohesive digital presence such as fonts, colors, icons and buttons

refers to any page that a user arrives at after clicking a hyperlink to enter a section of a site

Mobile-First Approach

Traditional Design Method

Mobile-First Method

Audience: Provide What They Need, Where They Need It

Audience: How do they consume information?

• Various devices / screen sizes / locations

• Multiple entry points, search and links

• Different places in the decision-making process

How do we deliver information?

Current

• Unbalanced

• Static / Rigid

• Buried Info

• Duplicate Content

• Placeholder Pages

Improved

• Balanced

• Dynamic / Flexible

• Move to Top

• Modules, Links and Shortcuts

• Meaningful Content

How do we navigate?

Majors and Minors Graduate Programs Advising Faculty About

How do we navigate?

Majors and Minors Graduate Programs Advising Faculty About

First-Year Students

Transfer Students

Pre-Law

Pre-Health

Prepare for Registration

Prepare for Graduation

Career Services

How do we make it easier?

Persistent Links (calls to action)

• Apply Now

• Give

• Visit

• Contact



• Apply Now

• Give

• Visit

• Contact

Shortcuts (identified by audience needs)

• Prospective Students

• Current Students

• Faculty and Staff

• Parents

• Alumni

• Transfer Students

• Visitors

• Veterans



• Apply Now

• Give

• Visit

• Contact

Shortcuts (identified by audience needs)

• Prospective Students

• Current Students

• Faculty and Staff

• Parents

• Alumni

• Transfer Students

• Visitors

• Veterans

Utilities (tools people use)

MySanDiego Blackboard Mail Maps Directory Calendar Bookstore Libraries

Department Site Structure

• What is it?

• How does it work?

• Where does it happen?

• What tools do we offer?

• Why are we awesome?


• What is it?





Programs


• What is it?





Programs

Research, Fieldwork, Exhibits


• What is it?





Programs


Labs, Galleries, Performance Venues


• What is it?





Programs



Resources, Clubs, Organizations


• What is it?





Programs



Resources, Clubs, Organizations

Why Choose (Program)?

Elements and Style Tile

Style and Elements

Round Edges: softer, lighter, more inviting

Slanted Line: modern, cool, engagingAPPLY TODAY

COLOR PALETTE

ACCENT COLORS

This is an Example of a HeaderSubtitle / Lead Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulpue felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo porttitor, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mauris. Suspendisse blanmagna quis.

MENU

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut leifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo port, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mau. Suspendisse bland magna quis. Donec arcu turpid, tempus nec eros sit amet, efficitur tempor mauris. – Anonymous

TITLE Classic Font (confident, professional) Darker color (bold, power) Decreased font size to increase real estate

CONTENT Increased font size for readability Quicker and easier to scan text

TYPOGRAPHY

This is an Example of a HeaderSubtitle / Lead Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulpue felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo porttitor, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mauris. Suspendisse blanmagna quis.

MENU

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut leifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo port, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mau. Suspendisse bland magna quis. Donec arcu turpid, tempus nec eros sit amet, efficitur tempor mauris. – Anonymous

TITLE Classic Font (confident, professional) Darker color (bold, power) Decreased font size to increase real estate

CONTENT Increased font size for readability Quicker and easier to scan text

TYPOGRAPHY

This is an Example of a HeaderSub Title / Lead Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo porttitor, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mauris. Suspendisse blandit, magna quis.

ON DESKTOP Increased title font size Decreased content font size More white space

DESIGN ELEMENTS

QUOTE MODULES

APPLY TODAYALUMNI Spotlight SEE MORE INFO

Lorem ipsum dolor sit amet, adipiscing elit. Phasellus pharetra felis eu porta. Ut eleifend est sed velit suscipit. Cras ac urna fringilla, aliquet,vulputate lorem. Etiam placerat erosvehicula dictum et sed mauris. Suspanmagna quis. Donec arcu turpis, tempussit amet, efficitur tempor mauris. – Anonymous

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla, aliquet justo port, vulputate lorem. Etiam placerat eros nec neque vehicula dictum et sed mauris. Suspendisse bland magna quis. Donec arcu turpis, tempus nec eros sit amet, efficitur tempor mauris. – Anonymous

Familiar, Youthful and Inviting

DESIGN ELEMENTS

QUOTE MODULES





Prominent Calls to Action

DESIGN ELEMENTS

QUOTE MODULES





Bold, Visual Cues

Prominent Calls to Action

DESIGN ELEMENTS

QUOTE MODULES




MEET OUR FACULTY MODULE

WHY CHOOSE MODULE

John DoeAnthropology

SEE MORE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra vulputate felis eu porta. Ut eleifend est sed velit malesuada suscipit. Cras ac urna fringilla.

Why ChoosePsychology?

MYPOSTINGS NEWS AND EVENTS

In the News

MONDAY, FEBRUARY 2, 2015

USD Chemistry & Biochemistry Students Selected for National Honor SocietyAliquam sagittis turpis luctus, placerat augue vitaelaoreet, risus rutrum gravida commodo, urna urna.

Upcoming Events

MAR Event Title12:30 a.m. - 12:30 p.m. | Building Room 127

MAR Event Title12:30 a.m. - 12:30 p.m. | Building Room 130

APR Event Title12:30 a.m. - 12:30 p.m. | Building Room 111

MAY Event Title12:30 a.m. - 12:30 p.m. | Building Room 119

MAY Event Title12:30 a.m. - 12:30 p.m. | Building Room 128

Summary

• Dynamic content

• Clearly defined benefits for students

• Highlight department personality

• Consistent, but flexible

Next Steps

Design and Development Review August 2015

Redesign Website Presentation Slides and Style Tile www.sandiego.edu/redesign

http://www.sandiego.edu/redesign

Thank You and Q&A