Interactive Visual Novel
Gunnar's Story

Screen Shot 2022-01-23 at 10.09.48 PM.png
Screen Shot 2022-01-23 at 10.09.28 PM.png
Screen Shot 2022-01-23 at 10.10.41 PM.png

Project Duration:

September - December 2021

3 months

Course:

BIMD 491

INT Studio Practice I

Deliverables:
Research
Prototype

Stakeholder:

The Woodland Park Zoo

Empathy Project

We Were Asked to:

Propose a design to the Woodland Park Zoo Empathy Program to share empathy for wildlife.

 

Our Solution:

We decided to create a narrative to allow users to develop empathy for wildlife in a way that is meaningful to them. We created an interactive visual narrative experience for one animal at the zoo as a proposal to begin a bigger project. We based our design on various research methods.

Impact:

The community becomes more aware and builds empathy for wildlife through The Woodland Park Zoo Empathy Program's App.

 
The Team
Screen Shot 2021-11-24 at 8.05.01 AM.png
My Contribution
I wore many different hats in this project.
Project Management
As the Project Manager, it was important to stay realistic and keep on track with the project goals and execution. So, I created a Gantt chart in order to communicate to my teammates what the plan was and how important it was to get things done on time. I also found that the closest design method to our approach was one of Dan Nessler’s diagrams for design thinking. I decided that these two tools would be the best ones for our group to follow in this project and I used these to make sure our project was successful.
Illustration and Animation
With our visual novel, there were a lot of illustrations and animations to cover. Sometimes some of the illustrators were focused on other pieces of the design, so I stepped in when needed. I ended up sketching the majority of the line art for the birds and produced a low fidelity of the flying animation.
UX/UI Design
This project prompt was pretty open ended, so I made sure we stayed on track with the design process. I discussed with my group for what type of research we should look into to create an impactful design. Then, when we had a more solid foundation, I helped create the prototype.
Design Process Overview
Discover
Research Phase
Define
Synthesis Phase
Develop
Ideation Phase
Deliver
Implementation Phase
My Plan as Project Manager
Screen_Shot_2021-10-20_at_3.58.16_PM.png
 
Value Proposition
This design targets the Woodland Park Zoo's website and social media audience.
The goal is to share a story that allows the audience to gain empathy for animals.
 
Discover
Idea Gathering
Mural
We collaborated on Mural to share our ideas and gather information. We all gathered information on our own specialties and met together to share them. Then, we decided which direction to go and made sure we continued our research and tried multiple options to get to the best possible design.
88-886407_drawn-number-circle-png-red-marker-circle-png.png
On Zoo
Social Media
88-886407_drawn-number-circle-png-red-marker-circle-png.png
Strong Narrative
88-886407_drawn-number-circle-png-red-marker-circle-png.png
Technology
Humanize Animals
Physical Design
Comic
88-886407_drawn-number-circle-png-red-marker-circle-png.png
App
Sad Tone
Selfie video game
AR that people can walk through
In Zoo
Help People Navigate in Zoo
Hopeful Tone
88-886407_drawn-number-circle-png-red-marker-circle-png.png
We chose from our ideas based on our research in the next step: Define
Define
Narrowing our Approach
Competitive Analysis
The three big take aways from this research:
  • What was successful and not successful in similar designs
  • Difference between empathy and sympathy
  • Avoid animals that evolve for human empathy
Woodland Park Zoo Interview
The three big take aways from this research:
  • Big focus on website and social media growth
  • A lot of people want to unplug at the Zoo
  • Learning about one animal is easier to relate to than many
User Research
We sent out a survey to our target age group (teenagers and young adults) who we assumed would be using the Zoo's online presence most.
The three big take aways from this research:
  • 66% of our responses were teenagers
  • 60% likes reading web comics and the most popular is Homestruck, an interactive web comic book.
  • The top 4 social media used was Instagram, Tiktok, Snapchat, and Youtube.
Color Narrative Research
The three big take aways from this research:
  • Certain colors have different meaning in psychology (for example: green represents harmony, balance, nature, growth and health).
  • Orange and Green are typically associated with Zoos and wildlife
  • Different Zoos have different but similar color schemes.
Equity Focused Design
The three big take aways from this research:
  • We want this experience to be accessible to everyone
  • Our interactive visual narrative should be able to be used on both mobile and computer devices.
  • Have options for visual and hearing impairment through closed captions and live transcription.
Usability Testing
The three big take aways from this research:
  • We changed the flow and pacing of the narrative from this research
  • We added visual cues and more instructions so the user can use the comic with less difficulty. This includes a brief instruction at the beginning and icons such as arrows.
  • How users interact with our visual narrative will differ from platform to platform.
Check out more specifics in our process!
 
User Personas and Scenario
We based this on our user research.
Personas.png
Develop
Searching Ideas
Wireframing and Questions
Group Collaboration and Communication
My group got together and we discussed different options and flow for the narrative. As project manager, I wanted to make sure our ideas were used in a productive way. I attempted to make a scene by scene page on Mural but my group wasn't participating in it. I reflected and decided that I was unsuccessful in getting my group to engage, so I pivoted and changed it into a slide show presentation where the slides can be easily organized and the information on them are easier to read and edit. This also was more successful because it displayed the scene by scene narrative in a way that would be similar to the final product, as well as give information to the illustrators to collaborate. As a UX/UI Designer and the Project Manager, it is important to me that the group has a good experience communicating in order to create a successful design.
 
Gunnar's Story Prototype
Please play the audio while going through the prototype. The hover abilities are to represent tilting the phone from side to side.
Reflection
This project was so great to work on. It was great to do so much research and really feel like we make the best possible design based on the scenario. I also was very excited to be working with such a talented and motivated group. This is just a design proposal for something bigger, so I can already see things I would like to change in the final design(s), but I believe it gets the idea across for the proposal of this general design concept. 

Somethings I believe could be solved with custom coding and overall just more refined with the details. I also believe the pacing could be in a way that was a bit longer, maybe more scenes or a different type of navigation. A map navigation idea was proposed in the wire framing of the design but we simply didn't have the time to execute more creative ideas like this. I also would have liked to see more audio production, animation, interactions, etc. Basically, we spent the majority of our time understanding the problem and pain points, and research. I wish we could have more time to push this to make a final product that is more polished than what we have.