UI/UX Design Graphic Design Frontend Development User Testing

Full UI/UX Overhaul for an Ocean Sciences Org

A well respected oceanographic data management office was in serious need of a new website that not only reflected their organization's prestige, but was also more intuitive for their wide range of user types. It was up to me to work with the organization's leaders to create a modern, relevant design system, as well as a flexible component library that could be used to build out the website. To help validate the designs we did some user testing with a prototype of the website, and I even designed a new, fresh logo as a fun, bonus deliverable!

First thing's first...IA!

Before jumping into screens and component libraries we needed to figure out exactly what the client wanted to build, and how they wanted to organize it.

We held many sessions with the client to flesh out these details, including a card sort exercise that ultimately helped us produce an Information Architecture (IA) that we could all agree on.

Creating a Style Guide

One of the main tasks for this project was to modernize the look and feel of the website in a way that better conveyed the organization's well respected reputation.

After much back and forth with stakeholders, presenting and illiciting feedback from Style Tiles, and research of other similar organizations, we arrived at a modern, yet recognizable look and feel.

Bring the IA to life!

As we simultaneously worked to flesh out a new style for the site, we also started wireframing some ideas based on the new and improved IA.

This helped us to quickly ideate and illicit feedback from the stakeholders on not only features and components of the site, but also the IA.

Component Library, in code!

After iterating on and arriving at a solid style guide, IA, and wireframes we were ready to start building out the component library that would ultimately be used almost as a toolkit to build individual screens.

To help make the handoff even more seamless I decided to build the component library with code, including snippets for individual components and elements along with other assets and design specs. You can scroll around below, or check out the real thing here!

Bonus: Logo Design!

I also provided one bonus deliverable to really help tie together the updated design of the site with the client's brand...a fresh logo! I wanted to make sure the new logo paid homage to the existing one, so I created a fresh, minimal version of the globe-based logo that would be much more flexible, from mobile to desktop to print.

All together now...

Using components from the component library, with styling from the style guide, and structured based on the IA I built out a few key pages for the client to reference. You can scroll around below, or check out the real thing here!

Portfolio Home

Have some more questions?

Shoot me an email My Resume