Without Wall Project

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.
Sketch ideas with crazy eights
iPad Cover Design
The iPad Cover Design is the introduction of the iPad content because each has its own stories.
First iteration of the iPad cover design

First iteration

Second iteration of iPad cover design

Second iteration

Categorize information using Google Sheets to plot the location on Google Maps
Customize Google Maps with colors
Mockups
People History Maps without label

Before

People History Maps with label

After

People History Homepage - Before

Before

People History Homepage - After

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!

You may also like

Back to Top