ANA BRINGAS
UX | Product Designer
I worked on my dissertation project for MSc Computing with Digital Media. This project focuses on creating an effective user interface for a mobile first museum application exploiting Human Computer Interaction to facilitate user interaction with a 3D reconstruction of the Santa Chiara Church.
Problem Statement
The purpose of this research project was to build upon an existing 3D model of the Santa Chiara Church in Florence in order to create an interactive web mobile 3D application. In 2015, the existing 3D model was presented in the Victoria and Albert Museum and its website. The museum interactive was based on out-of-date Flash technology where its 3D reconstruction was presented as a short (3 minute) flythrough of the Church of Santa Chiara affording very little user interaction with the actual 3D. As such there was no mobile version available, aside from the Flash runtime embedded into a web page that was not responsive. The current application was about 4 years old (at that time) and was ready for an update exploiting new technologies such as HTML5, CSS3, and a suitable JavaScript framework exploiting a responsive mobile first approach.
Flash version of the Santa Chiara Church interactive at that time.
Objective
The objective of this project was to explore Human Computer Interaction (HCI) to find the best way to design, present, and implement the rich-multimedia to present the heritage information to users. Moreover, the primary goal of the project is to enhance the reconstruction of every visual, contextual and cultural facet of the church in order to create an educational and enjoyable experience that will improve user access to the information and serve as exemplar for similar future developments Therefore, people of all ages and locations would be able to visit the Santa Chiara Church online and have access to a wide selection of media, such as audio, video, images, text and videos. To facilitate this project, a usability test has been designed and carried out to test and evaluate a Mid/High fidelity prototype.
Low fidelity prototype. The ground floor shows the distribution of Interactive media spots and the High Altar.
Wireframes
The design style and layout follows Material Design guidelines. The layout template was used to wireframe and to arrange all the elements providing accurate spacing between them. In addition, V&A Museum branding was implemented in the font of the logotype and the colors of the application.
Prototype
This video shows the high-fidelity prototype created to conduct a pilot test for usability testing.
User Testing
The pilot test and questionnaires gathered sufficient feedback needed in order to refine requirements and redesign some aspects of the interface. According to the questionnaires, the interface design was well received, but the test clearly demonstrates that important changes have to be made for future testing and implementation.
After the pilot test, some improvements were made in the UI.
-
The navigation wheel helps the user move in certain direction, before it was panning, titling and zooming the camera.
-
More labels were added to give a clear understanding of where the user is standing.
-
Contrast was increased to make it more accessible.
Conclusion
The project provided useful design material and guidelines supported by strong background research that would serve as a base for developing the new mobile first app. The requirements concerning graphic presentation, menu structure, and texts were well achieved.
Dr. Martin White and Dr. Ben Jackson are in charge of the project and currently working on the 3D model and programming for its release in the V&A museum.