top of page
SMART CATCH

SUSTAINABLE SEAFOOD CAMPAIGN

CIRCA: 2016

ROLE

Senior Manager, User Experience

Lead UI Designer

DESIGN STATEMENT

A responsive-web project dedicated to enticing restauranteurs, professional chefs, and diners to embrace sustainable seafood alternatives.

I worked 1-on-1 with a talented front-end developer to realize a flexible, singular design that animates at all browser resolutions.

PLATFORM

responsive.png

LEADERSHIP

PROJECT
STRATEGY

As the Senior Manager of User Experience, I organized all aspects of the front-end of this web site, including managing the front-end developer responsible for implementing my designs.

My responsibilities including coordinating discovery meetings to gather requirements, leading feature definition sessions, and overseeing scope, schedule, and budget.

PROJECT STRATEGY

INFORMATION ARCHITECTURE

SITE MAP

Early in the project, I facilitated card-sorting exercises to organize and prioritize the site. Following these meetings, I put together this site map using mind-mapping software.

It was delivered to the executives and primary stakeholders. Throughout the initiative, this site map was frequently referred to as a production checklist.

SITE MAP

INFORMATION ARCHITECTURE

WIREFRAMES

The creation of rough, simple wireframes, such as this, assisted in conveying content hierarchy and text weighting.

WIRFRAMES

USER EXPERIENCE

RESPONSIVE DESIGN

Using a mobile-first approach, I designed each resolution simultaneously. As each element was added, I ensured it scaled well regardless of the size of the screen.

RESPONSIVE

INTERACTION DESIGN

ANIMATION REFERENCE

This entry gate was designed to offer separate experiences to chefs and the dining public. 

I hand-keyed each frame of this animation and then worked closely with the Front-End Engineer to implement it using CSS animation

Ani 1

INTERACTION DESIGN

ANIMATION REFERENCE

I designed this frame-by-frame animation segment to convey two separate concepts.

 

First, I was tasked to keep the brand on-screen without taking up so much real estate. This was handled with the clever elimination of the illustration upon scroll. 

Secondly, I devised a header push system that maintained a sense of place between each section. 

Ani 2
bottom of page