Public Art At CMU Application Wireframe Sketch : 9/1-9/3

Navigating the Real App:

My initial impression of the app was that I thought it would work in a way similar to Google Maps- where you can drag the man in the corner to anywhere onto the map. Unfortunately, I found that you could only put him on a few blue locations. Additionally, I had no idea where I was on the map. I felt lost using it. It also crashed several times. I imagined a way where viewing one art may lead to finding another. But, this was mostly to compensate for how overwhelmed I felt trying to navigate the map.

Additionally, as this was my first time navigating, I felt the annotations added clutter. I wanted to find a way to express the uses of an app in a more effective way, using visuals and words.

Researching Wireframing:

I read the documents provided by the Environments Track Site in order to understand how to wireframe a little better. Though they advised against color, I decided that I still wanted to use spot color. The documents helped me to decide what was necessary to include into a wireframe.

Next, I looked at wireframes done by other people to inspire my own. I pinned them to a new Wireframe Board that I created on Pinterest. I admired the use of red annotations, the use of arrows, and the boxes used for images and bars. These UIUX features greatly inspired me.

Deciding What I Want to Fix:

Running through the app, I was most confused here where it says “Located between CFA and Tepper School of Business….

…Because after walking the path I realized that would make it right here- but this is not the Kraus Campo (AKA Number Garden). It’s actually Posner Hall. Thus, I realized that the though the app’s main job is to show you where artwork is on campus, it does a poor job at actually getting you there. So, when considering what to change, I made this my main focus. I added a navigational system similar to Google Maps. It shows visually how to get there. I decided audio was unnecessary for the navigation, since CMU students would not need to travel far to get to the artwork.

Additionally, I noticed that another key feature of the app is showing you artwork that is nearby you. I decided to improve this feature, and also the use of the guy in the left corner. Upon clicking the “Find Me” button that I added, he will ground the user on the map, thus mapping them within the digital space and making it feel more physical. Additionally, he helps take the user to Street View Mode, a feature which gives a 3D feel to the images of the artwork.

Mapping Out Layout:

Lastly, since I knew I had 5 screen frames to show in my sketch, I mapped out the layout. I include my main goals, the 5 frames, as well as room for critique (which Alex Palatucci had inspired me to do).

The Final Wireframe:

Overall, I am pleased with this wireframe. However, I would like to continue to explore ways to express interaction and also how to make my annotations less messy. I’d like to explore how to effectively use color when wireframing.