320 likes | 459 Views
Cellular Biotechnology Training Program. Team MS 2 W: Maria Moliner Jessica Schwartz Ana 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).
E N D
Cellular BiotechnologyTraining Program Team MS2W: Maria Moliner Jessica Schwartz Ana Washington WEBSITE REDESIGN 2005 Winter 2005 MS2W : CBTP
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
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
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
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
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. Website Content Winter 2005 MS2W : CBTP
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
Comparative Analysis : Chosen Websites • Stanford NIH Graduate Training Program in Biotechnology, California • Northwestern Illinois University Biotechnology Training Program • University of Georgia Department of Microbiology Winter 2005 MS2W : CBTP
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
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
User Personas & Scenarios Personas developed to know our target audience. Current Student Professor Future Student Matthew Curry Patricia Harris Virginia Avery Winter 2005 MS2W : CBTP
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: • Simple Navigation • Small Downloadable files • Program Staff Directory • Student Directory “The CBTP Website makes it easy for me to look up student and staff contact information.” Winter 2005 MS2W : CBTP
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: • User Friendly Website, easy to understand • Simple Layouts • Quick information retrieval “I visit the CBTP website to check for upcoming events.” Winter 2005 MS2W : CBTP
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 • Overview of CBTP Program • How to apply to CBTP • CBTP Staff Directory “I am interested in applying to the CBTP program but I’m not sure how to go about it.” Winter 2005 MS2W : CBTP
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
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
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
Wireframe #1 Simple Layout with Global Navigation on the left side. Winter 2005 MS2W : CBTP
Wireframe #2 Global Navigation on the left side, polished look and feel. Winter 2005 MS2W : CBTP
Wireframe #3 Global Navigation on the left side, plenty of images. Winter 2005 MS2W : CBTP
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
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
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
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
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
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
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
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
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
Coding Challenges • Jessica’s input here… • For easy updatability • Divided content code from layout code Winter 2005 MS2W : CBTP
CBTP Redesign Website Link: CBTP Winter 2005 MS2W : CBTP