The University of San Diego web team reviewed information about the new website's information architecture (i.e. navigation structure) with the College of Arts and Sciences advisory board along with a design preview for the new website in the form of style tiles

1. Content Structure and Style Tile
COLLEGE of ARTS AND SCIENCES

2. Presentation Overview
• Recap
• Information Architecture
• Design Elements and Style Tile
• Next Steps

3. Target Audience
UNDECLARED
& PROSPECTIVE
STUDENTS
STAFF &
ADMIN
FACULTY
CURRENT
STUDENTS
INDUSTRY
PARTNERS
HIRING
CORPS.
PROSPECT.
FACULTY
ALUMNIDONORS
COMMUNITY

4. Target Audience
Content Focus

5. Target Audience
Content Focus
Prospective and
Undeclared Students

6. Target Audience
Content Focus
Prospective and
Undeclared Students
Current Students,
Faculty and Staff

7. Target Audience
Content Focus
Donors, Alumni
and Community
Prospective and
Undeclared Students
Current Students,
Faculty and Staff

8. Target Audience
Content Focus
Donors, Alumni
and Community
Prospective and
Undeclared Students
Current Students,
Faculty and Staff
Industry Partners and
Hiring Corporations

9. Project Goals
• Audience-Focused
• Well-Balanced Education
• Research & Scholarships
• Strong Relationships
• Student Outcomes

10. SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN
2014 2015 2016
Timeline
RESEARCH
& DISCOVERY
Redesign
Kick-off
CONTENT &
STRUCTURE
Structure
Review

11. SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN
2014 2015 2016
Timeline
RESEARCH
& DISCOVERY
Redesign
Kick-off
CONTENT &
STRUCTURE
Structure
Review
DESIGN
Design
Review

12. SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN
2014 2015 2016
Timeline
RESEARCH
& DISCOVERY
Redesign
Kick-off
CONTENT &
STRUCTURE
Structure
Review
DESIGN
Design
Review
DEVELOPMENT
Final
Review

13. SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN
2014 2015 2016
Timeline
LAUNCH
RESEARCH
& DISCOVERY
Redesign
Kick-off
CONTENT &
STRUCTURE
Structure
Review
DESIGN
Design
Review
DEVELOPMENT
Final
Review

14. 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

15. Mobile-First
Approach

16. Traditional Design Method

17. Mobile-First Method

18. Audience:
Provide What They Need,
Where They Need It

19. Audience: How do they consume information?
• Various devices / screen sizes / locations
• Multiple entry points, search and links
• Different places in the decision-making process

20. 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

21. How do we navigate?
Majors and Minors Graduate Programs Advising Faculty About

22. 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

23. How do we make it easier?
Persistent Links
(calls to action)
• Apply Now
• Give
• Visit
• Contact

24. How do we make it easier?
Persistent Links
(calls to action)
• Apply Now
• Give
• Visit
• Contact
Shortcuts
(identified by audience needs)
• Prospective Students
• Current Students
• Faculty and Staff
• Parents
• Alumni
• Transfer Students
• Visitors
• Veterans

25. How do we make it easier?
Persistent Links
(calls to action)
• 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

26. Department Site Structure
• What is it?
• How does it work?
• Where does it happen?
• What tools do we offer?
• Why are we awesome?

27. Department Site Structure
• What is it?
• How does it work?
• Where does it happen?
• What tools do we offer?
• Why are we awesome?
Programs

28. Department Site Structure
• What is it?
• How does it work?
• Where does it happen?
• What tools do we offer?
• Why are we awesome?
Programs
Research, Fieldwork, Exhibits

29. Department Site Structure
• What is it?
• How does it work?
• Where does it happen?
• What tools do we offer?
• Why are we awesome?
Programs
Research, Fieldwork, Exhibits
Labs, Galleries, Performance Venues

30. Department Site Structure
• What is it?
• How does it work?
• Where does it happen?
• What tools do we offer?
• Why are we awesome?
Programs
Research, Fieldwork, Exhibits
Labs, Galleries, Performance Venues
Resources, Clubs, Organizations

31. Department Site Structure
• What is it?
• How does it work?
• Where does it happen?
• What tools do we offer?
• Why are we awesome?
Programs
Research, Fieldwork, Exhibits
Labs, Galleries, Performance Venues
Resources, Clubs, Organizations
Why Choose (Program)?

32. Elements
and Style Tile

33. Style and Elements
Round Edges: softer, lighter, more inviting
Slanted Line: modern, cool, engagingAPPLY TODAY

34. COLOR PALETTE
ACCENT COLORS

35. This is an Example of a Header
Subtitle / 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 blan
magna 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

36. This is an Example of a Header
Subtitle / 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 blan
magna 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

37. This is an Example of a Header
Subtitle / 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 blan
magna 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 Header
Sub 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

38. 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 eros
vehicula dictum et sed mauris. Suspan
magna quis. Donec arcu turpis, tempus
sit 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

39. Familiar, Youthful
and Inviting
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 eros
vehicula dictum et sed mauris. Suspan
magna quis. Donec arcu turpis, tempus
sit 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

40. Familiar, Youthful
and Inviting
Prominent
Calls to Action
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 eros
vehicula dictum et sed mauris. Suspan
magna quis. Donec arcu turpis, tempus
sit 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

41. Familiar, Youthful
and Inviting
Bold,
Visual Cues
Prominent
Calls to Action
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 eros
vehicula dictum et sed mauris. Suspan
magna quis. Donec arcu turpis, tempus
sit 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

42. MEET OUR FACULTY MODULE
WHY CHOOSE MODULE
John Doe
Anthropology
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 Choose
Psychology?

43. MYPOSTINGS NEWS AND EVENTS
In the News
MONDAY, FEBRUARY 2, 2015
USD Chemistry & Biochemistry Students
Selected for National Honor Society
Aliquam sagittis turpis luctus, placerat augue vitae
laoreet, risus rutrum gravida commodo, urna urna.
Upcoming Events
MAR Event Title
12:30 a.m. - 12:30 p.m. | Building Room 127
MAR Event Title
12:30 a.m. - 12:30 p.m. | Building Room 130
APR Event Title
12:30 a.m. - 12:30 p.m. | Building Room 111
MAY Event Title
12:30 a.m. - 12:30 p.m. | Building Room 119
MAY Event Title
12:30 a.m. - 12:30 p.m. | Building Room 128

44. Summary
• Dynamic content
• Clearly defined benefits for students
• Highlight department personality
• Consistent, but flexible

45. Next Steps
Design and Development Review
August 2015
Redesign Website
Presentation Slides and Style Tile
www.sandiego.edu/redesign

46. Thank You
and Q&A