Building a Cold War Consensus

*This was an in-class competition and my teammate and I won first place. We will now have the opportunity to bring this project to life.

A website of primary documents for use by senior high school and undergraduate university students. A SSHRC-funded historical project part of a knowledge mobilization strategy examining Canada-US relations during the presidency of Dwight Eisenhower from 1953 to 1961.

Client

Lakehead University

Role

UI/UX Designer

Platform

Web

Tools

Adobe XD

Collaborations

Russell Tia as UX Researcher

Year

2019
Problem

The primary documents are in a physical format that the students cannot access

These primary documents and other contextual historical information are first being transcribed by students at Western University. These documents will then need to placed in a website that is easy for students to use as a research tool when working on particular projects related.

Goal

Create a functional, well-organized, and visually appealing public website to feature the primary documents and related content

The primary goal for this project is to create a website that will display and organize this historical material for students to access as a research tool. We also aim to provide the readers of these documents with a clean and easy to navigate website that encourages active reading.

Navigation

We aim to create a navigation that is:

  • Simple: utilizing a simple structure
  • Clear: self-evident to all visitors
  • Consistent: the same across all pages

Readability

When deciding on how to approach all the typography for the website, we want to make sure to maximize readability by:

  • Keeping the number of fonts to a minimum
  • Limiting the line length to 50-75 characters to prevent users from getting lost while reading
  • Choosing a typeface that works in various sizes and was for made for extended reading
  • Ensuring that there is enough contrast between the text and the background
Persona

Our primary target users are senior high school and undergraduate students. We began by researching and speaking to students to define what their primary goals and

Solution

Create an active reading experience that maximizes readability

We ultimately want to make sure that we follow all the best practices when designing this experience, with particular attention to navigation and readability.

A font that maximizes readability

We chose Freight Sans for all headings and Freight Text for all body copy. These two fonts belong to the Freight family and thus complement each other well. They are both clean, highly legible, and designed with the reader in mind. They also provide the content creator with a wide variety of font weights including italics, bold, medium.

Final Design

Features to encourage an active reading experience

Reading Progress Bar

At the top of every document (within a document module), we have provided the reader with a reading progress bar. This allows the reader to know how much they have read and how much of the document is still left to read. This gives the reader a way of knowing how long a document is and also allows them to navigate through a document more easily.

Dark Mode or Light Mode

We have provided the reader with the option of reading either in light or in dark mode. Dark mode reflects less light making text easier to read. This is a lot less stressful on the eyes, especially under bright lighting conditions. This is especially crucial for students who use the computer for long hours

Full-Screen Mode

Students sometimes struggle to focus on reading and could become distracted by other features on the website or by other documents available for them to read. By removing all distraction, full-screen mode provides a cleaner and focused reading experience.

Info Cards

The time in which these documents were written can contain particular words that could be unfamiliar to students. With this mind, we have created “info cards.” If the content creator believes a word is unfamiliar to students, they can underline that word in the text and provide a definition for it. Thus, when students hover over these words, they are given a little pop-up box that provides them with a description. This encourages users to stay on the website and instead of going to google, for example, to search for definitions.

Highlights

It is common for students to highlight notes when they are researching or studying. We wanted to bring this experience into the website to encourage active reading. Students are able to highlight any sentences they deem important and later access them in the Highlights page. From there, they can email those highlights or print them to access them later.

Biographies, Timeline of Events, Acknowledgements

Biographies

Biographical Profiles is a page that highlights important individuals who played a significant role during this time period. Users are given the ability to filter these profiles as a way to more easily navigate through the different profiles. To encourage continuous research, a next profile button was placed on the single profile page.

Timeline of Events

The timeline of events presents the user with all significant events that happened during the Eisenhower administration from 1953 and 1961.

Acknowledgements

We considered placing the acknowledgements on the home page, or on the footer of all pages. However, we wanted to give the client the ability to write a thank you message to those who contributed to this project. By placing the acknowledgements on a separate page, the client is able to really highlight and acknowledge all those involved.

Takeaways