1 / 31

Cellular Biotechnology Training Program

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).

zahur
Download Presentation

Cellular Biotechnology Training Program

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cellular BiotechnologyTraining Program Team MS2W: 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. 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

  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 • Stanford NIH Graduate Training Program in Biotechnology, California • Northwestern Illinois University Biotechnology Training Program • 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 Personas developed to know our target audience. Current Student Professor Future Student Matthew Curry Patricia Harris Virginia Avery Winter 2005 MS2W : CBTP

  12. 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

  13. 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

  14. 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

  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 Winter 2005 MS2W : CBTP

More Related