*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.
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.
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.
We aim to create a navigation that is:
When deciding on how to approach all the typography for the website, we want to make sure to maximize readability by:
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
We ultimately want to make sure that we follow all the best practices when designing this experience, with particular attention to navigation and 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.
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.
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
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.
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.
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.
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.
The timeline of events presents the user with all significant events that happened during the Eisenhower administration from 1953 and 1961.
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.