Kelp Forest Snap!
Elements III Professor Hye-Jin Nae
GameMaker Studio
Figma
Illustrator
Procreate
important links
about the project
Kelp Forest Snap! is an educational photography game where players can explore a simulated Pacific Kelp Forest ecosystem and take photos with the built-in zoom and focus, edit their photo with a variety of filters, and learn more about the stars of their work before downloading it to share. You can play the game now in your browser on any device with WebGL capabilities (although it works best on desktop)!
my role
- Conducting competitive analysis and product research
- Wireframing and producing visual comps
- Producing visual assets and illustrations
- Creating delightful UI microanimations
- Developing the prototype into a full game in GameMaker
goals
Create a fun and beautiful experience for the audience
Present ecological information in an appealing way
Allow players to create cool photographs and share them
research
I started off this project by researching existing products that have similar goals, interactions, and visual designs. I ended up looking at a ton of games; photography games like Pokemon Snap!, Umurangi Generation, and Penko Park and games about exploring ecosystems like Abzu, Who Cares, and Alba. I found that there are not a lot of games with a focus on ecology, education, and photography at the same time. It was an open market! But I did gain a lot from looking at the design language and metaphors used to convey virtual cameras and how to make education and creation fun in games.
process
visual direction
My goal for this project was to create a visual design that was joyful and fun to interact with. To accomplish this, I used looked for bold, knobby, and toylike UI elements to give the UI a sense of physicallity and fun without relying on skeuomorphism.
from prototypes to programming
While the I was only required to make a Figma or After Effects prototype for this project, I wanted to test my development chops and build the full game in GameMaker. Accomplishing this before the project’s deadline was a pretty intense task, but I knew I was able to accomplish it and that the finished result would be something I was much more proud of.
This required me to learn multiple new techniques, including flocking algorithms, more advanced usage of shaders, GLSL, and other tech art skills, and integrating GameMaker and JavaScript functions. I had a ton of fun working as both a designer and a developer and learning to understand how the prototyping process feeds into development from both sides.
conclusion
Working as both a designer and developer on this project changed the way I approached design and interaction (but not as much as I expected). I found that Hi-Fi wireframes were less helpful to me than knowing the basic coordinates of elements, so things like logos and icons were often abstracted to their bounding boxes.
The other major takeaway was regarding scope. I think I was largely successful in scoping myself for this project, but there were cut features that I was unable to design and implement. I initially planned to include an album of previously taken photos and a way to track how many species the player has taken photos of. Both of these features have some of their functionality already programmed, but UI and implementation were out of scope for the project. In the future, I would like to add them in, along with more creatures (such as wolf eels, grey whales, and sea otters), and more information about the creatures.
