Wireframe Process Blog

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


Navigating the Real App:

beggining wire

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:

wireframe_drawingOverall, 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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s