**To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study.
**This design is a speculative project based on a previous design I had created for The Armenian Genocide Memorial Museum.
Client: The Stonewall Digital Museum
Role: UX Designer
I created this speculative experience with the intent of designing an online museum with archival materials for the Stonewall Riots in June of 1969. It was also created to be a presence for the 50th commemoration of the riots in 2019.
A major civil rights happening occurred but no online digital museum exists to commemorate this historical event.
Task #1: Creating the Museum Vision Statement
My job at this initial stage of discovery was to craft the vision statement for the museum:
"The Stonewall Digital Museum will provide global access to the content and narrative of the time immediately before, during, and soon after the Stonewall Riots. It will serve as a full and independent offering for interested visitors who want to explore the content, and invite visitors to return for further exploration and to participate in taking action against all prejudices and to help build the physical Stonewall Museum."
Task #2: Museum Goals
Task #3: R & D Plan
Task #4: Quotes
I'm a huge language person. I used my trusty Bartlett's Book of Quotations to research quotes for inspiration regarding the situation and theme that I defined previously..
Task #5: Profile Imagery
I wanted to examine exactly who were these people that participated in the historical narrative. I investigated photos and imagery that deeply represented historical figures that drove a narrative in history.
- What were their motives?
- What was their background?
- How did they come to the story?
Task #6: Pattern Libraries
I began to examine pattern libraries regarding typography, navigation buttons, and color palettes. For the purposes of narrating my UI/UX story, I won't go into these visual design elements. I did, however, concentrate on grey-scale palettes mixed with vibrant colors.
Task #7: Main Video
The client enunciated how important it was to have a centralized video on the page that reflected the central theme for the whole site. I examined examples of video sites that told amazing stories using great navigation systems (click images for details) as examples for the video page.
Task #8: Dynamic or Rich Narrative
Our Dynamic or Rich Narrative was to be the key emotive area of our site. It was to comprise all of the ideas and themes of the chapters and their articles in a timeline fashion. Do characters/key figures drive the story? Should this also drive the design of the main navigation?
And how to present such a gravitous theme in the Dynamic Narrative? I looked at several sites (click images for details):
R & D #6: Interactive Map
The idea of an interactive map was imperative to the client. The dramatic times in history we were dealing with changed minute-by-minute. So a timeline presenting facts made sense (click images for details).
The site map for the Stonewall Museum includes a legend describing the 4 templates used. The site had to carry archival reading, updatable material. Thus, there needed to be a great deal of room for articles to be constantly added in the back-end.
Visitor Personas & Journeys
Who are the Primary Visitors to the Site? I helped draft some personas diagrams with my lead interaction designer for the primary and secondary visitors to the museum.
Visitor Journey #1: Student/Academic via an organic, general search. The outcome is the Call-To-Action to help build the museum.
Here we are expanding a story from the Dynamic Narrative to a full-detailed view of an Article Page (Aftermath). Any user can experience the Dynamic Narrative and find details in an article about the story. Again, the Dynamic Narrative was designed to be the "emotional heavyweight" of the digital museum.
Also, we can experience profiles of key players (Dick Leitsch) in the riots from the Dynamic Narrative.
Visitor Journey #2: Politician is requested to acknowledge the issue of hate-crimes and the upcoming 50th Commemoration of the Stonewall Riots in 2019.
After experiencing the Dynamic Narrative first, the politician/media user arrives at the home page and views the video. Here the user has learned the story first, then has watched the video. He/she then reads the article.
Dynamic Narrative Design
Probably my favorite part of this job was designing the Dynamic Narrative. Taking my passion for history, using the content, examining the visitor journeys we created, how could such a monumental story be broken down, compacted, yet retain its richness and have a cinematic, emotional impact? The most difficult problem was trying to incorporate the design of the main nav and how it could simulate, if at all, the theme and interface of the Dynamic Narrative (click sketches for details).
Final Lo-Fidelity Wireframes
Designing the UI/UX for the museum, the initial, overall problem was to how to design around the importance of the video. Again, the video was the emotional anchor. What I settled upon was:
- The use of collapsible transparent overlays over any content not covering the video
- The use of an expandable accordion main nav that is a persistent sidebar. The sidebar would house the main content of the Dynamic Narrative, Call-To-Action, the Interactive Map, and the About pages. Expanding the nav would reveal the the chapters. These chapters were planned with holding images of profiles of key players in the story - representing each chapter
Here are 3 of the templates designed for the site. Wireframes were designed first for a tablet experience due to its popularity with browsing:
I am continuing my Stonewall concept with a grant, purchased domain names, and collaborative efforts with noted authors on the subject. It would be a great tribute to all those who fought, lost their lives, and those who continue to struggle around the world with hate crimes and continued prejudice.