Institute of Arctic and Alpine Research
DESIGN/Content STrategy, UX/UI, Branding: 16TOADS INTERACTIVE
DEVELOPMENT: ENCAFFEINTATED, CLEARFIRE STUDIOS
Inarguably, my involvement in this project marks the high point for my studio. 16toads had the distinct honor of being brought on by Encaffeinated to provide user-experience and user-interface consulting services for one of the most exciting and challenging projects I've ever had the pleasure of working on. I collaborated with Encaffeinated and Clearfire Studios and the phenomenal staff at INSTAAR to completely re envision the INSTAAR web site and user experience.
INSTAAR is a scientific institute affiliated with the University of Colorado at Boulder. Their site was long overdue for a major refresh (sample at bottom). Every aspect of the user-facing site, the experience, code, and back-end management of the site was completely overhauled.
Our challenge was vast. How do we create an experience that will speak to multiple user groups? How do we update the look and feel to speak to a much wider audience? How do we make a incredible amount of content accessible to users? How do we make it easy to manage? And finally, how do we make the institute relevant to scientists, educators, students, and potential donors? This was a particularly critical challenge because the institute was projecting deep annual budget cuts and private donors would become the primary source for funding.
16toads's challenge rested with updating the organization's branding, re envisioning the UX/UI, and handling the design overhaul while balancing the business requirements and user goals.
INSTAAR had two "logos". One gaudy text version and an iconic logo that tried to visually incorporate every possible aspect of their charter (sample at bottom). They also utilized various logo treatments for a wide range of other printed materials. In short, there was no consistency.
It took some convincing, but I was able to show the web committee through various design comps and considered feedback that ditching the icon and simplifying their primary brand mark was in their best interest. The result is a simple, clear text-based logo that works across every potential medium. And still leaves the door wide open to create ancillary icons or designs to extend their brand.
My team had an incredible ace in our pocket: The deepest collection of spectacular imagery we've collectively ever seen. It was a no-brainer that the photography would take center stage. What better way to get students, the general public, and donors interested in research than to show the people and environments where INSTAAR conducts their field research. We had our starting point.
Our team's challenge was immense. We had to devise a way for users to easily navigate from section to section and find massive amounts of information that could potentially be buried six levels deep. We hit on the concept of "exploration" to help satisfy the navigation challenge. Instead of creating a traditional navigational hierarchy with numerous submenus, we decided to swap out the main navigation on a section-by-section basis. Replacing the primary sub navigation with alternate sub sub navigation as the user dug deeper into a section. To mitigate potential confusion, we added numerous ways for users to navigate the site all through the content and informational displays.
The effect was exactly what we had hoped. The scheme allowed users to very literally "explore" the site in an entirely intuitive manner.
Over the course of twelve months, we refined and improved our design solution, navigational scheme, and content display based on internal and user feedback. Suffice it to say, the success of this project rested with the involvement of the entire team. And we could not possibly have accomplished our jobs and our goals without the tremendous participation of the web committee and staff at INSTAAR.
This project represents my proudest work as a designer and collaborator. I am thrilled to have been part of the team that rebranded and reinvigorated the vision of a venerable institution.
International Academy of Visual Arts and the W3 Awards, Gold, Website Education, INSTAAR
International Academy of Visual Arts and the W3 Awards, Silver, Website Science, INSTAAR
International Academy of Visual Arts and the W3 Awards, Silver, Visual Appeal, INSTAAR
The original site.