Project overview
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 production assistant intern who responsible for concept design, research, testing and design 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 consist of texts, images, videos, audios, Google Map and 360 degree images.
Understanding the user: 
Most visitors are families with young children, who mainly comes to the museum to see the train. Kids are keen on technology and like to explore them. That's why the museum wants to have an interactive design to attract kids to learn more about the history.
Constraints and solutions:
The 2nd generation iPad runs on iOS 10, which has been discontinued by Apple. The main constraint is to embed the 360 degree image to interface design. The images are too bright and static, you can only rotate the image 360 degree.
Luckily, the Kiosk Pro Basic is still compatible with the old iOS. Matthew Petroff writes a lightweight panorama viewer for the web, called Pannellum. I use the API to embed 360 degree images to the interface design.
Starting the design
Sketching ideas using the crazy eights to experience which interface might be a potential one.
iPad Cover Design
Before
After
Categorize information using Google Sheet to plot the location on Google Map
Customize Google map with colors
Mockups
Google map without label

Before

After

Before

After

Live Demo
Going forward
Takeaways
Impact:
Provide interactive contents to the visitors to explore and learn more about Los Altos history
What I learned:
The problem solving skills when something is not working. For example, I had to figure out how to adjust the 360 degree image size so it would be compatible with both the software and the hardware.
Getting as early as possible to ensure that whole experience is working as intended.
Next steps
Accessibility considerations
Change text colors, text size and text height to reflect Web Accessibility Guideline and readability.
Testing in the physical environment
The location of the iPad is dim and there are a lot of spotlights to draw attention of the visitors to the artifacts. The environment will have an impact on how the whole content is perceived and whether it works well with the rest of the artifacts.

You may also like

Back to Top