Web Concept Design for OSU Fisher College of Business

1,357 views
1,239 views

Published on

Here's a design presentation deck that I used to sell the new web concept design to the stakeholders at The Ohio State University's Fisher College of Business. The design takes the college to a new level and sets the foundation for the rest of our strategy.

Presentation by Shaun Holloway:
http://www.srholloway.com

Published in: Design, Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,357
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Concept Design for OSU Fisher College of Business

  1. 1. Fisher Website 2.0 Next Generation Web Design: Evolution and Enhancements fisher.osu.edu March 2009 Offices of Information Technology Services and External Relations
  2. 2. Website Mission and Vision Offices of Information Technology Services and External Relations <ul><li>Mission </li></ul><ul><li>to attract, retain, and serve Fisher’s current and future faculty, students, and alumni through emerging and existing Internet technologies. </li></ul><ul><li>Vision </li></ul><ul><li>To build a virtual community and embraces the work of our thought leaders and establishes Fisher as a resource in the eyes of our audiences through the services and information we provide. </li></ul>
  3. 3. Key Objectives Foundation Offices of Information Technology Services and External Relations <ul><li>Built off of Discovery Phase website audit between March - October 2007 </li></ul><ul><li>Benchmarking research of business schools, universities, and other industries between May 2007 - July 2008 </li></ul><ul><li>Extension of brand guidelines enhancements completed in the summer 2008 </li></ul><ul><li>Save money. Use of vendor’s creative web design and familiarity with Fisher </li></ul>
  4. 4. Key Objectives Foundation Offices of Information Technology Services and External Relations <ul><li>Reach and Scope </li></ul><ul><ul><li>global audience </li></ul></ul><ul><ul><li>entire college web presence </li></ul></ul><ul><ul><ul><li>own websites – internal/external </li></ul></ul></ul><ul><ul><ul><li>3 rd party user interfaces </li></ul></ul></ul><ul><li>Impact </li></ul><ul><ul><li>consistent college look and feel </li></ul></ul><ul><ul><li>streamline development and marketing </li></ul></ul>
  5. 5. Fisher Client Focused Offices of Information Technology Services and External Relations <ul><li>Internal stakeholder review </li></ul><ul><ul><li>feedback and suggestions </li></ul></ul><ul><ul><li>included in the design </li></ul></ul><ul><ul><li>align with units’ goals and audience </li></ul></ul><ul><li>Links currently accessible from the homepage will remain </li></ul>
  6. 6. Key Objectives Offices of Information Technology Services and External Relations <ul><li>Advance Fisher’s brand </li></ul><ul><li>Enhance the user experience </li></ul><ul><li>Improve website management </li></ul><ul><li>Improve Internet marketability </li></ul>Concepts shown as a flow from the home page to level 4
  7. 7. Advance Fisher’s Brand Offices of Information Technology Services and External Relations <ul><li>Reinforce college as a market leader </li></ul><ul><li>Modernize look and feel of design </li></ul><ul><li>Establish consistency – one college </li></ul><ul><li>Create a memorable experience </li></ul><ul><li>Support marketing and communications </li></ul><ul><li>Leverage OSU’s brand and web design . </li></ul>
  8. 8. Brand Design Approach Offices of Information Technology Services and External Relations <ul><li>Evolution of previous design and new brand guidelines </li></ul><ul><ul><li>use of enhanced photography </li></ul></ul><ul><ul><li>distinguish brand – e.g. medallions </li></ul></ul><ul><li>Quickly convey industry leadership </li></ul><ul><li>Offer relevant content </li></ul><ul><li>Positive user experience </li></ul>
  9. 9. Brand Design Approach December 2008 | Offices of Information Technology Services and External Relations <ul><li>Deliver clear, multiple communication paths to most desired content </li></ul><ul><li>Create more opportunities to connect and interact with the site </li></ul><ul><li>Highlight and credentials personal stories </li></ul>
  10. 10. Enhance the User Experience Offices of Information Technology Services and External Relations <ul><li>Consistent, no-thought navigation </li></ul><ul><li>Intuitive access to breadth and depth of content from across the college </li></ul><ul><li>Enhance rich-media and text content </li></ul><ul><ul><li>photos, video, audio </li></ul></ul><ul><ul><li>content drill-down </li></ul></ul><ul><li>Build foundation for social media tools </li></ul><ul><li>Engage the users on a deeper level </li></ul>
  11. 11. Visitor Approach Offices of Information Technology Services and External Relations <ul><li>New visitors goal </li></ul><ul><ul><li>quickly gain top-level understanding </li></ul></ul><ul><ul><li>inspire them to learn more </li></ul></ul><ul><ul><li>provide multiple paths to key areas </li></ul></ul><ul><ul><li>reduce number of clicks to content </li></ul></ul><ul><ul><li>easily find contacts and connections </li></ul></ul>
  12. 12. Visitor Approach Offices of Information Technology Services and External Relations <ul><li>Repeat visitors goal </li></ul><ul><ul><li>find new, updated information </li></ul></ul><ul><ul><li>download or feed information </li></ul></ul><ul><ul><li>access to key contacts or information </li></ul></ul><ul><ul><li>quick access to MyFisher </li></ul></ul><ul><ul><li>deeper level of interaction </li></ul></ul><ul><ul><li>become advocates, word-of-mouth </li></ul></ul>
  13. 13. Improve Website Management Offices of Information Technology Services and External Relations <ul><li>Build framework for expansion of content and application </li></ul><ul><li>Support template structure </li></ul><ul><li>Integration into a CMS </li></ul><ul><li>Layout and design standards allow for improved non-technical staff training </li></ul>
  14. 14. Improve Website Marketability Offices of Information Technology Services and External Relations <ul><li>Keyword optimization </li></ul><ul><li>Allow bots to crawl content paths easier </li></ul><ul><li>Intra-site marketing opportunity </li></ul>
  15. 15. Improve Website Marketability Offices of Information Technology Services and External Relations <ul><li>Extend the user experience </li></ul><ul><ul><li>cross-leverage the design to 3 rd party applications </li></ul></ul><ul><ul><li>consistency across Fisher related sites </li></ul></ul><ul><li>Compliance </li></ul><ul><ul><li>OSU Web Accessibility Center </li></ul></ul><ul><ul><li>Section 508 </li></ul></ul>
  16. 16. Design Strategy – Home Page Offices of Information Technology Services and External Relations <ul><li>Single visual design elements combine to create a tone, engages users, and invites interaction </li></ul><ul><ul><li>photos, architecture, medallions, unique angles, color palette </li></ul></ul><ul><li>Use of screen real estate </li></ul><ul><ul><li>expandable and flexible areas </li></ul></ul><ul><ul><li>time sensitive messaging capable </li></ul></ul>
  17. 17. Design Strategy – Home Page Offices of Information Technology Services and External Relations <ul><li>Establishes layout for entire website </li></ul><ul><ul><li>position of global elements </li></ul></ul><ul><ul><li>position of navigation </li></ul></ul><ul><li>New depth and edge to homepage </li></ul><ul><ul><li>all-purpose feature gallery </li></ul></ul><ul><ul><li>additional outlet for hi-profile content </li></ul></ul><ul><li>Opportunity to establish guidelines </li></ul>
  18. 18. Design Strategy – Sub-levels Offices of Information Technology Services and External Relations <ul><li>Clean and open feel </li></ul><ul><li>Improved page architecture – readability </li></ul><ul><li>Content displayed to encourage deeper exploration into site </li></ul>
  19. 19. Design Strategy – Sub-levels Offices of Information Technology Services and External Relations <ul><li>Graphic elements provide visual cues for enhanced usability </li></ul><ul><li>Modular sub-design offers customizable options within the brand design </li></ul><ul><li>Stylized tables, classes, and visual formats cleanly display information CONSISTENTLY across entire website </li></ul>
  20. 20. Fisher’s Website as of December 2008
  21. 21. November 2008 OSU new web design
  22. 22. June 2009 Current web design
  23. 23. November 2008 Half step forward Usability and navigation tests
  24. 24. Use of strong photography Medallions as distinguishing factor Clear division of screen real estate All who have links currently will remain New depths of new and constant info Slide 10
  25. 25. OSU navigation bar OSU brand feel Fisher branded Masthead visible on all web pages Primary navigation is audience-based Secondary navigation Utility navigation Slide 11
  26. 26. Display of Fisher multimedia gallery Photos or video Additional layer to home page content Shows depth of events and impact Faster drill down of key messages Slide 12
  27. 27. Display use of drop-down navigation ADA compliant User familiarity Expandable / flexible Standardized footer visible on every page Slide 13
  28. 28. Level 1 Web Page Consistent layout “ Hot buttons” geared toward respective audiences Visual icons Use of style and photos Begin use of “breadcrumb navigation”
  29. 29. Level 2 Web Page Consistent layout Flexible space in design to allow various forms of content and applications Showcase events and announcements Potential user-generated content
  30. 30. Level 3 Web Page Photography banners maintain graphic design of the brand at the lowest level Example of styled table for consistent use Use of Fisher color palette throughout
  31. 31. Level 3 Web Page Photography banners also carry key messages and showcase faculty, teaching, and events Column style can be a layout option depending on the content
  32. 32. Level 3 Web Page Example of content display on brand Modules on the right are flexible Modules can be created as tools or widgets that can be used across the entire website
  33. 33. Level 3 Web Page Shows flexibility in the template structure Different ways to display content to the user Use of medallion as signature element
  34. 34. Level 4 Web Page Consistent layout Example styled tables and displaying content with flexibility Example of a way to display multimedia content inside of a page Left navigation shows location to user

×