The Guts: Herstory showcases audio of female journalists

Herstory is a multimedia project from the Reynolds Journalism Institute at the University of Missouri. It documents the careers, experiences and personal lives of 34 women journalists who have participated in the Journalism and Women Symposium, an organization for female journalists. It features original music from Missouri students, as well. Missouri design professor Ying Wu designed the website, and she provides some background on how it came together.

How did you get involved in this project?
I first heard of the story last May from Yong Volz, an associate professor in our school. She did the research and interviews with her students. She explained to me Herstory was an oral history about 34 female journalists fighting for gender equality. When I heard this, I thought this was a very meaningful issue. As a woman working for the journalism industry for more than 10 years, I strongly wanted to be involved in this project. And when Professor Volz said she wanted to have a website for this story to impact more readers, I volunteered to design this website.

Why did you choose to autoplay audio?
My initial idea was from the key words—oral history. I think as an oral history, the audio, sound or voice should play a main role in this storytelling and give a first impression to readers. So I wanted to create an experience of listening a couple of women telling their stories to readers at the beginning when they visit the site. I wanted this audio to last no more than 60 seconds. I selected five voices, which expressed the main dilemmas many woman are still facing now. Then I did audio editing for those voices. Later, I added background music, which was originally created for this story. I wanted to use the human voices and music to trigger human emotion. That was part of my emotion design for this project.

I had a concern that many readers might not like the autoplay without being informed. But I thought the music was very light at the beginning. When you see the vivid watercolor portraits, to listen to the story is a very natural and beautiful thing. I tested some users. They told me they didn’t feel the audio was an annoyance, so I made the audio autoplay. Actually there are different reading experiences on different platforms. The autoplay is only on desktop and laptop. On iPad, which has my favorite reading experience, and mobile, the audio is not on autoplay. You need to turn it on.

How did you choose pink as your accent color? Were you afraid it would be perceived as sexist or too girly?
That is a very good question. I considered the color scheme for a long time when I started my concept design to this project. At the beginning, Yong Volz showed me the JAWS logo, which was a pink shark with lipstick. I thought the shark image and pink color showed woman’s empowerment. This is the main reason why I selected the color. The color was selected by these women when they started their feminist organization back in the early 80s. When I showed my idea of this pink theme color with Yong Volz, she liked it. And she has a quote, I think it explains very well the color selection: The idea behind it is that being a feminist is about taking women seriously and believing in, and fighting for, women’s equal rights in politics and society. It is not about preference of color or what you wear. Liking the pink color does not make you a bad feminist.”

Lili flower-Ying

Did you make the illustrated portraits?
I did the original creation at the beginning. I got the inspiration from a lily watercolor I painted a couple of years ago. Later I realized I didn’t have enough time to finish them, so I asked my friend JJ Zhan to help. She finished faster than me, and we have different styles. So I let her finish all the portraits.

It’s rare to see two serif fonts paired together. How did you make that choice?
I don’t think it is rare. Actually, if you have read all the text, I used serif fonts to the most content. This was part of my concept design. First, I wanted the fonts to have more of a sense of humanity. I thought serif could deliver that sense more appropriately. For instance, you can see the font I used for each person’s name is Zapfino, a calligraphic typeface. It associates handwriting signature. Second, I wanted the fonts could show the time these woman have worked. You know, most of these woman have worked at newspapers’ golden time. At that time, serif had been used often. I used paper texture as the background-image, and I selected the font with a sense of ink for their bios. It is like the font typed from a typewriter.

I found it a bit hard to navigate between the stories on the homepage, and it took me a bit to realize I could use my mouse. What user experience functions were most important to you?
I designed the homepage as a long-form page with a horizontal scrolling. My original user experience design was when you scroll the homepage like you scroll the vertical long form page. It should have a very natural scrolling pace with the speed how fast you scroll it to see each person’s portraits and her brief bio. The dots on the bottom show the progress. But we didn’t have enough time to figure out the pace problem, so we made the scrolling like a page by a page, three people appear on each page. But the pace is still not the ideal. But on iPad and mobile, the homepage scrolls very well.

Were you concerned that some users might not understand the icons, such as the music note to turn off sound?
I didn’t. I think, now with people get more involved with digital products, they gain more user experience. Many people suppose everything is clickable. If they are interested in something, they would like to click it. Or if they are curious about the functions of some icons or signs, they would just click it to see what is going on.

What is your favorite part of the project?
I enjoyed the design a lot. First, this is a very meaningful story. My favorite part was working with a team. I worked with researchers, a developer, musicians and a copy editor from Missouri’s different schools and departments. It was a great collaboration. They are awesome. I was very excited to combine different creative elements to create a pleasant reading experience. But we have some regrets. We tried to use parallax scrolling to make 3D photo effects for the photo gallery, but with the limitations of the photo materials and timing, we didn’t turn it out eventually, but we were so close. After finishing this project, I think such online storytelling is a convergence design with tech, art and story. I believe in the future, such convergence would be upgraded and extended.