Project overview
The project goal is to create an interactive learning environment for visitors to learn more about Los Altos history and its people.
My role and responsibilities:
I work as a production assistant intern responsible for concept design, research, testing, and designing the whole interaction experience using HTML, CSS, and JavaScript
Scope of the project:
To present the information using the existing materials and iPad. The interactive elements: texts, images, videos, audio, Google Maps, and 360-degree images.
Understanding the user:
Most visitors are families with young children, who mainly come to the museum to see the train. Kids are keen on technology and like to explore them. The museum needs an interactive design to attract kids to learn more about history.
Constraints and solutions:
There are a couple of constraints that I ran into and needed to work around it. The museum owns five 2nd generation iPad that runs on iOS 10. There is no restriction on the iPad to museum contents only. The 360-degree image file size is too big to be embedded in the design. In addition, it needs a third-party API to view the image in HTML.
Fortunately, the Kiosk Pro Basic is still compatible with iOS 10. Matthew Petroff writes a lightweight panorama viewer for the web called Pannellum. I use the API to embed 360-degree images into the interface design. Apple has the feature of parent control to restrict device access to only museum content.
------------------------------------------------------------------------------
Starting the design
Sketch ideas using the crazy eights to experience which interface might be a potential one.
iPad Cover Design
The iPad Cover Design is the introduction of the iPad content because each has its own stories.
First iteration
Second iteration
Categorize information using Google Sheets to plot the location on Google Maps
Customize Google Maps with colors
Mockups
Before
After
Before
After
Live Demo
------------------------------------------------------------------------------
Going forward
Takeaways
Impact:
Provide interactive content to the visitors to explore and learn more about Los Alto's history.
What I learned:
Problem-solving skills are crucial when running into problems. For example, I had to figure out how to embed a 360-degree image in HTML. Then, I ran into a different image size problem. There are a few technical problems that I have to Google for answers to since there is no technical support for the museum.
Next steps
Accessibility considerations
Adjust text colors, size, and height to reflect Web Accessibility Guideline and readability.
Testing in the physical environment
The location of the iPad uses spotlights to highlight the artifacts. The lighting environment might impact the legibility of the contents. The microphone is relatively old, which could limit the sound quality of audio content.
Thank you!
