The short story.
NOAA’s Office of National Marine Sanctuaries needed to update its “Ocean Etiquette” webpage to help tourists become better stewards of the wildlife they encounter.
How might we empower responsible recreation?
Role
UX/UI Designer
Timeline
11-12/2020
Organization
NOAA’s Office of National Marine Sanctuaries
The problem.
The old site was too copy-heavy and in desperate need of white space. The layout doesn’t allow for users to glean critical information in one glance. Thus, many users dropped off the page and never scrolled to the CTA (download the guidelines).
Making it bite-sized.
My team and I started by parsing down the guidelines into concise messages. After establishing the copy, I created custom-made icons along with infographics to help communicate each guideline in a glance.
The “read more” button.
Instead of overwhelming the audience with copy, we added interactive elements (i.e. flip and pop-up window) to the design so that users can choose to engage with content they’re interested in.
A bird’s-eye view.
Here’s how the webpage progressed…
My reflections.
I love Figma
I didn’t know about Figma back then, so I used what I knew and was most accessible to my team: Google Slides…smh.
Put some numbers to it
I would love to be able to compare the performances of the old vs. new site through quantitative measures (ex. impressions, clicks, and downloads).
My vision
Let’s talk to people
I wish I had an opportunity to research and test the page with real users.
Lost in translation
I lacked direct access to the developers, which made it difficult to understand their constraints and communicate my vision. (I did my best with the Google Slides comment feature.) Thus, I was disappointed when I saw how my final designs turned out on the live site (see figures below).
