Ross Biological Reserve website redesign
Client: Professors in the Department of Biological Sciences
Role: Developer
The project began when I was contacted by the department's graphics designer. She wanted to discuss redesigning the Ross Biological Reserve website. The Reserve is the living laboratory of Biological Sciences, which integrates field research, teaching and outreach in ecology. A lot of the website's content was outdated and it also used an older design. Our discussions were about the design, accessibility, content, information architecture and usability.
The site was going to be completely reorganized, with new content and images for five major sections. Using the content the graphics designer gave me, I created the site's menu navigation. I also worked with two professors and the assistant department head. I emailed them my ideas and also met with the professors to discuss the website navigation and homepage layout in greater detail. I also suggested using a new URL for the Ross Reserve site and using the old one as a permanent redirect. The group agreed to this.
As the new Ross Reserve site would be completely different than the pre-existing one, I built a new site in Cascade. One of my co-workers provided me with a development server. I had two challenges: improving the site's accessibility and building the Natural History bird section.
The Ross Reserve site had multiple PDFs, sound files, video, as well as regular content that needed to be made accessible. I converted multiple PDFs into webpages and made the other PDFs accessible using Adobe Acrobat Pro. There was also a video featuring Alton Lindsey, the founder of the Ross Reserve. I uploaded it to Kaltura (Purdue's video service) and captioned it. While the automatic captions were a good start, I needed to modify them further to better fit what the speaker was saying.
The largest content section was the Natural History bird section and it took the longest to complete. Each bird had multiple audio files for their songs or calls, and many birds had both. Natively, the HTML5 audio element looks very different across browsers and it was important to have a more uniform user experience. Using some custom CSS and JavaScript, I was able to make sure that the audio player looked similar across browsers and is responsive.
I emailed the group asking for content and feedback, while I continued to work on other portions of the site. I added some additional content - image carousels and a time-lapse video. After the group reviewed everything, we launched the new site. I also created Cascade documentation and trained someone so they could update the site moving forward.
The new website is now responsive, with improvements to its accessiblity, design, information architecture and usability.
Note: the image below is from the previous website design.
