The Design Portfolio of JJ Verhine

Helpful to Know

We rebranded the main company prior to its properties, so I’ll highlight the main site first. We then cycled through the rest of their portfolio, which includes large experiential communities such as Avalon, Colony Square, High Street, Revel and Riverton.

the end result

exploring the navigation

Try swiping left and
right on the images
to navigate.

Tap to Hide

Tap to load

Homepage Concept

This design would allow the user to preview the content within the 3 major sections and cycle through them in a fullscreen interface.

Sitemap overlay

When the + is pressed, this sitemap would overlay the existing navigation.

Highlighting Purpose, instead

Close Sitemap, Back to hero

Navigating People

Another approach

The copper dot indicates the current section.

The hamburger

Accessing the sitemap in this approach.

A third approach

This version includes individual dropdowns for each section.

Sitemap as a drawer

Tip: Turn your device sideways to view captions for each slide.

mobile adaptation

Try swiping left and
right on the images
to navigate.

Tap to Hide

Purpose Page

This design would allow the user to cycle through the child slides within purpose. Each slide would have its own landing page.

Sitemap overlay

When the hamburger menu is pressed, this sitemap would overlay the existing navigation.

Swiping Left, for People

Here, the user is able to hop between sections.

Back to Purpose

Careers Page

Submenu Overlay

Back to Careers

This slideshow
has been paused.

Tap to load

Tip: Turn your device sideways to view captions for each slide.

layout & hierarchy

Try swiping left and
right to navigate.

Another hint: Expand the slideshow to show the captions.

Tap to load

No.001

Select a campaign, or two

No.002

Select a canvas type

No.003

The next two filters

No.004

Filter by date

No.005

Targeting additional filters

No.006

Search for everything else

The campaign names are abbreviated, and display-in-full on-demand. When a campaign is selected, the option to select a canvas will then present itself.

View the Website

A North American Property
colony square

Try swiping left and
right to navigate.

Another hint: Expand the slideshow to show the captions.

Tap to load

No.001

Fullscreen Homepage Hero

No.002

Directory Heroes

If the user scrolls down on this page, they're presented with the next slide.

No.003

Directory Filtering

The directory is split into four categories: Retail, Dining, Offices & Amenities. Offices allow you to separate by building, as well as manually type into a live filter.

No.004

About: Overview

No.005

Further down the page

No.006

Events Heroes

If the user scrolls down on this page, they're presented with the following slide.

No.007

Individual Events

Tip: Turn your device sideways to view captions for each slide.

View the Website

A North American Property
experience avalon

Try swiping left and
right to navigate.

Another hint: Expand the slideshow to show the captions.

Tap to load

No.001

Fullscreen Homepage Heroes

No.002

Homepage Footer

No.003

About: Overview

This section features a supporting submenu.

No.004

About: Jobs

No.005

Current Movies

Live feed of showtimes at the theater.

No.006

Events Page

The user can live filter the events by typing in the field in the top left. That allows the user to type a word to help find an event they'd previously seen, rather than rummaging through them all. Even more powerful is the ability to type a month or a specific day to see if there are events that apply, since an event can be recurring, can have a date range, and then might only apply on selected days within that range.

No.007

Directory: Dining

This page also features a submenu, breaking the directory into four categories.

No.008

Dining: Viewing a Restaurant

Each store and restaurant would have its own dedicated detail page.

No.009

Directory: Retail

No.010

Retail: Additional Filters

The Retail Directory features an additional dropdown that allows you to filter by style.

No.011

Offices: Additional Filters

Offices are organized by building.

Tip: Turn your device sideways to view captions for each slide.

View the Website

2020

Completed

Currently
viewing

Design & UX for a National Homebuilding Company

2020

KB Home

2019

Completed

Currently
viewing

UX Design & Code for a Curated Hub for Assignment Photographers

2019

AtEdge

2018

Completed

Currently
viewing

Code & Art Direction for a Multi-Regional Real Estate Firm

2018

North American Properties

2017

Completed

Currently
viewing

Product Design for a Visual Marketing Calendar

2017

Atomized

2016

Completed

Currently
viewing

Design & Code for a National Youth Leadership Organization

2016

Boys & Girls Clubs of America

2016

Completed

Currently
viewing

Art Direction, Product Design for an American Car Maker

2016

Ford Motor Co.

2015

Completed

Currently
viewing

Product Design for a Multinational Consumer Goods Company

2015

Procter & Gamble

2015

Completed

Currently
viewing

Responsive Design for a Drive-thru Quick-lube Chain

2015

Valvoline Instant Oil Change

2015

Completed

Currently
viewing

Responsive Design for a Solar Company

2015

Sunrun

2014

Completed

Currently
viewing

UX + UI Design for a Basketball Stats App designed for iOS

2014

NBA Game Time

2014

Completed

Currently
viewing

Editorial Photography for Gap's Fall 2014 Campaign

2014

The "Dress Normal" Project

2013

Completed

Currently
viewing

Product Design for a Class II/III Gaming Company

2013

Cadillac Jack

Behind the Work

the end result

exploring the navigation

mobile adaptation

layout & hierarchy

A North American Property
colony square

A North American Property
experience avalon

Additional Details

Behind the Work

the end result

exploring the navigation

mobile adaptation

layout & hierarchy

A North American Propertycolony square

A North American Propertyexperience avalon

Additional Details

A North American Property
colony square

A North American Property
experience avalon