Skip to main content

GARETT

MAYFIELD

Complex Navigation

View Site

Design Solutions

OKCMOA Rebrand Website

OKC Museum of Art recently underwent a brand redesign by Switch and then hired Cooper House to design their new website to incorporate that new brand strategy. Cooper House reached out to me to design the UI/UX for the preliminary site pages.

My Role

Lead UI/UX Designer

Scope

  • Incorporate new brand design into the website redesign
  • Solution for existing complex navigation system
  • Primary page structure solutions
  • Handoff to design and dev teams for incorporation

Client

OKCMOA

Design Agency

Cooper House

Tools

Figma, Asana, Illustrator

UI/UX Requirements

  • Home page
  • Navigation menu
  • Full pop out menu
  • Dynamic pop out menu
  • Search Menu & results
  • Page modules
  • Footer

Process

New Brand Guidelines

We were provided with the new brand guidelines and the below elements were the primary focus within the website design, particularly the frame system. This frame system was present throughout most of the new brand collateral which included an image of the featured art, framed on either the top or bottom and always the right side by content-driven color (pulled from the featured artwork), and finally accompanied by descriptive text. This presented both a design challenge for the site and especially a challenge for the developers.

Preliminary Designs

Solving for the frame system and vertical text layout.

Version 1

Navigation

The first approach to the navigation was to keep with the existing structure as closely as possible. The client was concerned with moving things too much and confusing their loyal patrons.

Hero

I implemented a 3 feature structure layout using the frame system, each interactive.

Film Section

Split screen film feature (high traffic for the current site)

Quote

Chihuly glass art installations are present throughout the museum so naturally OKCMOA wanted a quote from the artist.

Membership CTA

Membership plug featured in the designated CTA brand blue (the primary action color for the website)

Establishing structure

Solutions for 3up and 2up layout modules for both the homepage and other pages.

Footer

There was large amounts of content to include in the footer much like the header.

Version 2

Navigation 3 in 1

  1. Primary nav across the top
  2. ​Expanding hamburger menu for a deeper dive into details
  3. Rotated, vertical, floating menu featuring the three primary CTAs (Ticket sales, Memberships, Donations)​
  4. Navigation wraps around a single hero feature

Secondary Features

Responsive feature menu

Full Width Film Feature

Dynamic Pop Out Menu

The museum required a one-stop-shop of information, admission rates, hours of operation and more that could be accessed from any page they were on. Clicking the hamburger menu triggers this menu.

Quick Access to Purchase Tickets

Working with the team we came up with a solution that organized the busy menu OKCMOA currently had and did not want to part with.

Search

The search functionality was kept as simple as possible while including filters and suggestions.

Final Design

The Cooper House team did an outstanding job finishing out the website pages and surpassing the clients expectations. I was kept on the project to consult with the other pages and help build the style guide for the team during handoff.

View Website

Learnings

Form Follows Function

Art itself is unique and the OKCMOA website was built to match. While challenging and unconventional, the final product is one I’m proud to have been a part of. The navigation and frame system was not the easiest to implement but working together with the Cooper House team promoted everyone’s growth, accessibility and a website the client is very happy with.

Credits to the Team

Tim Cooper

TECHNICAL DIRECTOR

Erin Cooper

CREATIVE DIRECTOR

Emily Cunningham

PROJECT MANAGER

Garett Mayfield (me)

UI/UX DESIGNER

Jesse Howell

MARKETING ASSISTANT

Hallie Waugh

CONTENT DIRECTOR

Stephanie Shilling

ART DIRECTOR

Loren Cookson

GRAPHIC DESIGNER

Rachel Maucieri

MEDIA DIRECTOR

Alaina Hunt

DIGITAL DESIGNER

Dane Strom

SENIOR DEVELOPER / SEO STRATEGY

More Cooper House Collaborations

Bob Moore Autogroup

My Role:

Setting up UX for website

Create Design System

View Website

OCCC Website

My Role:

View Website

Prairie Surf Media

My Role:

UX Design Assist for website

Iconography Structure

View Website

Wheeler Labs

My Role:

UI/UX Design

View Website

View more of my work

Back to work

Let’s work together

GARETT

MAYFIELD

Complex Navigation

View Site

Design Solutions

OKCMOA Rebrand Website

OKC Museum of Art recently underwent a brand redesign by Switch and then hired Cooper House to design their new website to incorporate that new brand strategy. Cooper House reached out to me to design the UI/UX for the preliminary site pages.

My Role

Lead UI/UX Designer

Scope

  • Incorporate new brand design into the website redesign
  • Solution for existing complex navigation system
  • Primary page structure solutions
  • Handoff to design and dev teams for incorporation

Client

OKCMOA

Design Agency

Cooper House

Tools

Figma, Asana, Illustrator

UI/UX Requirements

  • Home page
  • Navigation menu
  • Full pop out menu
  • Dynamic pop out menu
  • Search Menu & results
  • Page modules
  • Footer

Process

New Brand Guidelines

We were provided with the new brand guidelines and the below elements were the primary focus within the website design, particularly the frame system. This frame system was present throughout most of the new brand collateral which included an image of the featured art, framed on either the top or bottom and always the right side by content-driven color (pulled from the featured artwork), and finally accompanied by descriptive text. This presented both a design challenge for the site and especially a challenge for the developers.

Preliminary Designs

Solving for the frame system and vertical text layout.

Version 1

Navigation

The first approach to the navigation was to keep with the existing structure as closely as possible. The client was concerned with moving things too much and confusing their loyal patrons.

Hero

I implemented a 3 feature structure layout using the frame system, each interactive.

Film Section

Split screen film feature (high traffic for the current site)

Quote

Chihuly glass art installations are present throughout the museum so naturally OKCMOA wanted a quote from the artist.

Membership CTA

Membership plug featured in the designated CTA brand blue (the primary action color for the website)

Establishing structure

Solutions for 3up and 2up layout modules for both the homepage and other pages.

Footer

There was large amounts of content to include in the footer much like the header.

Version 2

Navigation 3 in 1

  1. Primary nav across the top
  2. ​Expanding hamburger menu for a deeper dive into details
  3. Rotated, vertical, floating menu featuring the three primary CTAs (Ticket sales, Memberships, Donations)​
  4. Navigation wraps around a single hero feature

Secondary Features

Responsive feature menu

Full Width Film Feature

Dynamic Pop Out Menu

The museum required a one-stop-shop of information, admission rates, hours of operation and more that could be accessed from any page they were on. Clicking the hamburger menu triggers this menu.

Quick Access to Purchase Tickets

Working with the team we came up with a solution that organized the busy menu OKCMOA currently had and did not want to part with.

Search

The search functionality was kept as simple as possible while including filters and suggestions.

Final Design

The Cooper House team did an outstanding job finishing out the website pages and surpassing the clients expectations. I was kept on the project to consult with the other pages and help build the style guide for the team during handoff.

View Website

Learnings

Form Follows Function

Art itself is unique and the OKCMOA website was built to match. While challenging and unconventional, the final product is one I’m proud to have been a part of. The navigation and frame system was not the easiest to implement but working together with the Cooper House team promoted everyone’s growth, accessibility and a website the client is very happy with.

Credits to the Team

Tim Cooper

TECHNICAL DIRECTOR

Erin Cooper

CREATIVE DIRECTOR

Emily Cunningham

PROJECT MANAGER

Garett Mayfield (me)

UI/UX DESIGNER

Jesse Howell

MARKETING ASSISTANT

Hallie Waugh

CONTENT DIRECTOR

Stephanie Shilling

ART DIRECTOR

Loren Cookson

GRAPHIC DESIGNER

Rachel Maucieri

MEDIA DIRECTOR

Alaina Hunt

DIGITAL DESIGNER

Dane Strom

SENIOR DEVELOPER / SEO STRATEGY

More Cooper House Collaborations

Bob Moore Autogroup

My Role:

Setting up UX for website

Create Design System

View Website

OCCC Website

My Role:

View Website

Prairie Surf Media

My Role:

UX Design Assist for website

Iconography Structure

View Website

Wheeler Labs

My Role:

UI/UX Design

View Website

View more of my work

Back to work

Let’s work together

GARETT

MAYFIELD

Complex Navigation

View Site

Design Solutions

OKCMOA Rebrand Website

OKC Museum of Art recently underwent a brand redesign by Switch and then hired Cooper House to design their new website to incorporate that new brand strategy. Cooper House reached out to me to design the UI/UX for the preliminary site pages.

My Role

Lead UI/UX Designer

Scope

  • Incorporate new brand design into the website redesign
  • Solution for existing complex navigation system
  • Primary page structure solutions
  • Handoff to design and dev teams for incorporation

Client

OKCMOA

Design Agency

Cooper House

Tools

Figma, Asana, Illustrator

UI/UX Requirements

  • Home page
  • Navigation menu
  • Full pop out menu
  • Dynamic pop out menu
  • Search Menu & results
  • Page modules
  • Footer

Process

New Brand Guidelines

We were provided with the new brand guidelines and the below elements were the primary focus within the website design, particularly the frame system. This frame system was present throughout most of the new brand collateral which included an image of the featured art, framed on either the top or bottom and always the right side by content-driven color (pulled from the featured artwork), and finally accompanied by descriptive text. This presented both a design challenge for the site and especially a challenge for the developers.

Preliminary Designs

Solving for the frame system and vertical text layout.

Version 1

Navigation

The first approach to the navigation was to keep with the existing structure as closely as possible. The client was concerned with moving things too much and confusing their loyal patrons.

Hero

I implemented a 3 feature structure layout using the frame system, each interactive.

Film Section

Split screen film feature (high traffic for the current site)

Quote

Chihuly glass art installations are present throughout the museum so naturally OKCMOA wanted a quote from the artist.

Membership CTA

Membership plug featured in the designated CTA brand blue (the primary action color for the website)

Establishing structure

Solutions for 3up and 2up layout modules for both the homepage and other pages.

Footer

There was large amounts of content to include in the footer much like the header.

Version 2

Navigation 3 in 1

  1. Primary nav across the top
  2. ​Expanding hamburger menu for a deeper dive into details
  3. Rotated, vertical, floating menu featuring the three primary CTAs (Ticket sales, Memberships, Donations)​
  4. Navigation wraps around a single hero feature

Secondary Features

Responsive feature menu

Full Width Film Feature

Dynamic Pop Out Menu

The museum required a one-stop-shop of information, admission rates, hours of operation and more that could be accessed from any page they were on. Clicking the hamburger menu triggers this menu.

Quick Access to Purchase Tickets

Working with the team we came up with a solution that organized the busy menu OKCMOA currently had and did not want to part with.

Search

The search functionality was kept as simple as possible while including filters and suggestions.

Final Design

The Cooper House team did an outstanding job finishing out the website pages and surpassing the clients expectations. I was kept on the project to consult with the other pages and help build the style guide for the team during handoff.

View Website

Learnings

Form Follows Function

Art itself is unique and the OKCMOA website was built to match. While challenging and unconventional, the final product is one I’m proud to have been a part of. The navigation and frame system was not the easiest to implement but working together with the Cooper House team promoted everyone’s growth, accessibility and a website the client is very happy with.

Credits to the Team

Tim Cooper

TECHNICAL DIRECTOR

Erin Cooper

CREATIVE DIRECTOR

Emily Cunningham

PROJECT MANAGER

Garett Mayfield (me)

UI/UX DESIGNER

Jesse Howell

MARKETING ASSISTANT

Hallie Waugh

CONTENT DIRECTOR

Stephanie Shilling

ART DIRECTOR

Loren Cookson

GRAPHIC DESIGNER

Rachel Maucieri

MEDIA DIRECTOR

Alaina Hunt

DIGITAL DESIGNER

Dane Strom

SENIOR DEVELOPER / SEO STRATEGY

More Cooper House Collaborations

Bob Moore Autogroup

My Role:

Setting up UX for website

Create Design System

View Website

OCCC Website

My Role:

UX Design Strategy

Website Template

View Website

Prairie Surf Media

My Role:

UX Design Assist for website

Iconography Structure

View Website

Wheeler Labs

My Role:

UI/UX Design

View Website

View more of my work

Back to work