[ARTICLE Page Design Template]
When I first arrived at JILA in 2007, I wanted to immediately redesign and restructure the JILA website. However I did not not have the extra project time due to other demanding and pressing projects. It wasn't until the summer of 2009, that I finally decided that I needed shift my project load to make room for a JILA web redesign project (FINALLY). JILA is know for its renown research successes, and JILA's website should also reflect a sophisticated and highly accessible web interface to its demanding internet/intranet audiences. JILA needed to utilize nature of a Content Management System (CMS) and get away from the old early 1997-2000 web design which was just cobbled together system of HTML, CSS, and CGI files (
see image below for a look of original JILA web site of the past). It was a great time for this new push since open source softwares like Drupal, Wordpress, and Joomla were getting to be really stable and standardized on the web.
During the summer of 2009, I decided that I would need a small team to effectively redesign and overhaul a huge website that would eventually lead to overhauling all the micro sites (JILA-AMO and the Fellows websites) and intranets at JILA. So I talked to Mike Paige from the Computing team at JILA about helping me with this project. Essentially we worked collaboratively with each other where I was leading with the front end development while Mike would emphasize the back end and hardware of website. It worked out pretty well since we both had to continue with our regular work projects and basically teach other about our discoveries along the way. Julie Phillips also helped with copy editing and writing of the new content for the website while Lynn was helping us transfer the preexisting content and giving us invaluable user experience feedback.
Mike and I spent the summer researching CMS(s) like Drupal, Wordpress, and Joomla and preparing our design/development proposal for the JILA Fellow Committee Meeting. We ended up choosing Drupal because it gave us the most flexibility, control, and security that we would need to for level of traffic and audiences we wanted the JILA website to target (plus it was a good sign when the
whitehouse.gov launched their website using Drupal). We put our design/development proposal together explaining why JILA needed to utilize CMS platform to run its websites without hiring additional webmasters (Mike and I at that time) and make more content accessible to the global audiences and web search engines. The JILA websites were proving to be an ever-growing tool for grad/post doc recruitment and public outreach, so we needed a core system that could grow with the demanding needs of creating, editing, and managing content (includes text, high/lo resolution images, video, animations, podcast, data files, etc ). We also wanted the content to accessible with RSS feeds so as to have content easily organized and expand the viewing range to include newer mobile devices (blackberries, iphones, ipads, tablets etc). The Fellows and faculty were very receptive to our design and development proposal that Mike and I presented at the committee meeting, and we got full approval to pursue the web redesign project.
Mike and I developed the project in multiple stages since we had to do some experimenting/learning with the Drupal core. Plus we had to continue our other projects at the same time and couldn't hire any additional help due to hiring freezes by CU. We planned for the first stage of the website to take about a year (with just us two working on it with hectic schedules) to have a product to do a soft launch for the summer of 2010.
The web project is still under development with only two people solving the bugs, but progress continues.
About the Design:
I thought intensely about the web interface that JILA would possible need and how it would grow "organically" with the interface design. My design made interface flexible and expandable (i.e. new menu items/systems, RSS feed controls) with the idea that there will space for various features content items as they get developed and tested. I also wanted the interface to be more intuitive and constant and consistent than the previous design. You can check out the original JILA website to compare to:
[Original JILA website design in early 2000]I designed the top 20% of interface with menu navigation system to be always be the same on all pages (original JILA website lacked these controls). I also colored the menu and various buttons to have a prominent blocking and intuitive function while keeping the background other blocking interfacing to be clean and not as intrusive (whites, simple backgrounds, washed out grays and shadowing) to give more emphasis to the menu functions. This also allowed the colors from the content images attract attention to the content. My goal was to make the interface clear and transparent so the user would explore the content more freely BUT also never feel lost with navigation and search features. I wanted the search function to be useful, quick, and well placed in this top 20% of the interface at all times. Mike really made the search function pretty robust and reliable (I believe he used
Apache Solr search) and we spent a lot of time playing and testing it. I really really liked this website search tool compared to original JILA search tool which didn't work half the time.
I placed new content types such as JILA calender, News, and Research Highlights all to be RSS feeds, so that front page will be automatically populated with new content (or managed in any manner). I also wanted only important content types on the front page and reduce text copy and paragraph descriptions next to nothing. I wanted "keyword" text, menus, and graphic visuals to lead the user's experience AND NOT put lengthy literal text descriptions/explanations everywhere (this was a hard battle and compromises were made). The idea was to make the content "king" and have the interface and text be streamlined to emphasize the pure content. I also wanted to use intuitive menu labels and text identifiers that were more universally accepted by international web audiences.
The design for the article pages (or secondary pages) made a lot more room for text and have interactive features and functions located towards upper (flushed) right and bottom of the article page. This allows a user to focus on the text content of the research at their own
discretion and then see what avaliable content functions might be accessible for that article. By placing a full column space on the right side of the article for content functions allows for future growth of the JILA website (i.e. podcasts, video embedding/streaming, etc).
The design for JILA webpage went through several design phases because I wanted to get feedback from a wide range of people ( JILAFellows, grads, post docs, writers, editors, admin staff, regular web users, outside designers, even my own parents) about my designs. Overall I am pretty content with my the final version of the web design, and I wish Mike and rest of the web team at JILA the best of luck with continuing the project through all its development stages. I strongly believe that JILA is on a good track with its website presence's and utilizing Drupal's CMS as a tool for both outside and internal communications.
Clients: JILA NIST-CURelated Links: Drupal
_addition_of_the_high_harmonic-gk.jpg)
