< Back to all projects

Dartmouth College

Designing a site to celebrate their 250 years of Dartmouth


UX Designer


OHO Interactive

Software used

Sketch, Invision

Live link

Dartmouth College


Dartmouth College reached out to OHO to work on a site to celebrate their 250th anniversary. The site was to feature various Dartmouth monuments, people, milestones, and future endeavors.

In this project, the site had two custom wireframes that had to be made: the homepage, and a timeline page, each having its own logistical challenges. I was the primary UX Designer for this project with guidance from my supervisor.

Guiding Questions

Before starting any work on the timeline page, we had to come up with a few questions to guide the final product:

  • How could we feature Dartmouth's future endeavors and goals in addition to their 250 year history?
  • How might we make the page interactive and not just a list of images and text?
  • How could we feature all aspects of Dartmouth without favoring one over the other?
  • How can we use the site to lead users to the capital campaign site?

A Timeline Without Time or Lines

When starting this project, the client suggested a timeline to represent their 250 year history and their plans for the future. However, in this timeline they didn't necessarily want to show the timeline in a strict linear fashion like other colleges tended to do. They also did not want the timeline to be in chronological order.

Ideas and sketches for the timeline. This image has to stay confidential, so please contact me for more information.


The page not being linear or chronological posed as an interesting challenge. We went through multiple iterations and sketches of ideas for this timeline feature. Prior to the final result, I've toyed around with creating an interconnected web, a circular timeline, gallery pages from various eras, and parallel timelines with the past and future on opposite sides.

The Timeline Solution

We ended up proposing a modular solution that could be randomized or shifted around if certain results were filtered out by a user.

Each section of three could be broken up into three components (one large and two small beside it).

Each of these three components could either be one of: an uploaded image, a chosen icon, or a default icon, accompanied with a title, year, and short description.

Say we start with just six items in this given order. Some of them have an image (2, 6), a chosen icon (3, 4) and some have the default icon (1, 5)
Next, a user may use some filters that remove items 1 and 4. Without the functionality, the timeline may look really messy with open spots.
Instead, the cards would shift from their small or large forms to match the spacing

How much content?

While making the first few iterations of the timeline, we asked the client how much content they were expecting to put in. The client stated that they would have enough to populate four or five cornerstones (themes) with multiple pages for each.

Knowing that there would be potentially hundreds of items in the timeline, we had to find a way to organize all the information so it wouldn't be overwhelming to a user.

The Tagging System

The client always wanted to have four or five cornerstones for the timeline but wanted a way to prevent departments from feeling unequally represented.

We suggested breaking down the filtering into two levels: the overarching cornerstones to represent all of Dartmouth, and a more granular tagging system to help filter down results further.

In addition, We suggested randomizing the content, whether on page load or once after entering in content, to ensure that all departments have an equal opportunity to be represented on the top or first few pages of the timeline.


The Dartmouth 250th project was one of the last few projects I worked on at OHO Interactive, and it was the first project where I was the primary UX designer. It was an extremely constructive experience for me as the primary UX designer since I would lead calls with the client and stakeholders to discuss the project constraints and final deliverables.

Seeing the project through from its discovery and research to sitemapping to wireframing helped me learn a lot about a project's lifecycle and balancing timelines to keep on schedule.

The project also let me practice communicating with other developers as I had to explain the timeline concept to backend developers. The computer science half of the degree came into play and helped me easily draw out exactly what needed to be done on the backend to communicate with the frontend and how it relates to the design.