The Design Portfolio of JJ Verhine

Hi, I'm JJ.

I'm a Designer/Developer Hybrid positioned at the intersection of UX Research, Interface Design, Interactive Prototyping, and Front-end Development.

Click here to download my résumé.

Tools & Frameworks

I've built several different kinds of websites from scratch. Many are built on the WordPress platform. I'm able to code HTML, PHP, CSS and Javascript by hand for a polished experience that looks right and feels right. I'm comfortable prototyping in After Effects and other tools. I've been using Sketch as my primary design tool since 2016, and most recently, Adobe XD & Figma. Tools change all the time and I'm unafraid to embrace new ones. I began my career working with Flash, after all.

How I Operate

Through the years, I've gained experience directly managing client expectations when carrying small to medium projects all the way from conception to completion.

The Great Fran Tarkenton goes rogue and says a few outlandish things about me.

I've learned how to tell the client things that they might need to know, but are afraid to hear. I'm well versed in working remotely and independently and consider myself to be a self-starter. I'm comfortable within a narrower UX, UI or Development role as part of a larger team, and I'm often used as a bridge between design and development. I consider myself to be a Designer above all, so if I'm in a situation where all I'm doing is programming, I value having a voice with regard to creative implementation, interaction, style and taste.

Design Process

I believe in sharing work early in the design process. I always get my ideas on paper during a short sketch process with the intention of building a proof-of-concept as soon as possible. My next priority is to leverage internal and/or team feedback to validate or invalidate my initial assumptions about possible solutions, adjust those assumptions, and then branch off into new directions. A generous amount of hours in this discovery phase almost always results in a more fruitful and considered end-product.

What sets me apart?

Having practical knowledge of the development process allows me to design experiences that feel natural and can actually be built.

I was a young designer on a segment of reality tv a long time ago. It's kind of silly, you could skip it.

I'm able to work without an ego, and generate my own ideas. Humble when fleshing out someone else's ideas. I value precision while also maintaining a mindful awareness that "Done is better than perfect." I know when to sacrifice quality for speed, but also how to be resourceful at balancing the two.

Previously

I've done work for KB Home, AtEdge, Ford, Atomized, P&G, Gap, Boys & Girls Clubs of America, MetroPCS, Valvoline, North American Properties, Coca-Cola, MARS, Sunrun, Walmart, Publix, Cadillac Jack, Equifax, IHG.

Click here to download my résumé.

Atomized

Hint: Video is muted. Tap here to unmute.

Headquartered in

Atlanta, Ga.

Completed

2017

My role on this project

Art Director and Designer

UX, Interface

Design & Code

Los Angeles,

California

Keeping track of the smallest details across an entire organization

Founded by a former Facebook exec, Atomized makes easy-to-edit visual calendars for brands and agencies that encompass the functionality of editorial calendars, marketing communications calendars, brand planning calendars and publishing calendars.

Product Design for a Visual Marketing Calendar

The High-Level Interface

The goal of this redesign was to address the pain points and bottlenecks of the previous design while visualizing the data using as much of the viewport as possible. I aimed to achieve that with an expandable interface that sat around the outer edges of the screen.

Try swiping left and
right on the images
to navigate.

Tap to Hide

Select a campaign, or two

When hovered, the first letter of the campaign displays the full word. Each campaign is given its own unique border color.

Step 1: Select a canvas type

Once one or more campaigns are selected, the user is asked how they'd like to see their data. There are four kinds of canvases:

Timeline

Calendar

Columns

List

Steps 2 & 3

Until a canvas is chosen, two other filters remain disabled.

Filter by Date

Additional Filters

Step 2: Filter by date

This filter is required for the calendar and timeline canvas, but optional for the other two.

Step 3: Targeting additional filters

To further refine the results on the page, the user would rely on the actions within this dialog.

Search for everything else

The magic ball

Clicking this icon up top will reveal a drawer containing the Magic Formulas, as well as some helpful language to describe the current screen.

Magic Formulas

Combinations of campaigns, canvases, dates and filters can be pre-defined for one-click bookmarks. Each combination is considered to be a new formula.

(3 Campaigns using Timeline with 3 additional filters)

Access to Settings

The rest of the footer

Displaying the remaining buttons in the footer.

World View

World View is a way to absorb all of the campaign data in a stout, granular view.

When an item is selected

When a data point is inspected, there is a side modal panel that slides from the right organizing those details.

This is a flight

All of the attributes of the data point, better known as a Flight, can be adjusted from the opening tab. The Asset Library makes it easy to drag and drop your assets onto the canvas, or directly into a flight.

Dragging from the asset library

The user is able to attach assets directly or drag them from the Asset Library.

Editing flights, tags

View a particular asset

Modify the asset

Crop or annotate the image, or revert back to the original with asset history.

Upload to social media

Pre-populate a social media post based on information you've already provided.

The Page-Level Interface

Now that we've examined the interface around the edges, let's dig into the guts of the app and show data visualization, page hierarchy and layout, and how each page co-exists with the high-level interface.

Try swiping left and
right on the images
to navigate.

Tap to Hide

Select a Canvas type

Choose one of four standard canvas types or select a previously used canvas. Note how two campaigns are already selected.

Timeline

Calendar

Columns

List

Canvas type: Timeline

Timeline

Changing the time frame

Timeline allows you to view your data based on a daily, weekly, monthly, quarterly or yearly time frame. Currently viewing a weekly time frame.

Canvas type: Calendar

Calendar

Changing the time frame

Calendar is only available in a monthly view. For all other views, use Timeline.

Updating multiple flights

When two or more flights are selected, a dialog appears along the bottom that allows batch updating.

Creating a New Flight

This dialog contains everything needed to create a new flight, including attaching assets, comments, scheduling social media posts, etc.

Adjusting flight color

Canvas type: Columns

Columns can take advantage of the date filter, but it's not required.

Columns

Canvas type: List

This is a simple, sortable way to view the content within one or more campaigns.

List

The Atomized Dashboard

When all campaigns have been deselected, the user is presented with the dashboard that provides an overview of the campaign data. This would be the screen that a user would see upon login.

Editing campaign settings

Plans & Pricing

Earlier Attempts to Improve the Calendar

Prior to engaging in the full-bodied redesign above, I worked with the Atomized team to make the calendar experience more intuitive. Some of these observations below ultimately found their way into the redesign above.

Try swiping left and
right on the images
to navigate.

Tap to Hide

Starting with weekly view

Flight Modal

The first asset is selected.

Selecting the second asset

Changing the flight color

No.007

Back to the first asset

Triangle filter

The view selector:

Hovered

The view selector:

Press for alternative view

Toggle images on

Changing the time frame

Hovering infinite scroll

Images have been toggled off.

Activating infinite scroll

This mode allows the user to continue scrolling left or right to view additional dates.

Monthly View

Adding a new campaign

Toggle images on Monthly View

Earlier Attempts to Improve the Delivery of Content

The team had originally developed the app to account for a limited number of assets for each flight. The challenge was to design a screen that would encourage user behavior to change by delimiting capacity so that what used to be done with several flights can now be accomplished with one.

I recommended a compartmentalized fullscreen modal solution that allows the user to navigate between assets easily and view the flight history without feeling overwhelmed.

Try swiping left and
right on the images
to navigate.

Tap to Hide