Date post: | 26-Dec-2015 |
Category: |
Documents |
Upload: | kory-casey |
View: | 213 times |
Download: | 0 times |
Winter 2005 MS2W : CBTP 1
Cellular BiotechnologyTraining Program
Team MS2W: Maria Moliner Jessica SchwartzAna 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 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)
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 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
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
Winter 2005 MS2W : CBTP 18
Wireframe #1Simple Layout with Global Navigation on the left side.
Winter 2005 MS2W : CBTP 19
Wireframe #2Global Navigation on the left side, polished look and feel.
Winter 2005 MS2W : CBTP 20
Wireframe #3Global 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