BYOAD: New Templates and Sites: Overview

Team

Students: <Cameron, Cathy, Lilly, Nelson>
External Advisors: <Merilee Mostov, Bainbridge Island Historical Museum; Miranda Peters, Fort Ticonderoga; Patricia Pongracz, MacCulloch Hall Historical Museum; Laura Westmoreland, Brandywine Museum of Art>

Project Overview

Our team aims to extend and modify the existing Intrepid Museum BYOAD website. Based on the vision of our clients, our team will design personalized templates that best fit the experience and theme of each museum. To ensure museums and sites with limited staff or technical backgrounds will be able to manage and maintain the site, our team will provide multimodal documentation of how to use the personalized template and provide training in WordPress to staff.

The template will have two components: a content template and a style guide. One goal for this semester is to design accessible and aesthetically pleasing user interfaces. Our team will create new design systems that help museums to standardized the visual elements on the website and ensure they are accessible and WCAG compliant. We will also design and develop 1-3 key screens for the sites as examples for museums to reference in the future. 

We are planning to conduct usability testing with visitors to validate our hypothesis and design choices. However, this step is subjective to change. 

The images are from the Intrepid Museum BYOAD website. 

An image of the exhibit page of Intrepid Museum's mobile guide. The image captures the Look Up Exhibit functionality of the exhibit page.An image of the exhibit page. The image captures the Look Up Exhibit by Level functionality of the exhibit page.

An image of the USS Intrepid exhibit page. The image captures the table of content with hyperlinks located on the top part of the page. An image of the USS Intrepid exhibit page. The image captures the location of the exhibit, text directions to the exhibit, and 3 fast facts about the exhibit.

SUMMARY:

The three main pieces of our project are linked below:

Figma File: Each site’s wireframes are viewable here. Navigate to a specific site’s page using the “Pages” panel in the upper left corner. To view code for an element (text, images, any component of the design) select the element and click “inspect” in the menu on the upper right hand side.

Annotated Wireframes: Each site’s template is viewable here with additional comments from us about the intended functionality of each page.

Accessibility Documentation: Our documentation outlines important accessibility considerations as well as suggestions for WordPress implementation, including helpful plug-ins to make including accessibility easier.

We welcome any feedback on any of these pieces through this feedback form!

Weekly Updates