Examples of Sketch and Prototype
Examples of Persona and User Journey Map
Photos of the Testing Sessions
Photos from the Showcase
DREXEL DIGITAL MEDIA SENIOR PROJECT
Coalescence - An Interactive Art Exhibit
In a group of nine Interactive Digital Media students, we spent nine months to create an interactive pop-up exhibit housed in Drexel University’s Pearlstein Gallery which highlighted the work of two minority creators through experimental technology and experiences. There were four web technologies (NFC chips, iPad web applications, the Leap Motion and a 60-inch multi-touch screen) being used for four different interactions: a collage gallery, a digital mural, an energy wall, and a loom. By designing with a user-centric process, were able to engage visitors in learning more about the artists’ creations and their cultures.
As a group, we defined early on that we wanted to create something that pushes the boundaries of what we learned in our classes. We decided on making an immersive and interactive experience that would make an impact. Our first step in this process was to figure out what our exhibit was going to be about. In the beginning, we wanted to focus on immigration and educate our audience through data visualization. However, after independent research and reaching out to cultural, and immigration networks throughout the city, we realized, the topic was too broad, even when we refined it to immigration in the Philadelphia area. After meeting with Rashidah Salaam, a design professor at Drexel University, we were able to get in touch with Ange and Lendeh, and changed our direction to showcase the work of individual artists related to their cultures.
Once we met with the artists, we started to brainstorm interactions that not only fully showcased their creative work but were also engaging and interactive. We knew at first that we wanted to include iPads, touch-sensitive projection, multi-touch screen, AR, NFC chips, LEAP motion and the Kinect. After a lot of refining, we settled on 4 different interactions and we further developed these interactions through heavy research, personas, user journeys, wireframing, sketching, mockups, style guides, prototypes, development, usability testing, construction, including 3D printing and laser cutting, and final implementation.
As for the physical development of the exhibit, we explored various possibilities for the display structures housing our artist’s biographies and works. For the physical posters, we experimented with different mediums and materials and eventually decided on sewing the printed material on top of the painted fabric to mimic the designs and colors from our user interface and style guide.
At the beginning of the design phase, we drew sketches to help us brainstorm some possible designs for the different interactions with the chosen technologies in mind. I personally focused more on the gallery interaction which involved the 60-inch multitouch screen. After the team agreed on one option, I started making wireframes and prototype for the gallery interaction. In preparing digital elements for the design I also spent a lot of the time editing photos we took with Adobe Photoshop.
As the UX designer in the team, besides helping out with the interface design at the beginning, my main focus was on user research, usability testing and user experience design. At the beginning of the UX phase, we defined our target audience type and created user personas along with user journeys. Our six target audience types were: college students, college professors, potential employers, student parents, young siblings, and grandparents.
Based on the user personas we were able to develop the user journeys. On the right has an example of the user journey, but more details can be seen on the google slides.
Throughout the project building process, we were able to conduct over 100 usability tests which resulted in many changes leading to more intuitive and user-friendly designs. Use the gallery interaction as an example, before we moved on with the initial design we caught the limitations of the technology early and adjust our interaction to provide the best possible experience for our visitors. Because the touch screen could not be laid flat and the initial idea we had for the gallery didn’t work well on a flat surface, we changed the gallery to a more collage-like design. Our users, after doing A-B testing, also confirmed our decision. After identifying and solving the challenges, users thought the final collage design was visually more interesting and the interaction was more cohesive.
To see all the notes and analyses for the usability tests, please view here.
Towards the end of the project, I was heavily involved in the physical setup of the exhibit and that included building the structures, making/sewing posters and preparing the space for the showcase.
Feel free to check out my week by week progresses here.
Solution & Results:
Overall, our exhibit was a huge success, as we had over 200 visitors come to see our show. At the exit, we set up a survey table where visitors could leave their final thoughts on the exhibit. We asked visitors to rate how easy the interactions and exhibit were to navigate. The survey results showed that most users found the exhibit easy to navigate and the interactions intuitive to use. Many visitors shared that they would like to return to our exhibit in the future.