The Diplomatic Reception Rooms

Voice UI Design
Product Design

The Diplomatic Reception Rooms are a series of physical rooms containing historical objects, in the US Department of State in Washington, DC. The team at Bluecadet was contracted to create three bespoke interactive online experiences for the new Diplomatic Reception Rooms website.

My Role

As a designer, I worked with a team of content strategists and developers to help research, generate concepts, and refine the overall experience across the three products. I was responsible for concept sketching, wireframing, usability testing, and final design.

Challenges

As the DRR was diving into a new website redesign, they wanted to create interactive experiences to help tell the story of American Diplomacy for students and "history buffs." The contract required that the experiences include Interactive Timelines, Online Exhibits, and User Collections.

Interactive Timelines

Interactive timelines are designed to teach the broad History of American Diplomacy in a comprehensive, interactive way.

Online Exhibits

Online Exhibits are designed to allow the DRR to tell more focused stories using engaging, interactive experiences throughout.

Collections

Collections is designed to allow website visitors to explore the DRR's collection and create personal groupings of items. Think: Pinterest for historical objects.

Solutions
Interactive Timelines

Interactive Timelines accommodate and repurpose the content A Short History of the Department of State to better tell the History of American Diplomacy.

In order to accommodate such a large span of history (1607–Present), we designed an ecosystem of timelines that allow the DRR to create Individual timelines for "Eras" in history, which can then be grouped, and experienced individually or sequentially by website visitors.

This strategy also helped the DRR have a larger breadth of content at launch-date, while also teasing out future content to come.

Interactive Timelines were first wireframed in Figma. From there, we created a medium-fidelity prototype for usability testing. Testing was designed to understand the needs of each audience, as well as their interaction habits for a product like this.

Some of the key features that made it to design include a robust navigation system, light customization options to accommodate various types of users, and educational resources.

We also designed a suite of visual patterns to help support the narrative content the DRR was looking to develop.

Online Exhibits

Online Exhibits were designed to allow the DRR to tell more focused stories using engaging, interactive experiences throughout.

Online exhibits function as immersive experiences, designed to tell focused stories of American Diplomacy. Exhibits leverage various interactive patterns to tell stories in an engaging way.

The online exhibits prototype was tested with potential users to understand their needs, desired content, and interaction habits for an online exhibit.

Some of the key features that made it to design include DRR-generated prompts, 3D object exploration, object compare/contrast, and audio functionality for students with lower reading levels.

Collections

Collections is designed to allow website visitors to explore the DRR's collection and create personal groupings of items. Think: Pinterest for historical objects.

Collections allow people to save and group items from the DRR's collection of historical objects. The DRR is able to create public-facing collections to better curate their objects. Users are able to create their own collections, or duplicate DRR-created collections.

The Collections prototype was tested with users to understand their needs and behaviors for collections.

Some of the key features that made it to design include DRR-curated collections, a user profile page, and suggested objects and collections.

Details
Deliverables
  • User Journey Flows
  • Wireframes
  • Three prototypes
  • Usability testing plan
  • Usability testing report
  • Final Designs
Programs and Software
  • Figma
  • Airtable
  • Google Docs and Slides