Creating a Virtual Timeline through UX Design and Rapid Prototyping

Client: The National WWII Museum New Orleans
The National WWII Museum New Orleans Digital Collection Timeline

The National World War II Museum in New Orleans approached us to design a timeline interface for their digital collections of the national WWII museum. The archive contains photos, video, and audio from veterans and others involved with WWII. Our task was to display the entries with dates attached on a timeline in an interesting way to show the duration and chronology of the stories involved.

 

screenshot of the timeline
Screenshot of the timeline view of the collection.

 

collapsing of events when zoomed out
Events collapse into groups when the zoom level would make the timeline too dense.

 

To kickoff this project, we met the museum’s creative and technical teams to determine the target audience, what data is available through their database, and any platform constraints. An important fact-finding mission for us, we needed to make sure any concepts we developed were technically possible and also addressed the collection’s user demographics.

 

screenshot of the modal for a clicked event
Modal that overlays the timeline when an event is clicked. The beforehand and meanwhile buttons are meant to act as a temporal locator to further emphasize time. Clicking them will advance the user forward or backward on the timeline.

 

Using Adobe XD, we were able to rapidly test interactive prototypes both internally and externally. The end result was a package that included all assets, specs, colors, videos of animation and transition samples, and expected functionality that we then handed off to the development team.

 

Video showing an animation sample using the same easing techniques as the main website.

 

Services: