Design Prompt:

This project was coded as part of my “interactive media” final project, a capstone Design course at University of California, Davis. As part of the prompt, we had to design an interface and code it using HTML5,CSS, and Javascript.

Guiding Question

Project Briefing Document

In the first step of this project, we created a project brief. This included:

• Project Goals
  
• Comparisons/ Inspirations
  
• Audience
  
• Design Strategies
  
• Interaction Strategies
  
• Experience Goals
  

You can check it out here, but I've summarized some of the key points down below.

Design Strategies

I used a simple, flat illustration style for this project. I wanted to use negative space and proximity to really capture the depth of the ocean. Additionally, I kept the design minimalistic: have simple-yet-effective hand drawn elements.

As you go deeper into the ocean, the absence of light disappears, so I also incorporated a changing visual component: as you go deeper, the color palette becomes more contrasted and less saturated.

Coded Prototype + User Testing

This was the prototype of the design. For this phase, I created a product that was suitable for the user testing session. In this prototype, I coded out most of the elements, and made finished most of the graphics.

User Testing Takeaways

Overall, I created a document based on the key takeaways:

Final Design & Reflections

Takeaways:

This was a page that  I created completely on my own, including creating the graphic elements, designing the interface, writing an engaging story, and coding it all out. Through this intensive process, I definitely learned a couple of things.

• Sometimes, it’s impossible to code out all the features that you had originally designed. Translation from design to code can sometimes be difficult.
  
• People will not always use your product the way you intended them to. Overall, while I tried designing my interface clearly, it wasn’t as understandable as I thought. Only after user testing was I able to refine my design to account for the discrepancy between me and the user.
  
• People skim text. It’s important to put the most important information in the first few words of your writing, or else they might be ignored..
  

If I had more time and resources:

• I’d add more sea creatures. Due to the time constraints of being a class project, I was unable to have more sections
  
• I’d add pictures borrowed & sourced from credible locations.. The project parameters stated that all visual content must be created by me, so I wasn’t able to add pictures
  
• I’d improve the animations. Right now, there is only keyframe-based simple animations, but I’d like to eventually add some complexity to the animations to make it a more immersive experience.