Design Sprint 4: Designing for Communicating History
For my final design sprint in our Human-Computer Interaction class, I chose to focus on the final iteration of my honors project — a digital exhibit about the history of Macalester College. With this project, my goals were to effectively communicate history to users primarily in the Macalester community, including students, faculty, staff, and alumni. I wanted to give these users the chance to explore on their own and learn more about the specific parts of Mac’s campus that they were interested in, while also leaving room for them to think critically and uncover stories that they might not have expected.
I completed the bulk of my research prior to this semester, and so my focus this spring was to figure out the best way to organize and present my findings as a digital exhibit. Initially, I informally gathered information from different potential audience members on campus, and then used paper prototyping and sketching to think through possible designs. Then, I selected a web design tool and dove into building the site itself. I conducted a handful of user tests on rough versions of the site and talked to users about their feedback, before presenting the final product in my honors defense.
Understanding and defining the problem
My first steps this semester were to understand the audience I was designing for and what my ultimate goals would be. Given that my project centers around the history of Macalester’s campus, I concluded that my audience would primarily be members of the Mac community — however, these members would have different approaches to the information. Faculty and staff experience the Macalester campus as a workplace, and likely commute to work, while students often live, work, study, and socialize on campus. Finally, alumni might remember different buildings and outdoor spaces than the ones on campus today. Speaking to some of my classmates and professors showed me that people were interested in hearing about unexpected stories. Students were also particularly interested in dorms and how students have socialized over time.
With these ideas in mind, I started to play around with how to organize my information. I started by chopping up my written work into note card-sized chunks and experimenting with different ways to organize them. By laying them out on the floor, I was able to visualize what I had to work with and try reading the cards in different orders — going by theme, or chronologically, or jumping around.
Ideating around a solution
In combination with my note card experiments, I also worked on some exploratory sketches, which helped me think about how the underlying organization of ideas would translate into the components of a user interface. I knew that I wanted to have some kind of timeline element, however, I also had longer chunks of writing that would be more difficult to associate with specific years.
Sketching helped me realize that I could create a timeline with two kinds of events — some would be simple, like “West Wing of Old Main opens,” while others would be more like articles associated with a specific time, like “Dorm life in the early 1900s.” I could use visual styling to help distinguish these kinds of timeline events from one another. The interface would give users an overall sense of the campus’s history, but it would also offer links to more in depth articles on certain events and trends.
Designing and testing
After settling on a general design philosophy, I had to select a platform. In consultation with my advisor, I decided that the best option for my project would be a static site generator. I looked at a handful of options, including Hugo, Jekyll, Astro, and Nanoc, and spent time familiarizing myself with what they offered. Ultimately, I landed on Nanoc, since it offered what felt like the most intuitive setup for me, allowing me to apply HTML layouts onto Markdown files containing the bulk of my written content.
I then set out creating a basic version of my website, with very little styling — essentially a chronological list that linked to articles.
As I built out this simple version of the site, I started to get a better understanding of what would need to be on each page to make the website more functional. Next and back buttons, a timeline that reflected the differing spaces between years, and photographs would help flesh out the site.
Once I had the bulk of my finalized content on the site, I conducted a few user tests with my classmates. For these tests, I prepared a very basic version of the site, with a bit of color and some photographs, but I didn’t want to waste a lot of time on styling when I really needed their feedback on the basic layout.
User testing was incredibly helpful in figuring out what people would actually do when interacting with the exhibit. From testing, I found that long, unbroken blocks of text, along with prominent footnotes proved to be distracting and discouraging to users. Adding more photos wherever possible, creating whitespace between paragraphs, and visually separating citations from the rest of the writing helped to make the site look much cleaner, and gave it a more accessible and less strictly academic feel. Users also noted that they were worried they had missed information when they started reading articles out of order. Adding a next and back interface that prominently displayed the year, as well as the titles of the upcoming and previous articles helped to orient users better once they clicked out of the initial timeline. Although I wasn’t able to conduct extensive user testing, getting the site into the hands of potential users helped to highlight the most important issues and clarified how I should approach finalizing the exhibit.
Working on styling
To prepare the site for my honors defense, where audience members would get the chance to view the site on their screens for the first time, I began developing the visual style of the site. After experimenting with a few colors, I decided to take inspiration from some of the archival Homecoming special editions of the Mac Weekly I had discovered in my research, which used blue ink on off white newspaper.
For simplicity’s sake, I picked the typefaces Zilla Slab and Source Sans Pro from Google Fonts, which offers a suite of different fonts available for easy commercial use on the web. I picked Source Sans Pro because I wanted an unobtrusive, easily readable typeface for body text and smaller headings. I chose Zilla Slab because its blocky serifs were bold and reminiscent of some of the Mac Weekly’s headings and Macalester’s logo font without being exactly the same.
For the styling of the article pages, I ended up emphasizing the year and offering next and back buttons on either side to make the chronology and navigation options clear.
Finally, the finalized timeline design placed static events (that lacked an accompanying article) on the left of the timeline with a gray outline. Articles were given a blue outline and placed on the right side. When the screen window is shrunk or viewed on a phone, the timeline events retained their color differences but were displayed in a continuous list.
Presenting and next steps
I successfully defended my honors project, and wrapped up by making a few small edits as recommended by my professors. I added new descriptions to each section homepage to help clarify what they explored. I also added a brief introductory blurb on the homepage ahead of the timeline.
Ultimately, I think that I was successful in creating a simple interface for my exhibit that allows people to explore what interests them. In the future, I plan to give the site a more permanent home and make sure that it stays up and running, but I don’t anticipate making major additions to the content.
If I had more time to complete this project, I think it would have been interesting to incorporate more maps and overhead views of campus to help users visualize how the campus as a whole has changed over time. Another feature I would consider implementing if I had more time would be a snippet of the timeline that would appear to the side on individual article pages to help orient the user in time. However, I think that the simplicity of the current interface gets the job done and allows the research to take center stage.
The design process of this exhibit helped demonstrate just how focusing on users and making small changes can be really impactful. Even the somewhat informal user tests I conducted were incredibly helpful in figuring out how people would use the site, and I found that making small changes, like adding spaces between paragraphs, changing colors, or adjusting the size of an element were able to make a big difference in the final look and feel of the exhibit.
You can check out the final site here!
