Download - Cellular Biotechnology Training Program
![Page 1: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/1.jpg)
Winter 2005 MS2W : CBTP 1
Cellular BiotechnologyTraining Program
Team MS2W: Maria Moliner Jessica SchwartzAna Washington
WEBSITE REDESIGN 2005
![Page 2: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/2.jpg)
Winter 2005 MS2W : CBTP 2
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.
![Page 3: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/3.jpg)
Winter 2005 MS2W : CBTP 3
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)
![Page 4: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/4.jpg)
Winter 2005 MS2W : CBTP 4
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.
![Page 5: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/5.jpg)
Winter 2005 MS2W : CBTP 5
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.
![Page 6: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/6.jpg)
Winter 2005 MS2W : CBTP 6
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.
![Page 7: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/7.jpg)
Winter 2005 MS2W : CBTP 7
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.
![Page 8: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/8.jpg)
Winter 2005 MS2W : CBTP 8
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
![Page 9: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/9.jpg)
Winter 2005 MS2W : CBTP 9
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
![Page 10: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/10.jpg)
Winter 2005 MS2W : CBTP 10
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
![Page 11: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/11.jpg)
Winter 2005 MS2W : CBTP 11
User Personas & Scenarios
Current Student Professor Future Student
Matthew Curry Patricia Harris Virginia Avery
Personas developed to know our target audience.
![Page 12: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/12.jpg)
Winter 2005 MS2W : CBTP 12
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
![Page 13: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/13.jpg)
Winter 2005 MS2W : CBTP 13
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
![Page 14: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/14.jpg)
Winter 2005 MS2W : CBTP 14
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
![Page 15: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/15.jpg)
Winter 2005 MS2W : CBTP 15
Site Architecture
Broad & Shallow hierarchy to reduce the chances of users choosing the wrong path through the website.
Capture specialized language for labeling.
![Page 16: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/16.jpg)
Winter 2005 MS2W : CBTP 16
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
![Page 17: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/17.jpg)
Winter 2005 MS2W : CBTP 17
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
![Page 18: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/18.jpg)
Winter 2005 MS2W : CBTP 18
Wireframe #1Simple Layout with Global Navigation on the left side.
![Page 19: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/19.jpg)
Winter 2005 MS2W : CBTP 19
Wireframe #2Global Navigation on the left side, polished look and feel.
![Page 20: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/20.jpg)
Winter 2005 MS2W : CBTP 20
Wireframe #3Global Navigation on the left side, plenty of images.
![Page 21: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/21.jpg)
Winter 2005 MS2W : CBTP 21
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.
![Page 22: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/22.jpg)
Winter 2005 MS2W : CBTP 22
Round 1 - Mockup 2
•Global Navigation on left hand side
•Clean Content area
•Calming Color Scheme
•Sub Navigation on the top of the page.
![Page 23: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/23.jpg)
Winter 2005 MS2W : CBTP 23
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.
![Page 24: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/24.jpg)
Winter 2005 MS2W : CBTP 24
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
![Page 25: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/25.jpg)
Winter 2005 MS2W : CBTP 25
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
![Page 26: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/26.jpg)
Winter 2005 MS2W : CBTP 26
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
![Page 27: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/27.jpg)
Winter 2005 MS2W : CBTP 27
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
![Page 28: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/28.jpg)
Winter 2005 MS2W : CBTP 28
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+
![Page 29: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/29.jpg)
Winter 2005 MS2W : CBTP 29
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
![Page 30: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/30.jpg)
Winter 2005 MS2W : CBTP 30
Coding Challenges
Jessica’s input here…
For easy updatability Divided content code from layout code
![Page 31: Cellular Biotechnology Training Program](https://reader036.vdocuments.site/reader036/viewer/2022062500/56814f37550346895dbcd5af/html5/thumbnails/31.jpg)
Winter 2005 MS2W : CBTP 31
CBTP Redesign Website
Link:
CBTP