Academy Museum Website

1. Top of the homepage added a video to introduce the experience of being at the museum rather than promoting an exhibit. The next block has museum hours.

2. Below the hours block, is a rotating promotion block first used for promoting ticketing. Below is a scrollable block that features the museums iconic exhibits (aquarium, planetarium, rainforest, and natural history museum).

3. The next three blocks feature exhibits. The first an header text block introducing the section with a link to a webpage about all exhibits.

4. The next two blocks are about specific exhibits. Each block includes an image or video and short written content with a button linking to a webpage to learn more.

5. The next three blocks feature events. The first an header text block introducing the section with a link to a daily calendar. One of the blocks is dedicated to NightLife a weekly 21+ evening event series.

6. The next three blocks are about becoming a member and donor. The first an header text block introducing the support section with a link to learn more.

7. Donor block.

8. Footer starting with an email newsletter signup. Below that are links to key pages, social platforms, location information, and accreditations.

1. User testing - the visitor were handed a mobile device to engage with an interactive prototype. The projector mirrored the device.

2. User testing - Akemi the Visitor Engagement specialist is leading user research sessions while other members of the team asisted and recorded on evaluation toolkit forms.

3. User testing - Photo of visitor group discussing their experience using the new homepage. They were asked to compare 3 of the top designs.

4. User testing - Akemi leading questions about ranked interest in content and likelyhood to engage with content and purchase tickets.

5. Mockups (mobile and desktop) of the homepage. Designed to be modular and be easy to update containers for evolving content needs. The responsive layout was important for a large mobile-only audience.

6. Mockups of the homepage. Iterations exploring content hierarchy and organization of the many different types of audiences who visit www.calacademy.org. Evaluated based on user data and visitor testing.

7. Homepage mockup - a compact version with an emphasis put on tabs to show content for top audiences.

8. Still from a video created for the homepage. This crop was used as part of a series of videos showing off the most striking parts of the museum. Videos used a to replace the homepage carousel.

9. Initial sketches for homepage design.

10. Working team reaction to the three design layouts used for user testing.

1. Interactive hero image - For the 10 year anniversary web page, visitors used the slider on the hero image to see what the rainforest bio dome looked like in 2008 vs 2018. View 1

2. Interactive hero image - For the 10 year anniversary web page, visitors used the slider on the hero image to see what the rainforest biodome looked like in 2008 vs 2018. View 2

3. Using brand illustrations created by Michael Bartalos, a 404 error page was created with a sense of humor, imagining the diorama taxidermy pulled the plug causing the error. Humor was used to combat frustration when not finding the correct web page.

4. Two pages showing the design of informative stickers placed over images. Used to show sold out or low quantity of tickets, as well as coming soon, new, or closing soon exhibit indicators.

5. Love Letters landing page - a project where members and visitors write digital postcards to their favorite Academy animals. This was incorporated into fundraising campaigns and museum anniversary celebrations.

6. Love Letters detail page - An example letter included a randomly selected stamp (designed by me), their message, and a date stamp to mimic the postage meter marks.

7. Love Letters upload page - To add a Love Letter, members and visitors fill out this form including adding a optional custom photo, otherwise we randomly selected an image from a library I created.

8. Example of one of the slide up modals designed for the website. This health and safety modal was deployed when we were starting to allow guests back into the museum after the COVID-19 shutdown.