Building A New LaunchPad from the Ground Up

A New LaunchPad From the Ground Up Designing a Gateway for the Hotel School Web Ecosystem Casey Dreier Web Systems Programmer Cornell School of Hotel Administration

A New LaunchPad From the Ground Up Takeaways: 1. Designing a Gateway for the Hotel School Web Ecosystem Everyone Should Have a Gateway Page 2. Design Considerations of a Gateway Web Page: Simplicity, Flexibility, Humility, and Hyperlocality 3. Gateway pages can create a sense of a uniﬁed web system, and foster a shared user experience Casey Dreier Web Systems Programmer Cornell School of Hotel Administration

What is LaunchPad? • Not the Public Home Page • A specific term for a general idea of a gateway page to specific online resources • Used as a universal start page for the Hotel School students and staff • Provides access to useful online services • Different flavors for Students and Staff • Fundamentally, a Collection of Links

Search Cornell Statler Launch Pad Welcome Home Launch Pad Learn How To Customize People Search Click here to learn how to customize the color, modules, and more. Cornell Electronic Directory Click here to learn how to add personalized links (video) Google Search School Quick Links Accident Report Calendars Change Cornell Password Directories Google Search E-Reqs Search WWW Employee Essentials Search cornell.edu Faculty Center Faculty Reporting Webster Dictionary Health & Wellness Human Resources Merriam- Webster Online Kronos Dictionary Maintenance Request Thesaurus Material Safety Data Click Here to Make This Your Default HomePage Sheets (MSDS) Nestle Library Online Travel Reimbursements Skillsoft uPortal View Paycheck On- line

Search Cornell Statler Launch Pad Welcome Home Launch Pad Learn How To Customize People Search Click here to learn how to customize the color, modules, and more. Cornell Electronic Directory Click here to learn how to add personalized links (video) 1 Google Search School Quick Links Accident Report Calendars Change Cornell Password Directories Google Search E-Reqs Search WWW Employee Essentials Search cornell.edu Faculty Center Faculty Reporting Webster Dictionary Health & Wellness Human Resources Merriam- Webster Online Kronos Dictionary Maintenance Request Thesaurus Material Safety Data Click Here to Make This Your Default HomePage Sheets (MSDS) Nestle Library Online Travel Reimbursements Skillsoft uPortal View Paycheck On- line

Search Cornell Statler Launch Pad Welcome Home Launch Pad Learn How To Customize People Search Click here to learn how to customize the color, modules, and more. Cornell Electronic Directory Click here to learn how to add personalized links (video) 1 2 Google Search School Quick Links Accident Report Calendars Change Cornell Password Directories Google Search E-Reqs Search WWW Employee Essentials Search cornell.edu Faculty Center Faculty Reporting Webster Dictionary Health & Wellness Human Resources Merriam- Webster Online Kronos Dictionary Maintenance Request Thesaurus Material Safety Data Click Here to Make This Your Default HomePage Sheets (MSDS) Nestle Library Online Travel Reimbursements Skillsoft uPortal View Paycheck On- line

Search Cornell Statler Launch Pad Welcome Home Launch Pad Learn How To Customize People Search Click here to learn how to customize the color, modules, and more. Cornell Electronic Directory Click here to learn how to add personalized links (video) 1 2 3 Google Search School Quick Links Accident Report Calendars Change Cornell Password Directories Google Search E-Reqs Search WWW Employee Essentials Search cornell.edu Faculty Center Faculty Reporting Webster Dictionary Health & Wellness Human Resources Merriam- Webster Online Kronos Dictionary Maintenance Request Thesaurus Material Safety Data Click Here to Make This Your Default HomePage Sheets (MSDS) Nestle Library Online Travel Reimbursements Skillsoft uPortal View Paycheck On- line

Search Cornell Statler Launch Pad Featured Links Welcome Home (deemed most important) Launch Pad Learn How To Customize People Search Click here to learn how to customize the color, modules, and more. Cornell Electronic Directory Click here to learn how to add personalized links (video) Google Search School Quick Links Accident Report Calendars Change Cornell Password Directories Google Search E-Reqs Search WWW Employee Essentials Search cornell.edu Faculty Center Faculty Reporting Webster Dictionary Health & Wellness Human Resources Merriam- Webster Online Kronos Dictionary Maintenance Request Thesaurus Material Safety Data Click Here to Make This Your Default HomePage Sheets (MSDS) Nestle Library Online Travel Reimbursements Skillsoft uPortal View Paycheck On- line

Search Cornell Statler Launch Pad Welcome Home Launch Pad Learn How To Customize People Search Click here to learn how to customize the color, modules, and more. Cornell Electronic Directory Click here to learn how to add personalized links (video) Google Search School Quick Links Secondary Contextual Links Accident Report Calendars (depend on user and initial Change Cornell Password Directories Google Search URL, different for Students E-Reqs Search WWW Employee Essentials Search cornell.edu and Staff, hierarchical) Faculty Center Faculty Reporting Webster Dictionary Health & Wellness Human Resources Merriam- Webster Online Kronos Dictionary Maintenance Request Thesaurus Material Safety Data Click Here to Make This Your Default HomePage Sheets (MSDS) Nestle Library Online Travel Reimbursements Skillsoft uPortal View Paycheck On- line

Search Cornell Statler Launch Pad Welcome Home Launch Pad Learn How To Customize Header and Internal Navigation People Search Click here to learn how to customize the color, modules, and more. Cornell Electronic (Home, Customize, Login/Logout) Directory Click here to learn how to add personalized links (video) Google Search School Quick Links Accident Report Calendars Change Cornell Password Directories Google Search E-Reqs Search WWW Employee Essentials Search cornell.edu Faculty Center Faculty Reporting Webster Dictionary Health & Wellness Human Resources Merriam- Webster Online Kronos Dictionary Maintenance Request Thesaurus Material Safety Data Click Here to Make This Your Default HomePage Sheets (MSDS) Nestle Library Online Travel Reimbursements Skillsoft uPortal View Paycheck On- line

Search Cornell Statler Launch Pad Welcome Home Launch Pad Learn How To Customize Widgets People Search Click here to learn how to customize the color, modules, and more. Cornell Electronic (News, Search, Dictionary, etc) Directory Click here to learn how to add personalized links (video) Google Search School Quick Links Accident Report Calendars Change Cornell Password Directories Google Search E-Reqs Search WWW Employee Essentials Search cornell.edu Faculty Center Faculty Reporting Webster Dictionary Health & Wellness Human Resources Merriam- Webster Online Kronos Dictionary Maintenance Request Thesaurus Material Safety Data Click Here to Make This Your Default HomePage Sheets (MSDS) Nestle Library Online Travel Reimbursements Skillsoft uPortal View Paycheck On- line

Why Have a LaunchPad?

Why Have a LaunchPad? 4 full-time web programmers

Why Have a LaunchPad? 4 full-time web programmers x 8 years

Why Have a LaunchPad? 4 full-time web programmers x 8 years + Cornell Central Web Services

Why Have a LaunchPad? 4 full-time web programmers x 8 years + Cornell Central Web Services > 100 different online resources

Why Have a LaunchPad? 4 full-time web programmers x 8 years + Cornell Central Web Services > 100 different online resources We needed a way to keep all this organized

Why? (cont) • People don’t remember URLs • Bookmarks become cluttered and intermingle with unrelated resources • With LaunchPad, we control the hierarchy and implied importance of resources • Fundamentally, though....

LaunchPad is Useful • ~120,000+ visits/ month • ~800 visitors/day • High student participation

LaunchPad is Useful • ~120,000+ visits/ month • ~800 visitors/day 41% • High student 59% participation

So Why Re-do it? • Modernize the Look and Feel (same since 2001) • Streamline functionality • Still ﬁxing bugs after eight years • Re-examine the utility and focus • Make it easier to work with (for users and developers)

Goals of a New LaunchPad

Philosophy • Get users off the page as quickly as possible. • Paraphrasing Rumsfeld (1932 C.E.), we use the LaunchPad to highlight: • Known Knowns (Common, oft-used sites) • Known Unknowns (Sites users know *should* exist) • Unknown Unknowns (You can do what now?)

Improve Design • Flexible, modern design via CSS • Fast loading (minimum of images) • Easy-to-read (larger text, consistent implementation of styles) • Simpliﬁed layout

Improve Usability • One Page to Rule Them All (http://onepagelove.com)

Search Cornell Statler Launch Pad Welcome Home Launch Pad Learn How To Customize Internal Navigation People Search Click here to learn how to customize the color, modules, and more. Cornell Electronic * You should not need this! * Directory Click here to learn how to add personalized links (video) Google Search School Quick Links Accident Report Calendars Change Cornell Password Directories Google Search E-Reqs Search WWW Employee Essentials Search cornell.edu Faculty Center Faculty Reporting Webster Dictionary Health & Wellness Human Resources Merriam- Webster Online Kronos Dictionary Maintenance Request Thesaurus Material Safety Data Click Here to Make This Your Default HomePage Sheets (MSDS) Nestle Library Online Travel Reimbursements Skillsoft uPortal View Paycheck On- line

Improve Usability • One Page to Rule Them All (http://onepagelove.com) • A More Natural UI (drag and drop) • Fewer Options • Unite content from various internal sources

Improve Maintenance • Built with future expansion in mind • More readable code • Embrace standard frameworks (JQuery, Ruby on Rails) • Fewer bugs (unit and functionality testing)

Challenges

Challenge: Competition • Why make a LaunchPad when there’s iGoogle, My Yahoo, NetVibes, etc? • Focus on Hyperlocality

Hyperlocal • Information that is extremely relevant to a very speciﬁc, limited audience • Usually in reference to new type of news reporting that focuses on neighborhood- level events

Challenge: Competition • Why make a LaunchPad when there’s iGoogle, My Yahoo, NetVibes, etc? • Focus on Hyperlocality • You know your web ecosystem and can serve as a better Editor than individual users. • Design to your core users

Challenge: Attachment • Current system has been up for 8+ years and many are used to the way things work • Give fair warning • Maintain (most) of what’s there already • Guided introduction and help

Challenge: Old Data • Previous data exists and needs to be persisted into the new site. • Ask what really needs to be saved? • In our case, custom links. • Too few options to bother carrying over Widgets, plus new design renders layout preservation moot.

Spoiler

Search Cornell GO: STATLER WIRE SCHOOL OF HOTEL ADMINISTRATION STATLER HOTEL OUTLOOK BLACKBOARD CU INFO School Links Sign in to Launch Pad Accident Report E-Reqs Maintenance Reqeust Search Calendars (2) Employee Essentials Material Safety Data Sheets (MSDS) Academic Calendar Faculty Center Nestle Library Google Cornell People Employee Holidays Faculty Reporting Online Travel Reimbursements Search Change Cornell Password Health & Wellness (3) Skillsoft Directories (4) Cornell Fitness Centers Weather uPortal Alumni Directory Gannet View Paycheck Online Wednesday, April 22nd, 2009. Course Directory Wellness Program Web Financials Faculty Directory Human Resources Current Conditions: Who I Am Light Rain, 46 F Ph. D. Students Kronos SHA Event Calendar Forecast: Tue - Showers/Wind. High: 61 Low: 38 Labor and Employment Law Roundtable Wed - Showers. High: 48 Low:

Process

Functionality First • LaunchPad was almost entirely functional before any CSS was written or design ﬁnalized • Focused on feature development, implementation, and testing • Encourages well-written, style-free XHTML

web.projects.each do |rails| • Experimental ﬁrst project using Ruby on Rails framework • First step in new programming direction focusing on an a priori structuring of code • Allowed for rapid development, unit testing, data validation, session handling

What Do I Mean By a priori? • By using a mature, open-source framework, a developer’s code is forced into a common structure • Code representing different types of common functionality (data validation, email-handling, querying, etc) must exist in speciﬁc locations and function according to certain rules

What Do I Mean By a priori? • That means a future developer knows in advance where a particular functionality resides and how it plugs into the system (a priori). • This reduces the amount of time a developer must take to understand previous work (a posteriori), and generally makes the code more readable

Implementing Maintenance • Goal: Reduce Maintenance Time: • Ruby is extremely readable and light on syntax • Support for unit testing with easy test data (ﬁxtures) reduces bugs • Rails has built-in data validation and processing functions

Implementing Design • Goal: Simpliﬁcation • 3-columns —› 2-columns • Fewer Graphics and clearer text (no link graphics, dark text on light background) • Clear delineation of header and content • Consolidated similar content

Search Cornell header GO: STATLER WIRE SCHOOL OF HOTEL ADMINISTRATION STATLER HOTEL OUTLOOK BLACKBOARD CU INFO School Links Sign in to Launch Pad Accident Report E-Reqs Maintenance Reqeust Search Calendars (2) Employee Essentials Material Safety Data Sheets (MSDS) Academic Calendar Faculty Center Nestle Library Google Cornell People Employee Holidays Faculty Reporting Online Travel Reimbursements Search Change Cornell Password Health & Wellness (3) Skillsoft Directories (4) Cornell Fitness Centers Weather uPortal Alumni Directory Gannet View Paycheck Online Wednesday, April 22nd, 2009. Course Directory Wellness Program Web Financials Faculty Directory Human Resources Current Conditions: Who I Am Light Rain, 46 F Ph. D. Students Kronos SHA Event Calendar Forecast: Tue - Showers/Wind. High: 61 Low: 38 Labor and Employment Law Roundtable Wed - Showers. High: 48 Low:

Search Cornell header GO: STATLER WIRE SCHOOL OF HOTEL ADMINISTRATION STATLER HOTEL OUTLOOK BLACKBOARD CU INFO School Links Sign in to Launch Pad Accident Report E-Reqs Maintenance Reqeust Search Calendars (2) Employee Essentials Material Safety Data Sheets (MSDS) Academic Calendar Faculty Center 1 Nestle Library Google Cornell People Employee Holidays Faculty Reporting Online Travel Reimbursements Search Change Cornell Password Health & Wellness (3) Skillsoft Directories (4) Cornell Fitness Centers Weather uPortal Alumni Directory Gannet View Paycheck Online Wednesday, April 22nd, 2009. Course Directory Wellness Program Web Financials Faculty Directory Human Resources Current Conditions: Who I Am Light Rain, 46 F Ph. D. Students Kronos SHA Event Calendar Forecast: Tue - Showers/Wind. High: 61 Low: 38 Labor and Employment Law Roundtable Wed - Showers. High: 48 Low:

Search Cornell header GO: STATLER WIRE SCHOOL OF HOTEL ADMINISTRATION STATLER HOTEL OUTLOOK BLACKBOARD CU INFO School Links Sign in to Launch Pad Accident Report E-Reqs Maintenance Reqeust Search Calendars (2) Employee Essentials Material Safety Data Sheets (MSDS) Academic Calendar Faculty Center 1 2 Nestle Library Google Cornell People Employee Holidays Faculty Reporting Online Travel Reimbursements Search Change Cornell Password Health & Wellness (3) Skillsoft Directories (4) Cornell Fitness Centers Weather uPortal Alumni Directory Gannet View Paycheck Online Wednesday, April 22nd, 2009. Course Directory Wellness Program Web Financials Faculty Directory Human Resources Current Conditions: Who I Am Light Rain, 46 F Ph. D. Students Kronos SHA Event Calendar Forecast: Tue - Showers/Wind. High: 61 Low: 38 Labor and Employment Law Roundtable Wed - Showers. High: 48 Low:

Search Cornell GO: STATLER WIRE SCHOOL OF HOTEL ADMINISTRATION STATLER HOTEL OUTLOOK BLACKBOARD CU INFO Primary Links: School Links Sign in to Launch Pad Get Top Billing, Bold, Easy-to-read Accident Report E-Reqs Maintenance Reqeust Search Calendars (2) Employee Essentials Material Safety Data Sheets (MSDS) Academic Calendar Faculty Center Nestle Library Google Cornell People Employee Holidays Faculty Reporting Online Travel Reimbursements Search Change Cornell Password Health & Wellness (3) Skillsoft Directories (4) Cornell Fitness Centers Weather uPortal Alumni Directory Gannet View Paycheck Online Wednesday, April 22nd, 2009. Course Directory Wellness Program Web Financials Faculty Directory Human Resources Current Conditions: Who I Am Light Rain, 46 F Ph. D. Students Kronos SHA Event Calendar Forecast: Tue - Showers/Wind. High: 61 Low: 38 Labor and Employment Law Roundtable Wed - Showers. High: 48 Low:

Search Cornell Secondary Contextual Links: Larger display, expanded categories GO: STATLER WIRE SCHOOL OF HOTEL ADMINISTRATION STATLER HOTEL OUTLOOK BLACKBOARD CU INFO School Links Sign in to Launch Pad Accident Report E-Reqs Maintenance Reqeust Search Calendars (2) Employee Essentials Material Safety Data Sheets (MSDS) Academic Calendar Faculty Center Nestle Library Google Cornell People Employee Holidays Faculty Reporting Online Travel Reimbursements Search Change Cornell Password Health & Wellness (3) Skillsoft Directories (4) Cornell Fitness Centers Weather uPortal Alumni Directory Gannet View Paycheck Online Wednesday, April 22nd, 2009. Course Directory Wellness Program Web Financials Faculty Directory Human Resources Current Conditions: Who I Am Light Rain, 46 F Ph. D. Students Kronos SHA Event Calendar Forecast: Tue - Showers/Wind. High: 61 Low: 38 Labor and Employment Law Roundtable Wed - Showers. High: 48 Low:

Search Cornell GO: STATLER WIRE SCHOOL OF HOTEL ADMINISTRATION STATLER HOTEL OUTLOOK BLACKBOARD CU INFO School Links Sign in to Launch Pad Widgets: Accident Report E-Reqs Maintenance Reqeust Search Calendars (2) Employee Essentials Material Safety Data Sheets Condensed functionally, (MSDS) Academic Calendar Faculty Center Nestle Library Google Cornell People Employee Holidays Faculty Reporting uniﬁed styles Online Travel Reimbursements Search Change Cornell Password Health & Wellness (3) Skillsoft Directories (4) Cornell Fitness Centers Weather uPortal Alumni Directory Gannet View Paycheck Online Wednesday, April 22nd, 2009. Course Directory Wellness Program Web Financials Faculty Directory Human Resources Current Conditions: Who I Am Light Rain, 46 F Ph. D. Students Kronos SHA Event Calendar Forecast: Tue - Showers/Wind. High: 61 Low: 38 Labor and Employment Law Roundtable Wed - Showers. High: 48 Low:

Implementing Design • Goal: Simpliﬁcation • No Sign Up form • Uses Cornell’s User Auth system and pre-existing user data to create new account • See “Sign Up Forms Must Die” by Luke Wroblewski (http://www.alistapart.com/ articles/signupforms/)

Implementing Design Goals • Goal: Fast Loading • Total of 2 images, mostly text based layout • Single uniﬁed, compressed Javascript ﬁle • Single CSS • Cached output of pre-rendered HTML

Implementing Usability • Goal: One Page to Rule Them All • All content, actions available on one page • This is achieved using AJAX • Relevant action windows popup over content, disappear when not needed • No need for unnecessary navigation

Implementing Usability • Goal: More Natural Interface • Drag and drop to customize widget layout • Everything underneath the header is a widget • Large, expressive buttons and icons • Fewer things to do on the page

Implementing Usability • Goal: Unite Local Content • Widgets encourage data ﬂexibility in other web systems • Easily pull in data via RSS or XML from Event Calendars, News, Blogs, Announcements etc. without any extra code

Bringing It Together • A LaunchPad provides a stage to present the full richness and variety of your web ecosystem • Brings together the familiar and unfamiliar content and resources in a pleasing, accessible, useful way • You take on the job of an Editor when setting the base layout and structure

Bringing It Together • Instead of creating a mere link farm or widget groupings of random data, you can create a place of common utility and connection for your audience • A proper LaunchPad works to develop a sense of scope and community for your web users

To Review • A LaunchPad is a gateway page to direct users to different tools in your web ecosystem • The philosophy behind this is to act as an editor, to direct users to resources they may not be aware of • A LaunchPad should be simple, with the goal of moving the user off the page as quickly as possible

To Review • Use the concept of hyperlocatlity to drive your feature base and widgets/content • Keep the interface as simple as possible, don’t let the user navigate inwards, only outwards • Structure your code to be ﬂexible and easily expandable to keep the site feeling fresh

Shout-Outs • Wioletta Holownia • Dave DeHaan • Steve Halasz • John Goddard • John Cowan

Thanks!

Building A New LaunchPad from the Ground Up

1 comments

Notes on slide 1

Favorites, Groups & Events