Environments Studio 1: Form and Context

Contexts: Step1, 2, 3A, 3B, 4, 5, 6, 7 (All documentation for A1 Noticing Environments)

STEP 1: WIREFRAMES OF CMOA

Experiencing the physical threshold by roaming around buildings then thinking about digital threshold by analyzing Ikea website helped me to have better understanding on threshold. Thinking about the transition between spaces or website pages, I tried to analyzed upon how designers of physical or digital spaces may left various cues to help users navigate through space.

To begin with wireframe, I first looked at main page of CMOA website and skim-through basic structure of website. Then, I added more details about images and text that are thresholds introducing users to upcoming events or exhibitions in CMOA. Other then exhibition informations, there were many thresholds that are action related such as making an account or paying for the tickets.

Wireframe of Five Screenshots from CMOA Website

To highlight the thresholds for clear understanding, I used pink highlighter both on wireframe and the annotation. Five screenshots I worked on were main page, page for large image on the main page, page for touring schedule on calendar, page for primary navigation, and drop down menu page. I chose these five screenshots because I wanted to focus on how to find informations as a user before visiting the museum.

STEP 2: PHYSICAL THRESHOLDS OF CMOA

When approaching to CMOA from our campus, we first see a building that is very different from environment around it. Once we get close to the museum, we can see a sign that directs them to CMOA. Before I knew the location of museum, I searched on google map to find it.

Panorama of museum front view and signages
Material of environment:

Elements that signals that we are close to museum are signs, bus stop name, and the parking area for the museum. The most discernible change when entering private property of museum from public sidewalk is materials used for the ground. When the sidewalk ends transformation of ground material is a threshold which hints people change in environment.

Ground material transformation
Sound of Environment:

For me, the most interesting threshold of entrance to the private property is the clock. The clock adds fun to visitors by taking picture that can be viewed when they enter the museum and makes ticking sound effect that also contributes to dynamic change in environment.

Clock and place where photograph is viewed
Lighting of Environment:

Lighting of environment changes when visitors move from the open area to seating area where seating area affiliated with the museum.

Images for both top and bottom text

Although glass doorway is a definite threshold to the museum, there are many other features that are used as hidden thresholds to contribute to slowly introduce space to the visitors.

Left: transition from outdoor to indoor; Right: from indoor to outdoor

Glass doorway is a transition from outdoor space to indoor space. Since glass is a transparent material, it provides subtle transition. Also when I went into the liminal space, the glass doors blocks crowd sounds, creating a silent space that signals visitor that it is a transition.

STEP 3 A: OBSERVING ONE PIECE OF ART

After picking up ticket, first sight visitor see is main hallway to different exhibits. I chose heinz gallery, ‘The Studio Museum in Harlem and Carnegie Museum of Art.’

Name of Environment: Main Hallway

Main hallway

Threshold 1: Elevation

Name of Environment: Stairways

The floor material of the stairways leading to second floor is similar in color and texture with floor of main hallway connecting elevating space to flat space. However, elevation of stairways infers change in environment.

Stairways

Name of Environment: Navigating space

First view on second floor

When visitors first reach the second floor, there are two galleries and a map that helps visitors to overview the environment of the museum. I went in to the Heinz gallery on the right.

Threshold 2: Floor material change and guide books for new environment

Material change on the floor
Guides for the gallery

Problem I found was that transition of wall color on stairways is little bit confusing because I am curious why they used certain colors on the wall for it. Also, the signs which directs visitors to locations are put up so high that it is hard to find.

Threshold 3: Various displaying elements in the gallery

Name of Environment: Gallery space

  • Brighter Lighting when compared with space before entering the gallery
  • High ceiling and exposed ceiling gives grand feels to the environment
  • Wall color changes into taupe and white creamy color which give clean and crisp vibe.
  • floor material changes from stone to more reflective material which makes visitors feel like they are immersing into the space.
  • More quite in terms of background sound
Front view of the gallery

Once I enter into the gallery with art piece, the way of observing art pieces differ depending on their size.

Smaller size art piece

Smaller size art piece is mostly viewed in standing position and viewer gets closer to see the description after observation of art piece. The interesting fact I realized from this was that museum writes description small enough that visitors are attracted to move closer to the art piece.

Smaller art piece
Bigger size art piece

Smaller size art piece is mostly viewed from a distance again in standing position. Also, most of the 3-D art pieces have line taped in front to hint viewers not to get too close to the art piece.

Bigger art pieces

Another problem I found was that some of the descriptions of paintings were placed too far from the paintings that it was hard to make connection. Also an ipad that seems like a good resource to give direction was not functioning in the museum.

STEP 3 B (CMNH): OBSERVING ONE PIECE OF ART

Threshold 1: Into to the Bird Hall

Doorway into the Bird Hall, color change of the wall, darker lighting are the thresholds to Bird Hall environment. When entering the bird hall, the ceiling gets lower, forming a cave like atmosphere. The wall changes into darker color and reflective material which reflects little lights in the bird hall.

Threshold 2: Out to the world

At the end of the long and narrow hallway, visitors leave the environment through stairways which provide gradual transition into the outside world. Also for me, the sound change was interesting because the space inside the bird hall had echo.

Mystery room that changes hologram of bird and sound each time people open the door

It seems like hallway is too narrow and one side of ceiling is too short for some of the adults which distract them from fully experiencing the exhibit. When opening door, ‘Section of Mystery’ blocked passengers’ way in the hallway.

These are the problems I found through observing movement of people within the environment.

Problem found

Problems I found:

Through the research, in the heinz gallery I found out that even though displaying method is very organized and well thought, suggested direction is a bit confusing.

In the bird hall, I found out that enabling visitors to both enter and exit on either side of the doorway creates chaos in people’s movement.

STEP 4: Digital Thresholds

Website Analyzation

In order to fully understand the digital thresholds, I analyzed both website and the application. Beginning from the front page of the digital resource, I began to look more thoroughly for what thresholds lie behind.

Overflowing text

As seen above, I highlighted essential thresholds by color blocks. Homepage mostly consists of thresholds to exhibition events taking place now or in the future. However there are overflowing amount of sub categorized information that users cannot comfortably navigate through the website for the information they are searching for.

color

Color blocks that they used for dates were inconsistent while some that are unrelated did have a matching color blocks. Also, there are too many advertisement thresholds that introduce users to blogs and events which hinders users to find information.

I chose to hover over primary navigation where art, visit, programs and other thresholds are placed. when I placed the mouse over each section of primary navigation, it changed color.

When clicked on art (left) and when clicked on certain exhibition within art (right)

This is what appears when clicked on the art threshold. Exhibitions were divided into set of image representing exhibition and duration date and text that gives information about the museum.

Inconsistent threshold hint

The confusing part of this page was that bolded texts were not clickable. This was confusing because on the first page, bold texts were one of the threshold hints that directed users to different part of the website. Also, size of images were not appropriate that major exhibitions was not visible at first glance without scrolling down the website.

The first thing that appears when clicked on certain exhibition is a quote that gives users an idea what this exhibition is about. On this page, the color code red is what signals as threshold which is consistent from the main page.

Reflection

Overall, there were some consistent use of color coding throughout the website, however some of the color blocks were confusing. The website will be helpful if user wants to find information about the museum. However, it is not appropriate to use it while navigating through the museum. To make the website more applicable as a hybridize tool between physical and digital environment, it needs following improvement.

  • minimize text
  • consistent threshold hints such as color code and bolded texts
Application Analyzation

When using the application, I was surprised to find that it successfully enables users to enter a hybrid environment within both physical and digital experience. Although the application was well organized to find information pages users are looking for, it was more helpful while observing artworks.

Six screenshots I focused on

To analyze the application I focused on six thresholds that are most crucial when using it as a hybrid tool during the physical experience.

Hours, Location, and Admission

As we all know, finding hours and location is the fist step to finding information about the museum. Threshold to those information is placed on the first bar of the application. Once opened, it shows, graphical map on the top and location and admission on the bottom. Comparing to the website, application was more simple and clear in using color codes and hints for thresholds.

Explore Art and Specimens threshold in order

In order for application to fulfill purpose of hybrid environment in between physical and digital experience, the importance of searching particular art piece within the museum is very important. When user clicks “Explore art and specimens” on the main page of the application, the threshold takes users to four exhibition options, then by clicking one of the option users can either choose to discover the objects or explore the tour schedule.

Gems and Minerals

In my opinion this page was the most practical resource for the users because they show various images of art collection in one screen and it is easy to access each image.

Location icon directs users which is a useful function when using application as a hybrid resource while walking around the museum.

Reflection

In perspective of user experience, application was more practical and clear than the website. Especially its conciseness in information helps visitors to navigate through the physical environment and provide fulfilling experience with compact and useful functionality. However, if there is something to improve as a hybridize tool between physical and digital environment, it needs following improvement.

  • Update information with current exhibition
  • Make the application more interactive for engaging experience

STEP 5:

After researching both about the physical and digital experiences of the CMOA I came up with few problematic spots that I want to focus. During the research and visit to CMOA, I realized that use of matching font for both physical space and digital space is a seam which infers one is related to the other. In terms of scale, I found out that physical environment can play with the scale of objects and architecture and create the space itself, while scale of the environment in digital space is used to show hierarchy.

The overflowing information and unclear color coding of the website sets a very different tone compared to the physical space of the contemporary museum. As I have mentioned before, the application is designed more practical and clear than the website. Thus I think that changing some of the features on the front page of the website will be helpful for users to hybridize their experience between physical and digital environment. To apply this idea on the website, I focused on limiting information shown on the first page and adding a feature that suggests touring guide for the bird hall that can attract visitors to the exhibition.

Main goal for both physical and digital space solution:

After visiting the museum, I thought that visitors lacked curiosity and excitement when exploring through the exhibition, especially the bird hall. I wanted to focus on solutions that can encourage people’s attention on exhibitions by using bird hall as an example. In my opinion, by reconstructing some features of the website, visitors will find more interest when exploring exhibitions.

In personal experience, I tend to enjoy exhibition more when I know there is something more to expect, thus providing information about “engaging” features of the museum will be helpful for visitors to enjoy navigating through the space. In order to do this, I believe that comfortable physical space should be provided for visitors to fully enjoy exhibitions.

Solution for the physical space:
  • Mystery door slides instead of opening outwards
  • Footstep stickers on the floor gives direction to the visitors and also adds fun for them to follow along the hallway
Bird Hall Redesign A
Applying solution to bird hall
Bird Hall Redesign B
Footstep stickers
Solution for the digital space:
  • Use consistent color code to help users navigate through the website.
  • Remove some of text that are unnecessary for users to easily find information
  • Show more exhibition image on the front page
  • Add some features that talks about fun activities to look for in various exhibition
  • Move advertisements to the bottom and provide space for more exhibition images
Website Redesign
Applying solution to website

Link to the PDF of the presentation: https://design.cmu.edu/sites/default/files/e_studio_presentation_-revised.pdf

STEP 6:

Going back to the experience on the first day of environment studio, I learned that physical environment has more varied and unexpected thresholds. On the other hand, digital environment has more defined and clear thresholds that can be seen at first glance or when hovered around the space. Personally, it was interesting for me to use five senses to experience thresholds in physical environment. Moreover, liminal spaces between environments was more joyful in physical environment because they were gradual and and I could feel the transitioning moment instead of clicking action on the website.

Although I found problematic spots and possible solution both in physical and digital environments, I believe that since every individual have different perspective when experiencing environment there are a lot more features to consider when designing a space.

My solutions were inspired by me observing visitors passing through exhibition without much interest and less excitement and not being able to quickly find information online. Inconsistent tone between website and physical space enlarged gap between the physical and digital space and overflowing information on website needed to be restrained to help visitors find interest in the exhibitions.

STEP 7: Self-Reflection

After finishing this project, I could look over and say it was an excellent introduction to understanding the definitions of both physical and digital thresholds. By analyzing and observing in various spaces, I learned a way to view from the users’ perspective and realized how different elements in the environment can totally change users’ experience.

Meta-cognitive Knowledge:

Learning about the definition of thresholds, I began to recognize the transition and threshold hints that are provided within the space. It was an enjoyable experience to think about how designers made each decisions for the elements to create purposeful space. Throughout the process of this project, I realized that thresholds are essential in creating user experience and designers have to be careful when introducing them in an environment. Thus moving on, I am excited to use this knowledge to designing a fulfilling experience for targeted users.

Meta-cognitive Regulation:

For planning and monitoring performance, I think it was efficient to follow the steps provided in the syllabus because it helped me to gradually approach to the general idea of environment studies. I learned to observe and analyze the data throughout each steps and that stopped me from overwhelming myself. During the process of project, I not only learned about the environment but also saw myself improving in how to visualize my ideas and effectively present to others. I think this was a result of putting a lot of time and effort into constantly thinking about the problems and solution throughout the process. I wish I focused on either digital or physical environment when thinking about the solution, however, I could not not mention the solution I already have in mind so I had to put a lot of time to visualize both physical and digital solutions to the problems they have.

Meta-cognitive Experience
Throughout the process, I motivated myself by coming up with new ideas and imagining how those good ideas may help environment to transform and improve to provide a better user experience. Following each step, I had many ideas and discussed it in the class for the feedbacks. I think those discussions helped me to choose my direction and focus on this project. My peers and professors were very helpful in a way that they added to my thoughts and it eventually helped me make satisfying result out of this project.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.