Cellular Biotechnology
Training Program
Team MS2W:
Maria Moliner
Jessica Schwartz
Ana Washington
WEBSITE REDESIGN 2005
Winter 2005 MS2W : CBTP
1
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.
Winter 2005 MS2W : CBTP
2
People Involved
Client:



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)
Winter 2005 MS2W : CBTP
3
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.
Winter 2005 MS2W : CBTP
4
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.
Winter 2005 MS2W : CBTP
5
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.
Winter 2005 MS2W : CBTP
6
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.
Winter 2005 MS2W : CBTP
7
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
Winter 2005 MS2W : CBTP
8
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
Winter 2005 MS2W : CBTP
9
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
Winter 2005 MS2W : CBTP
10
User Personas & Scenarios
Personas developed to know our target audience.
Current Student
Matthew Curry
Professor
Patricia Harris
Winter 2005 MS2W : CBTP
Future Student
Virginia Avery
11
Matthew Curry : Current Student
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:
“The CBTP Website makes it
easy for me to look up student
and staff contact information.”
•Simple Navigation
•Small Downloadable files
•Program Staff Directory
•Student Directory
Winter 2005 MS2W : CBTP
12
Patricia Harris : Professor
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:
“I visit the CBTP website to
check for upcoming
events.”
•User Friendly Website, easy to understand
• Simple Layouts
• Quick information retrieval
Winter 2005 MS2W : CBTP
13
Virginia Avery: Potential Student
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
“I am interested in
applying to the CBTP
program but I’m not sure
how to go about it.”
•Overview of CBTP Program
•How to apply to CBTP
•CBTP Staff Directory
Winter 2005 MS2W : CBTP
14
Site Architecture

Broad & Shallow hierarchy to reduce the
chances of users choosing the wrong path
through the website.

Capture specialized language for labeling.
Winter 2005 MS2W : CBTP
15
Site Outline
1.0
Home
1.1 Contact Us
1.2 Join Mailing List
1.3 Site Index
1.4 About
1.4.1 Member Activities
1.4.2 Eligibility
1.4.3 Financial Support
1.5 Join CBTP
1.6 Sample Projects
1.6.1 Project 1
1.6.2 Project 2
1.6.3 Project 3
Winter 2005 MS2W : CBTP
16
Site Outline (continued)
1.7 Members
1.7.1 Staff
1.7.2 Faculty and Affiliates
1.7.3 Current Students
1.7.4 Previous Students
1.8 Affiliates & Sponsors
1.8.1 U of M Schools & Departments
1.8.2 Industrial Partners
1.8.3 NIH
1.9 Events
1.10 Core Course (.pdf)
1.11 Biotechnology Links (Professional Associations)
1.11.1 Journals
1.11.2 Other Training Programs
Note: Global Navigation is in bold
Winter 2005 MS2W : CBTP
17
Wireframe #1
Simple Layout with Global Navigation on the left side.
Winter 2005 MS2W : CBTP
18
Wireframe #2
Global Navigation on the left side, polished look and feel.
Winter 2005 MS2W : CBTP
19
Wireframe #3
Global Navigation on the left side, plenty of images.
Winter 2005 MS2W : CBTP
20
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.
Winter 2005 MS2W : CBTP
21
Round 1 - Mockup 2
•Global Navigation
on left hand side
•Clean Content
area
•Calming Color
Scheme
•Sub Navigation
on the top of the
page.
Winter 2005 MS2W : CBTP
22
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.
Winter 2005 MS2W : CBTP
23
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

Winter 2005 MS2W : CBTP
24
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
Winter 2005 MS2W : CBTP
25
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
Winter 2005 MS2W : CBTP
26
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
Winter 2005 MS2W : CBTP
27
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+
- Netscape 4.x (gracefully degrade)
- Mozilla 1.5+
Winter 2005 MS2W : CBTP
- Opera 7.x
- Safari 1.0+
- Firefox 1.0+
28
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
Winter 2005 MS2W : CBTP
29
Coding Challenges

Jessica’s input here…

For easy updatability
Divided content code from layout code

Winter 2005 MS2W : CBTP
30
CBTP Redesign Website
Link:
CBTP
Winter 2005 MS2W : CBTP
31