Field guide

Redesign the Discover the Chesapeake portion of the Chesapeake Bay Program’s site, restructuring this section of the site into a self-contained microsite. This project asks you to explore how structure—the relationships between discrete pieces of content—is itself a significant decision, contributing to user experience and creating meaning.

Design objectives

• Redesign the Discover the Chesapeake section of this site into a microsite that has a semi-independent existence. (A separate microsite is a reasonable choice but probably not the optimal approach—we’re pursuing it to keep down this project’s scope.)
• Reorganize the content so that the field guide material sits at the center of the microsite. The other content should play a supporting role.
• Redesign the habitat pages so that readers can more readily use them to identify organisms they’ve seen in the wild.
• Bring organism photos to the foreground, with an eye toward the photos that would help a reader identify something they’ve seen in the wild.
• Reduce dependence on slideshows, which tend to reduce visitor interaction.
• Improve the filtering/sorting behavior.
• Improve layout, type handling, and other graphic design elements, with an eye toward improving credibility and visual appeal.
• Maintain legibility and readability.
• Retain the Chesapeake Bay Program logo and signature blue color. Other design elements can change.

Phases of work

Analysis and information architecture

Read over the site, look at similar sites, and think about what readers might want. Create:

• Site maps for two distinct organizational structures.

Initial studies

Explore design approaches, working in broad strokes. Show:

• Sketches, style tiles, mood boards, rough layouts, or other documentation for two or more concepts.

Design systems

We’re taking a systems-first approach to this design. Before you move into issues of page layout and art direction, make design decisions about the pieces you’ll be working with. Update these pieces as the project progresses.

• Type sample sheets. Include examples of each important typographic style, including headlines, body copy, captions, and sidebars/asides.
• Design element sample sheets. Show designs for buttons, search boxes, and filter controls.
• A sheet showing navigation bars, including global and local navigation.

Pages

Work using a column grid. (Consider a relatively large number of columns for flexibility—perhaps 8, 12, or 16 columns for desktop.) Generate desktop and mobile versions for at least:

• The microsite home page (desktop/mobile).
• 3 section home pages within the field guide (desktop/mobile).
• 4 animals (desktop/mobile).
• The Ecosystem section home page or equivalent.
• The Estuary page.

Deliverables

Produce your deliverables within Figma or another prototyping tool. Turn in PDFs and links to clickable prototypes for all pages. Within your prototyping environment, generate a table of contents page that links to all the other deliverables.