winter 2005 ms2w : cbtp 1 cellular biotechnology training program team ms 2 w: maria moliner jessica...

Winter 2005 MS2W : CBTP 1

Cellular BiotechnologyTraining Program

Team MS2W: Maria Moliner Jessica SchwartzAna Washington

WEBSITE REDESIGN 2005


Project Purpose

To redesign a brochure-type website for the Cellular Biotechnology Training Program (CBTP) at the University of Michigan (U of M).

The CBTP is designed to provide students in a wide range of graduate departments an enhanced educational experience directed towards biotechnology.


People InvolvedClient: Dr. Joel Swanson, Ph.D. (Director of the CBTP) Margaret Allen (Staff of the Program) Michelle Melis (Assistant).

MS²W Team: Maria Moliner (Project Manager and Graphic Designer) Jessica Schwartz (Coder) Ana Washington (Information Architect)


Goals

Create a useful tool, a point of reference for everyone involved in the program.

It should be clean, attractive, user-friendly & easily updatable.

It should be an inviting website with lots of images & fewer words

Organized so users can find detailed information, if they want it.


Goals

Familiarize and impress the target audiences; including potential students, faculty & corporations in order to involve people in the program.

To generate a dynamic & useful tool within the CBTP for current students & faculty

To impress the National Institute of Health (NIH) which soon will decide whether to renew the training grant.


Website Content

Overview of CBTP. Contact information from

faculty, staff and current students.

Success stories from previous students

Links to corporate partners.

Links to the participating departments and programs at the U of M.

A ‘Showcase’ of student projects containing the collaborations among students from different departments.

A calendar of events. Description of the

program. Links of interest:

Biotechnology-related websites.


Comparative Analysis

Examination of 3 websites comparable to the CBTP site, to compare website commonalities.

The following sites all operate a similar training program within their universities.


Comparative Analysis : Chosen Websites

1.Stanford NIH Graduate Training Program in Biotechnology, California

2.Northwestern Illinois University Biotechnology Training Program

3.University of Georgia Department of Microbiology


Comparative Analysis : Conclusions Organized, minimal information allows users to browse thru quickly

and efficiently.

Global Navigation remained consistent throughout home and sub-pages

Minimal graphics assist in faster page loading

Broad, shallow hierarchy which reduces the chance of users choosing the wrong path through the website

Colors are consistent and uncomplicated

Abundance of information upon command

Labeling that clearly indicates where they lead to


Added content following the Comparative Analysis

Contact Us Join Mailing List Site Index Join CBTP NIH Link U of M Link Biotechnology Links

Professional Associations Journals Other Training Programs


User Personas & Scenarios

Current Student Professor Future Student

Matthew Curry Patricia Harris Virginia Avery

Personas developed to know our target audience.


Matthew Curry : Current Student

“The CBTP Website makes it easy for me to look up student and staff contact information.”

Personal:•29 years old, single

•Current Student of the CBTP Program

•Department of Biological Chemistry

•Wears contact lenses & glasses

Computer Skills:•Excellent computer skills

•DSL connection at school and home

•PC & MAC

•Windows 98 and up, OSX

Needs:•Simple Navigation

•Small Downloadable files

•Program Staff Directory

•Student Directory


Patricia Harris : Professor

“I visit the CBTP website to check for upcoming events.”

Personal:•55 year old, married, 3 teenage children

• Microbiology, Immunology & CBTP Professor at the U of M

• Teaching for over 25 years

•Diabetic, uses reading glasses

Computer Skills:•Moderate Computer Skills

•Dial-up connection at home (56K Modem)

•DSL connection at work

•Mac User (home & work)

Needs:•User Friendly Website, easy to understand

• Simple Layouts

• Quick information retrieval


Virginia Avery: Potential Student

“I am interested in applying to the CBTP program but I’m not sure how to go about it.”

Personal:•25 year old, single

•Uses wheelchair

• Wears glasses

• U of M Pathology & Chemistry Graduate 2004

Computer Skills:•Excellent computer skills

•TI Connection at school & DSL at home

•PC & Mac / Windows 98 & up, OSX

Needs:•Simple Navigation

•Overview of CBTP Program

•How to apply to CBTP

•CBTP Staff Directory


Site Architecture

Broad & Shallow hierarchy to reduce the chances of users choosing the wrong path through the website.

Capture specialized language for labeling.


Site Outline

1.0 Home1.1 Contact Us1.2 Join Mailing List1.3 Site Index1.4 About

1.4.1 Member Activities1.4.2 Eligibility1.4.3 Financial Support

1.5 Join CBTP1.6 Sample Projects

1.6.1 Project 11.6.2 Project 21.6.3 Project 3


Site Outline (continued)

1.7 Members 1.7.1 Staff

1.7.2 Faculty and Affiliates1.7.3 Current Students1.7.4 Previous Students

1.8 Affiliates & Sponsors1.8.1 U of M Schools & Departments1.8.2 Industrial Partners1.8.3 NIH

1.9 Events 1.10 Core Course (.pdf) 1.11 Biotechnology Links (Professional Associations)

1.11.1 Journals1.11.2 Other Training Programs

Note: Global Navigation is in bold


Wireframe #1Simple Layout with Global Navigation on the left side.


Wireframe #2Global Navigation on the left side, polished look and feel.


Wireframe #3Global Navigation on the left side, plenty of images.


Round 1 - Mockup 1

•Company Logo on top left

•Global Navigation on right hand side

•Large Content area

•Incorporation of Michigan Blue Color Scheme

•Sub Navigation on the top of the page.


Round 1 - Mockup 2

•Global Navigation on left hand side

•Clean Content area

•Calming Color Scheme

•Sub Navigation on the top of the page.


Round 1 - Mockup 3

•Global Navigation on left hand side

•Geometric lines for clean effect and for well defined areas.

•Large content area.

•Sub Navigation lower on the page.


Explanation of Round 1 of Mockups

Offered a better idea of what the final mockups should look like

Allowed our team to test a variety of different color schemes

Presented an improved layout with details that worked well and looked outstanding


Final Mockup – Home Page

•Global Navigation on right hand side

•Simple and clean content area

•Eye-catching images

•Geometric lines for better defined areas

•Professional look and feel


Final Mockup – Sub Page

•Global Navigation on right hand side, and easy to navigate

•Simple and clean content area

•Splashes of color for interest

•Main contact information directly under global navigation


Explanation of Final Mockups

Useful for presentations to clients Offer higher quality examples rather than

wireframes Offer more engaging and realistic illustrations of

what the final site would look like Mockups provided a more intuitive

demonstration of site structure


Technical Specifications

User Side: Minimum Target Connection Speed: 56K modem &

faster Target Screen Resolutions: 800 x 600 and higher Operating Systems Supported:

Windows Mac OS 9.x and OS X

Browsers Supported: - IE 5.x+ - Opera 7.x- Netscape 4.x (gracefully degrade) - Safari 1.0+- Mozilla 1.5+ - Firefox 1.0+


Technical Specifications

Developer Side: Development Languages:

(X)HTML CSS Perl: for form’s server-side processing JavaScript: for form validation PHP: for content management

Layout Coding: Fixed width centered layout


Coding Challenges

Jessica’s input here…

For easy updatability Divided content code from layout code


CBTP Redesign Website

Link:

CBTP

winter 2005 ms2w : cbtp 1 cellular biotechnology training program team ms 2 w: maria moliner jessica...

Documents

similar training program

cbtp site

training programs

cbtp nih link u

training grant

biotechnologyrelated

current students faculty

previous students links