There is a lack of awareness on how glacier recharge affects communities and ecosystems and the research efforts that go into studying the effects. Dr. Jordyn Miller came to me to see how we might transform her novel glacier research into an accessible and engaging website.
.gif)
The website is aimed at concerned citizens, at-risk communities, and those with a basic interest in hydrology, requiring a balance between accuracy and accessibility. I broke down Dr. Miller’s paper into medium fidelity sections that together told the story of the research to focus on first passes of copy and light visualizations.
I used the following design principles to guide the assets used and style: feel tactile, show real science, make it organic. I created a mood board to determine fonts and colors and collected artifacts to support the visual story.
I also began exploring how I could best tell a story through a screen and found interactions really elevated the experience and kept attention. Here are a couple websites I found that I really enjoyed.
Visual design and the interactions were essential to making the complex research engaging, so I rapidly moved to high fidelity after I had initial wireframes. I moved small pieces of the design into high fidelity screens to play with the look and feel.
Some initial concepts:
I conducted two speak-out-loud sessions by showing different versions of the webiste to two college students to receive feedback on the language, look, and feel of the website.
Looks outdated
Although the scrapbook look and feel of the website was interesting, the color scheme gave off the sense of an old scrap book; it made the experience a drab sense.
Need a better balance of image and text
There were areas that felt text heavy, and areas that felt image heavy. There were also areas that needed more supportive images to help explain complex processes.
Low quality images took away from the experience
The custom manipulation of images made the larger backgrounds lose quality from being blown up. It made the experience feel lower quality.
The feedback made me realize a complex story can be told with non-complex images.
I focused on a cleaner and streamlined narrative, combining more visual elements with scroll interactions to create a sense of joy and step-by-step discovery as users moved through the website.
I validated the content and copy one more time by running it two more user feedback sessions before moving it online.
original isotope analysis design
There was a lot of text that used images that did not effectively break down the isotope analysis.
final isotope analysis design
Images were used to break down the isotope analysis into digestable and animated steps.
This project was a truly collaborative process where we shared knowledge in each other’s expertise. The technical challenge of making a large site with custom animations took a lot of trial and error and even more trial and error when working to portray the same experience on mobile screens. I was able to creatively stretch in how I think about interacting with a screen and display complex information.
