Cellular Biotechnology Training Program

beefzoologistΒιοτεχνολογία

21 Φεβ 2013 (πριν από 4 χρόνια και 7 μήνες)

121 εμφανίσεις

Winter 2005 MS2W : CBTP

1

Cellular Biotechnology

Training Program

Team MS
2
W:


Maria Moliner

Jessica Schwartz

Ana Washington


WEBSITE REDESIGN 2005

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.



Winter 2005 MS2W : CBTP

3

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

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.

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.

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.



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.


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

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




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

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.

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

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

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

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
.

Winter 2005 MS2W : CBTP

16

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

17

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

18

Wireframe #1

Simple Layout with Global Navigation on the left side.

Winter 2005 MS2W : CBTP

19

Wireframe #2

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

Winter 2005 MS2W : CBTP

20

Wireframe #3

Global Navigation on the left side, plenty of images.

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.


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.


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.


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


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


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


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


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+

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

Winter 2005 MS2W : CBTP

30

Coding Challenges


Jessica’s input here…



For easy updatability


Divided content code from layout code

Winter 2005 MS2W : CBTP

31

CBTP Redesign Website

Link:








CBTP