Atomized

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

Newer

North American Properties

UX, Visual Design & Code for a National Youth Leadership Org.

Older

Boys & Girls Clubs of America

Keep track of the smallest details across an entire organization

2017

Atomized

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.

What was
the goal
of the work?

UX & Interface Design for a Visual Marketing Calendar

The High-Level Interface

The goal of this redesign was to address the usability pain points and bottlenecks of the previous design while reducing the amount of chrome across the board. I aimed to achieve that with an expandable interface that affixed to the outer edges of the screen.

Try swiping left and
right on the images
to navigate.

Tap to Hide

Swipe Left

or use the arrows

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

Swipe Left

or use the arrows

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

Swipe Left

or use the arrows

Starting with weekly view

Flight Modal

The first asset is selected.

Selecting the second asset

Changing the flight color

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