The document outlines a template review meeting held for Chase Manhattan Bank, detailing the agenda and objectives related to a content management system and the design for a new website, 'new chase.com'. It discusses the advantages of a template-based website, including improved publishing speed, cost savings, and enhanced user experience. The presentation includes specifications for template design, the integration process with the Futuretense Internet Publishing System, and steps for finalizing template specifications.

1. Template Review Meeting Presentation & Discussion presented to Chase Manhattan Bank Site Strategy & Direction Team & The Content Migration Team March 29, 1999

2. Agenda Introduction Provide History and Context Templates and Design Content Management System Template Objectives Content Types Break Template Functionality Gather Input and Recap 9:00 - 9:15 am 9:15 - 10:15 am 10:15 - 10:30 am 10:30 - 12:00 pm

3. How do Templates fit in the Bigger Picture? Content reconfigured into “new chase.com” design and information architecture Existing Content Moving to New Chase.Com New Content Created for New Chase.Com Finalized “New Chase.Com” Designs Content Management System Search Metatags Functional Templates Coded

4. Templates Separate the content from the presentation of the content Include predefined areas for text and graphics

5. Why Move to a Template-based Site? Increase speed of publishing new content Eliminate the need to create custom code for each new piece of content Enable non-technical resources to update content Encourages consistency in: Look and feel: users experience consistent Chase identity Navigation: users have a stable structure and are less likely to get lost or be confused Enable Chase to quickly make global changes Save money and time for updates Common Process throughout the Enterprise Save money and time on training and support

6. About Content Management Systems Supports workflow to publish new content in a timely manner Allows for version control and archiving of web-related files Minimizes the possibility of overwriting files when multiple people are working on the same file Dynamically publish web pages Assures users see the freshest content Provides a platform for future Personalization

7. About FutureTense: Developed the FutureTense Internet Publishing System (IPS) Provides services for high-quality, high-volume environment: for Web production staff for delivery of content to end-users Enables Chase to: streamline production index information to make it searchable feed information into standard templates support workflow processes track revisions to web-related files

8. iXL & FutureTense iXL: Has translated designs for pages into templates. Has worked closely with FutureTense to insure templates work within the IPS. Will deliver templates and specifications to Chase and FutureTense. (Planned 4/1) FutureTense and Chase: Will integrate the templates into IPS. Prepare the templates and system for the migration of content. (Planned 4/15)

9. Template Specifications based on Design Guidelines Design Guidelines : (flexible) are recommendations to follow when designing a page to insure maximum usability and consistency include “soft” guidelines such as: whenever possible, use lists instead of dropdowns place emphasis of usable information, rather than sales minimize usage of paragraphs on “directory pages” Specifications: (less flexible) are the detailed, technical instructions needed to create a page of the design include “hard” data such as: image size has a maximum width of 350 pixels header typeface is Verdana, 18 point bold

10. Template Design Process 1. Consider previous input and learning 2. Break Pages into Components 3. Identify Variability Flexibility Standards

11. Template Design: Page Analysis, Step 2 Breaking down each page into it’s component parts, including the following: Navigation Header Body Text Bulleted Lists Images Links Linksets Sub-Headers Footer

12. Template Design: Page Analysis, Step 3 Identifying the trade-off between Standards & Flexibility Areas for Standards Presence of Chase logo and other branding elements Location and functionality of Navigation (breadcrumbs) Recommended Areas for Standards Font size for header, body, and footer sections Aspect ratio of photographs Areas for Flexibility Number of images Length of pages/Layout in content area

13. Break 15 Minutes

14. Today

15. 6.15

16. After 6.15

17. Today

18. 6.15

19. After 6.15

20. Today

21. 6.15

22. Templates & Sub-Templates Templates can be made up of Sub-Templates Templates and Sub-Templates: Define Visual Geometry Provide code to talk to the “Back-end” Usage of Sub-Template provides flexibility

23. Global Templates: Overview Left Navigation Top Navigation Content Area Specialty Navigation Below Left Navigation

24. Global Templates: Top Navigation (TN)

25. Global Templates: Left Navigation (LN)

26. Global Templates: Specialty Navigation (SN) Reserved for Middle Market, Private Bank, CMS, etc. Should not be used to feature functionality, products, special offers, etc.

27. Global Templates: Below Left Navigation (BLN) - Option 1 Option 1 is a linkset: has fixed width has varying height

28. Global Templates: Below Left Navigation (BLN) - Option 2 Option 2 is 1-3 graphics: have fixed width have varying height

29. Sub-Template G1: Overview Header Body Footer

30. Sub-Template G1: Header Options or or or or

31. Sub-Template G1: Header Option 1 Option 1 is a one column, one row solution. This option can contain either text or a graphic. Chase Credit Cards or or

32. Sub-Template G1: Header Option 2 CDs & Rates Chase Liability Products CDs & Rates or or

33. Sub-Template G1: Header Option 3 Valued Card Members The Service you deserve from your Chase Gold Bell Atlantic Credit Card or or

34. Sub-Template G1: Header Option 4 Can contain HTML End user sees normal display Must know HTML to use Maximum Flexibility

35. Sub-Template G1: Header Option 5 Used for pages with log-in box only

36. Sub-Template G1: Body Options or or

37. Sub-Template G1: Body Option 1 1. Choose Content , Content Component, Content Order 2. The system links your choices to form an Article 3. The Article is presented in the Template

38. Sub-Template G1: Body Option 1 1. Choose Content , Order, and Type Text, Bulleted Lists, Images, Links, Linksets, Sub-Headers Choose any mix of 5 to create an Article A Group of Articles is a Collection Article A - Graphic, Text, Text, Linkset, Bulleted List % Order - 1, 2, 3, 4, 5 Article B - Graphic, Graphic, Graphic, Graphic, Graphic Article C - Sub-Header, Text, Bulleted List, (BLANK) , (BLANK) Article D - Graphic, (BLANK), Text, (BLANK), Linkset } Collection

39. Sub-Template G1: Body Option 1: 3 Column Article Example 1. Choose Content Pick 5 Content Types and Content Pick Order of the Content Types 2. The system creates an Article 3. Article is published into the Body Template Graphic, (BLANK), Text, (BLANK), Linkset Article D

40. Sub-Template G1: Body Option 2 Build a collection of articles to present in a body template Any Questions? Article A - Graphic, Text, Text, Linkset, Bulleted List Article B - Graphic, Graphic, Graphic, Graphic, Graphic Article C - Sub-Header, Text, Bulleted List, (BLANK) , (BLANK) Article D - Graphic, (BLANK), Text, (BLANK), Linkset

41. Body Example Homepage Personal Credit Card Bell Atlantic Gold Card

42. Body Example

43. Graphic Text Graphic Link Empty Empty

44. Graphic Text Graphic Empty Empty Empty

45. Sub-Template G1: Body Option 3 Can contain HTML End user sees normal display Must know HTML to use Maximum Flexibility

46. Sub-Template G1: Footer

47. Sub-Template G1: Footer Page Specific Content Area (LOB) Specific Content

48. Post 6.15 6.15 is a direct migration Post 6.15 you take advantage of more features of the template

49. Sub-Template G2 H Same with less width No B Same with less width only two columns in an article (“2 in a row”) F Same with less width

50. Sub-Template G2: Header Options or or or

51. Sub-Template G2: Body Options or or or

52. Sub-Template G2: Footer

53. Sub-Template G2: Right Side Bar

54. Sub-Template G2: Right Side Bar

55. Sub-Template G2: Right Side Bar Background Graphic with linkset HTML Bucket Graphic Header Link Link Link Link Text Header Link Link Link Link

56. Questions

57. Next Steps Receive Feedback Finalize Specifications Deliver Template Specification and Code to Chase and FutureTense