Interaction Design Studio I
Pittsburgh Zoo
Data Driven Display
Pittsburgh Zoo
Data Driven Display
Pittsburgh Zoo
Data Driven Display
As an assignment for Interaction Design Studio I, we created a data-driven display for the Pittsburgh Zoo and Aquarium. Through this data-driven display, we aimed to increase the number of visitors and increase engagement. As one of the designers on the team, I integrated our given initial findings to inform the design of the data-driven display to create a more enhanced user experience of the dashboard.
As an assignment for Interaction Design Studio I, we created a data-driven display for the Pittsburgh Zoo and Aquarium. Through this data-driven display, we aimed to increase the number of visitors and increase engagement. As one of the designers on the team, I integrated our given initial findings to inform the design of the data-driven display to create a more enhanced user experience of the dashboard.
As an assignment for Interaction Design Studio I, we created a data-driven display for the Pittsburgh Zoo and Aquarium. Through this data-driven display, we aimed to increase the number of visitors and increase engagement. As one of the designers on the team, I integrated our given initial findings to inform the design of the data-driven display to create a more enhanced user experience of the dashboard.
Timeline
2 weeks
Timeline
2 weeks
Timeline
2 weeks
Role(s)
UX Designer
UX Researcher
Role(s)
UX Designer
UX Researcher
Role(s)
UX Designer
UX Researcher
For
The Pittsburgh Zoo & Aquarium
For
The Pittsburgh Zoo & Aquarium
For
The Pittsburgh Zoo & Aquarium
With
Alicia Ng
Anna John
Kimberly Gao
With
Alicia Ng
Anna John
Kimberly Gao
With
Alicia Ng
Anna John
Kimberly Gao
Context
Context
Context
Why are we designing a data-driven display for The Pittsburgh Zoo & Aquarium? In response to the 2+ years of the COVID-19 pandemic, the zoo has received a grant from an anonymous donor, along with 24 LED screens to help increase visitors and their engagement.
Why are we designing a data-driven display for The Pittsburgh Zoo & Aquarium? In response to the 2+ years of the COVID-19 pandemic, the zoo has received a grant from an anonymous donor, along with 24 LED screens to help increase visitors and their engagement.
Why are we designing a data-driven display for The Pittsburgh Zoo & Aquarium? In response to the 2+ years of the COVID-19 pandemic, the zoo has received a grant from an anonymous donor, along with 24 LED screens to help increase visitors and their engagement.
Problem Framing
Problem Framing
Problem Framing
The data-driven display that realizes the donors goals of increasing visitors and engagement. The goal is to minimize wait times and increase engagement with events. There will be no controls that enable visitors to interact with the display.
The data-driven display that realizes the donors goals of increasing visitors and engagement. The goal is to minimize wait times and increase engagement with events. There will be no controls that enable visitors to interact with the display.
The data-driven display that realizes the donors goals of increasing visitors and engagement. The goal is to minimize wait times and increase engagement with events. There will be no controls that enable visitors to interact with the display.
Our Goals
Our Goals
Our Goals
With the the data-driven display, we wanted to achieve these key goals:
With the the data-driven display, we wanted to achieve these key goals:
With the the data-driven display, we wanted to achieve these key goals:
Increase visitors and engagement
Increase visitors and engagement
Increase visitors and engagement
Minimize wait times and increase engagement with events
Minimize wait times and increase engagement with events
Minimize wait times and increase engagement with events
Provide information to visitors without any controls
Provide information to visitors without any controls
Provide information to visitors without any controls
The Designed Solution
The Designed Solution
The Designed Solution
Event Highlights
Event Highlights
Event Highlights
Here we showcase the Sponsor, the Event, Upcoming show timings and Seats available.
Here we showcase the Sponsor, the Event, Upcoming show timings and Seats available.
Here we showcase the Sponsor, the Event, Upcoming show timings and Seats available.
Train Bar
Train Bar
Train Bar
Located at the top of our display as one the more important information visitors need to see, to coordinate their navigation through the zoo.
Located at the top of our display as one the more important information visitors need to see, to coordinate their navigation through the zoo.
Located at the top of our display as one the more important information visitors need to see, to coordinate their navigation through the zoo.
Zoo Hours
Zoo Hours
Zoo Hours
The current day Zoo hours are showcased.
The current day Zoo hours are showcased.
The current day Zoo hours are showcased.
Food Court Hours
Food Court Hours
Food Court Hours
Section of the display to show visitors the current hours of the food court.
Section of the display to show visitors the current hours of the food court.
Section of the display to show visitors the current hours of the food court.
Rental Details
Rental Details
Rental Details
As the rentals are available in the first station, we showcase the availability and the price of each.
As the rentals are available in the first station, we showcase the availability and the price of each.
As the rentals are available in the first station, we showcase the availability and the price of each.
Uncovering User Needs
Uncovering User Needs
Uncovering User Needs
We examined 5 different visitor personas of the Pittsburgh Zoo & Aquarium to uncover their needs. By modeling their goals, priorities, and constraints, we hoped to find a way to satisfy these needs with the recently donated LED displays. We are hoping that these initial findings will help inform our designs as the Data-Driven Display project team.
We examined 5 different visitor personas of the Pittsburgh Zoo & Aquarium to uncover their needs. By modeling their goals, priorities, and constraints, we hoped to find a way to satisfy these needs with the recently donated LED displays. We are hoping that these initial findings will help inform our designs as the Data-Driven Display project team.
We examined 5 different visitor personas of the Pittsburgh Zoo & Aquarium to uncover their needs. By modeling their goals, priorities, and constraints, we hoped to find a way to satisfy these needs with the recently donated LED displays. We are hoping that these initial findings will help inform our designs as the Data-Driven Display project team.
We ultimately wanted to answer this essential question: Why do you visit the zoo?
This was an important question we wanted to ask, as it was essential in narrowing down on what information was relevant for visitors and determining what was the most effective mode of delivery.
We ultimately wanted to answer this essential question: Why do you visit the zoo?
This was an important question we wanted to ask, as it was essential in narrowing down on what information was relevant for visitors and determining what was the most effective mode of delivery.
We ultimately wanted to answer this essential question: Why do you visit the zoo?
This was an important question we wanted to ask, as it was essential in narrowing down on what information was relevant for visitors and determining what was the most effective mode of delivery.
Looking at the models for the 5 personas, we decided to focus on the elderly man persona and his interest in transportation as well as
engagement with the shows and community.
Looking at the models for the 5 personas, we decided to focus on the elderly man persona and his interest in transportation as well as
engagement with the shows and community.
Looking at the models for the 5 personas, we decided to focus on the elderly man persona and his interest in transportation as well as
engagement with the shows and community.
For the elderly man persona, we realized that there was a need to develop a deeper appreciation of animals and nature; be able to connect with the community of Pittsburgh that visits the zoo; reminisce or rekindle memories of visiting during childhood; and be able to easily explore the zoo.
For the elderly man persona, we realized that there was a need to develop a deeper appreciation of animals and nature; be able to connect with the community of Pittsburgh that visits the zoo; reminisce or rekindle memories of visiting during childhood; and be able to easily explore the zoo.
For the elderly man persona, we realized that there was a need to develop a deeper appreciation of animals and nature; be able to connect with the community of Pittsburgh that visits the zoo; reminisce or rekindle memories of visiting during childhood; and be able to easily explore the zoo.
Low-Fidelity Sketches
Low-Fidelity Sketches
Low-Fidelity Sketches
Each of our team members sketched 2 - 4 wireframes of the dashboard, to quickly explore a wide range of ideas. With the focus of catering needs of the elderly man, we began by sketching out as many options for the screen design.
Each of our team members sketched 2 - 4 wireframes of the dashboard, to quickly explore a wide range of ideas. With the focus of catering needs of the elderly man, we began by sketching out as many options for the screen design.
Each of our team members sketched 2 - 4 wireframes of the dashboard, to quickly explore a wide range of ideas. With the focus of catering needs of the elderly man, we began by sketching out as many options for the screen design.
Afterwards, we held a critique session and created a composite sketch composed of the successful elements of each person's wireframe. Some points we kept in mind while creating screen designs were:
» Hierarchy
» Information Flow
» User eye pattern
» Balance
Afterwards, we held a critique session and created a composite sketch composed of the successful elements of each person's wireframe. Some points we kept in mind while creating screen designs were:
» Hierarchy
» Information Flow
» User eye pattern
» Balance
Afterwards, we held a critique session and created a composite sketch composed of the successful elements of each person's wireframe. Some points we kept in mind while creating screen designs were:
» Hierarchy
» Information Flow
» User eye pattern
» Balance
Even though we were sketching, we also thought about Typography, some color scheme ideas, how potential interactions could play out.
Even though we were sketching, we also thought about Typography, some color scheme ideas, how potential interactions could play out.
Even though we were sketching, we also thought about Typography, some color scheme ideas, how potential interactions could play out.
Discussing with teammates, we identified the pros and cons of each option. We all agreed that we would focus on the information regarding the train to reduce wait time and event information to increase engagement.
Discussing with teammates, we identified the pros and cons of each option. We all agreed that we would focus on the information regarding the train to reduce wait time and event information to increase engagement.
Discussing with teammates, we identified the pros and cons of each option. We all agreed that we would focus on the information regarding the train to reduce wait time and event information to increase engagement.
Mid-Fidelity Iterations
Mid-Fidelity Iterations
Mid-Fidelity Iterations
With the foundational components of our dashboard decided, we moved into Figma to raise our design into mid-fi. Within the dashboard, there were 7 features in our designs.
With the foundational components of our dashboard decided, we moved into Figma to raise our design into mid-fi. Within the dashboard, there were 7 features in our designs.
With the foundational components of our dashboard decided, we moved into Figma to raise our design into mid-fi. Within the dashboard, there were 7 features in our designs.
In this iteration, we turn our sketches into a mid fidelity prototype. We chose to design in black and white first so that we could have a clear sense of visual hierarchy. One of the novel approaches we took compared to other teams is to make our map linear and simple. We believe that a linear map will provide more space for more important information such as shows.
In this iteration, we turn our sketches into a mid fidelity prototype. We chose to design in black and white first so that we could have a clear sense of visual hierarchy. One of the novel approaches we took compared to other teams is to make our map linear and simple. We believe that a linear map will provide more space for more important information such as shows.
In this iteration, we turn our sketches into a mid fidelity prototype. We chose to design in black and white first so that we could have a clear sense of visual hierarchy. One of the novel approaches we took compared to other teams is to make our map linear and simple. We believe that a linear map will provide more space for more important information such as shows.
In this iteration, we turn our sketches into a mid fidelity prototype. We chose to design in black and white first so that we could have a clear sense of visual hierarchy. One of the novel approaches we took compared to other teams is to make our map linear and simple. We believe that a linear map will provide more space for more important information such as shows.
In this iteration, we turn our sketches into a mid fidelity prototype. We chose to design in black and white first so that we could have a clear sense of visual hierarchy. One of the novel approaches we took compared to other teams is to make our map linear and simple. We believe that a linear map will provide more space for more important information such as shows.
In this iteration, we turn our sketches into a mid fidelity prototype. We chose to design in black and white first so that we could have a clear sense of visual hierarchy. One of the novel approaches we took compared to other teams is to make our map linear and simple. We believe that a linear map will provide more space for more important information such as shows.
Furthermore, we wanted to explore different ways to visualize data. We tried rolling carousels for the shows as well as bar graphs for scooter rentals. We were eager to test our ideas and their feasibility in these prototypes.
Furthermore, we wanted to explore different ways to visualize data. We tried rolling carousels for the shows as well as bar graphs for scooter rentals. We were eager to test our ideas and their feasibility in these prototypes.
Furthermore, we wanted to explore different ways to visualize data. We tried rolling carousels for the shows as well as bar graphs for scooter rentals. We were eager to test our ideas and their feasibility in these prototypes.
Train Bar
Train Bar
Train Bar
Located at the top of our display as one the more important information visitors need to see, to coordinate their navigation through the zoo.
Located at the top of our display as one the more important information visitors need to see, to coordinate their navigation through the zoo.
Located at the top of our display as one the more important information visitors need to see, to coordinate their navigation through the zoo.
Events Highlight
Events Highlight
Events Highlight
Here we showcase the Sponsor, the Event, Upcoming show timings and Seats available.
Here we showcase the Sponsor, the Event, Upcoming show timings and Seats available.
Here we showcase the Sponsor, the Event, Upcoming show timings and Seats available.
Zoo Hours
Zoo Hours
Zoo Hours
The current day Zoo hours are showcased.
The current day Zoo hours are showcased.
The current day Zoo hours are showcased.
Membership Details
Membership Details
Membership Details
How much does it cost to purchase a membership.
How much does it cost to purchase a membership.
How much does it cost to purchase a membership.
Rental Details
Rental Details
Rental Details
As the rentals are available in the first station, we showcase the availability and the price of each.
As the rentals are available in the first station, we showcase the availability and the price of each.
As the rentals are available in the first station, we showcase the availability and the price of each.
Show Details
Show Details
Show Details
Other show times are displayed.
Other show times are displayed.
Other show times are displayed.
Featured Wildlife
Featured Wildlife
Featured Wildlife
Lists wildlife that are being featured at the zoo that day.
Lists wildlife that are being featured at the zoo that day.
Lists wildlife that are being featured at the zoo that day.
Finally, we added some color after we have confirmed the placement and hierarchy of information. We were not set on this color palette but we wanted to test if our design would work well when we introduced more than one color. After presenting to the class, we gained valuable feedback of our design.
Finally, we added some color after we have confirmed the placement and hierarchy of information. We were not set on this color palette but we wanted to test if our design would work well when we introduced more than one color. After presenting to the class, we gained valuable feedback of our design.
Finally, we added some color after we have confirmed the placement and hierarchy of information. We were not set on this color palette but we wanted to test if our design would work well when we introduced more than one color. After presenting to the class, we gained valuable feedback of our design.
We were given the following feedback:
» Overall design looks too interactive
» Unnecessary space for featured wildlife
» Displaying the shows in a vertical
carousel might not be the most effective
» Too corporate looking
» Good visual hierarchy overall
We were given the following feedback:
» Overall design looks too interactive
» Unnecessary space for featured wildlife
» Displaying the shows in a vertical
carousel might not be the most effective
» Too corporate looking
» Good visual hierarchy overall
We were given the following feedback:
» Overall design looks too interactive
» Unnecessary space for featured wildlife
» Displaying the shows in a vertical
carousel might not be the most effective
» Too corporate looking
» Good visual hierarchy overall
Integrating Motion
Integrating Motion
Integrating Motion
Taking feedback in to consideration, we reconfigured the amount of space we gave to each section. Some of the changes we made were:
Increasing the size of the train map and making it horizontal.
Clustering information about transportation within the zoo.
Placing more emphasis on shows happening at each station.
Removing the segment of featured wildlife.
Experimenting with a new color scheme.
Taking feedback in to consideration, we reconfigured the amount of space we gave to each section. Some of the changes we made were:
Increasing the size of the train map and making it horizontal.
Clustering information about transportation within the zoo.
Placing more emphasis on shows happening at each station.
Removing the segment of featured wildlife.
Experimenting with a new color scheme.
Taking feedback in to consideration, we reconfigured the amount of space we gave to each section. Some of the changes we made were:
Increasing the size of the train map and making it horizontal.
Clustering information about transportation within the zoo.
Placing more emphasis on shows happening at each station.
Removing the segment of featured wildlife.
Experimenting with a new color scheme.
We developed our prototype further and introduced colors to our design to create emphasis. One of the main comments we received about our design was it being too corporate. We introduced images to our design to give better context and make it more visually appealing to the masses. We then presented this iteration in class. We were given the following feedback:
The notification bar at the bottom could be improve.
Show time animations look like progress bars
Capacity of seats needed strong colors; blending in with each other
Show timings look like buttons
Walking man symbol not as stark as the train
Events can be made big
We developed our prototype further and introduced colors to our design to create emphasis. One of the main comments we received about our design was it being too corporate. We introduced images to our design to give better context and make it more visually appealing to the masses. We then presented this iteration in class. We were given the following feedback:
The notification bar at the bottom could be improve.
Show time animations look like progress bars
Capacity of seats needed strong colors; blending in with each other
Show timings look like buttons
Walking man symbol not as stark as the train
Events can be made big
We developed our prototype further and introduced colors to our design to create emphasis. One of the main comments we received about our design was it being too corporate. We introduced images to our design to give better context and make it more visually appealing to the masses. We then presented this iteration in class. We were given the following feedback:
The notification bar at the bottom could be improve.
Show time animations look like progress bars
Capacity of seats needed strong colors; blending in with each other
Show timings look like buttons
Walking man symbol not as stark as the train
Events can be made big
Moving into Final Design
Moving into Final Design
Moving into Final Design
Based on the feedback and our feelings towards our Iteration 4 Design, we decided to take a step back and go back to the drawing board to see how we could drastically improve our design without constraints. Still based on our initial sketches, we decided to change the overall style of the design to be less business oriented and more simplified while reevaluating our information hierarchy. This led to larger containers to follow grouping principles with a goal to more easily identify information.
Based on the feedback and our feelings towards our Iteration 4 Design, we decided to take a step back and go back to the drawing board to see how we could drastically improve our design without constraints. Still based on our initial sketches, we decided to change the overall style of the design to be less business oriented and more simplified while reevaluating our information hierarchy. This led to larger containers to follow grouping principles with a goal to more easily identify information.
Based on the feedback and our feelings towards our Iteration 4 Design, we decided to take a step back and go back to the drawing board to see how we could drastically improve our design without constraints. Still based on our initial sketches, we decided to change the overall style of the design to be less business oriented and more simplified while reevaluating our information hierarchy. This led to larger containers to follow grouping principles with a goal to more easily identify information.
Starting from the top, with transportation, we emulated a traditional subway line with different buses to indicate where they were. Our show information was then placed on the bottom left. One main feature of this new design was a slideshow style display for the shows to dynamically showcase them. This allowed us to use more real estate for the show and incorporate motion to draw the attention of the viewer. Lastly, more logistical information with times and rental facilities was moved to the right hand side as they would only need to be viewed as needed and is therefore less important.
Starting from the top, with transportation, we emulated a traditional subway line with different buses to indicate where they were. Our show information was then placed on the bottom left. One main feature of this new design was a slideshow style display for the shows to dynamically showcase them. This allowed us to use more real estate for the show and incorporate motion to draw the attention of the viewer. Lastly, more logistical information with times and rental facilities was moved to the right hand side as they would only need to be viewed as needed and is therefore less important.
Starting from the top, with transportation, we emulated a traditional subway line with different buses to indicate where they were. Our show information was then placed on the bottom left. One main feature of this new design was a slideshow style display for the shows to dynamically showcase them. This allowed us to use more real estate for the show and incorporate motion to draw the attention of the viewer. Lastly, more logistical information with times and rental facilities was moved to the right hand side as they would only need to be viewed as needed and is therefore less important.
At this point, we felt as though our design had truly come together. From a lot of good feedback through crits as well as bouncing ideas off of each other, we finalized our design with a focus on fun illustrations, bright colors, and simplified metrics to decrease cognitive load and draw attention where needed. Because we did not include a map, we were able to save space and use it on attractive animations and target the engagement goal of both our chosen elderly man persona and that of the Pittsburgh Zoo Executives.
At this point, we felt as though our design had truly come together. From a lot of good feedback through crits as well as bouncing ideas off of each other, we finalized our design with a focus on fun illustrations, bright colors, and simplified metrics to decrease cognitive load and draw attention where needed. Because we did not include a map, we were able to save space and use it on attractive animations and target the engagement goal of both our chosen elderly man persona and that of the Pittsburgh Zoo Executives.
At this point, we felt as though our design had truly come together. From a lot of good feedback through crits as well as bouncing ideas off of each other, we finalized our design with a focus on fun illustrations, bright colors, and simplified metrics to decrease cognitive load and draw attention where needed. Because we did not include a map, we were able to save space and use it on attractive animations and target the engagement goal of both our chosen elderly man persona and that of the Pittsburgh Zoo Executives.
Thoughts + Reflection
Thoughts + Reflection
Thoughts + Reflection
Unique Experience
Unique Experience
Unique Experience
The work I did with my team for this project was definitely a unique experience. In my previous years I have taken studio style courses that were more architecture focused, so I spent the majority of my time working closely with other architecture students. But in Interaction Design Studio 1, I was given the opportunity to work with students from diverse backgrounds which lead to innovative ideas and unique perspectives.
The work I did with my team for this project was definitely a unique experience. In my previous years I have taken studio style courses that were more architecture focused, so I spent the majority of my time working closely with other architecture students. But in Interaction Design Studio 1, I was given the opportunity to work with students from diverse backgrounds which lead to innovative ideas and unique perspectives.
The work I did with my team for this project was definitely a unique experience. In my previous years I have taken studio style courses that were more architecture focused, so I spent the majority of my time working closely with other architecture students. But in Interaction Design Studio 1, I was given the opportunity to work with students from diverse backgrounds which lead to innovative ideas and unique perspectives.
Critique
Critique
Critique
And as discussed with my team, we found the critiques to be very helpful and informative. Critique is a form of discussion I am intimately familiar with as it is a large part of studio culture in architecture. There are perspectives that you, the designer, cannot realize until other designers or users tell you.
And as discussed with my team, we found the critiques to be very helpful and informative. Critique is a form of discussion I am intimately familiar with as it is a large part of studio culture in architecture. There are perspectives that you, the designer, cannot realize until other designers or users tell you.
And as discussed with my team, we found the critiques to be very helpful and informative. Critique is a form of discussion I am intimately familiar with as it is a large part of studio culture in architecture. There are perspectives that you, the designer, cannot realize until other designers or users tell you.
Collaboration is Critical
Collaboration is Critical
Collaboration is Critical
Working through the project, I really enjoyed our parallel prototyping sessions. Part of what made architecture or rather design in general a passion of mine is the chance to collaborate with like minded people to create something amazing. I did notice in the beginning we encountered many obstacles, but through proper coordination we were able to overcome these obstacles and realize our goals.
Working through the project, I really enjoyed our parallel prototyping sessions. Part of what made architecture or rather design in general a passion of mine is the chance to collaborate with like minded people to create something amazing. I did notice in the beginning we encountered many obstacles, but through proper coordination we were able to overcome these obstacles and realize our goals.
Working through the project, I really enjoyed our parallel prototyping sessions. Part of what made architecture or rather design in general a passion of mine is the chance to collaborate with like minded people to create something amazing. I did notice in the beginning we encountered many obstacles, but through proper coordination we were able to overcome these obstacles and realize our goals.