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.
My role(s) on this project included: Art Director and Designer.
Ok
Select another project, below.
↻ Start
2017
2017
2017
Keeping track of the smallest details across an entire organization
Keeping track of the smallest details across an entire organization
from 2017
Product Design Solutions for a Visual Marketing Calendar
Keeping track of the smallest details across an entire organization
Keeping track of the smallest details across an entire organization*
Keeping track of the smallest details across an entire organization
Keeping track of the smallest details across an entire organization
Keeping track of the smallest details across an entire organization
Keeping track of the smallest details across an entire organization*
Keeping track of the smallest details across an entire organization*
Keeping track of the smallest details across an entire organization
Keeping track of the smallest details across an entire organization
Keeping track of the smallest details across an entire organization
Keeping track of the smallest details across an entire organization
Keeping track of the smallest details across an entire organization
Keeping track of the smallest details across an entire organization*
Tap anywhere to enlarge the work
A1
A2
A3
B1
B2
B3
B4
B5
G1
G3
G4
G5
b18
Behind the Work
I'm a Hybrid Designer living in Santa Monica. To learn more about me and my process, click here.
B6
B7
B8
B9
*B10
Atlanta, Ga.— 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.
My role(s) on this project included: Art Director and Designer.
I had the opportunity to work closely with Atomized on a few occasions, most notably on a system-wide redesign of the flagship product.
Objectives 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.
high-level interface
Try swiping left and right to navigate.
Another hint: Expand the slideshow to show the captions.
Tap to load
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
No.001
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.
No.002
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
No.003
Steps 2 & 3
Until a canvas is chosen, two other filters remain disabled.
Filter by Date
Additional Filters
No.004
Step 2: Filter by date
This filter is required for the calendar and timeline canvas, but optional for the other two.
No.005
Step 3: Targeting additional filters
To further refine the results on the page, the user would rely on the actions within this dialog.
No.006
Search for everything else
No.007
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.
No.008
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)
No.009
Access to Settings
No.010
The rest of the footer
Displaying the remaining buttons in the footer.
No.011
World View
World View is a way to absorb all of the campaign data in a stout, granular view.
No.012
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.
No.013
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.
No.014
Dragging from the asset library
The user is able to attach assets directly or drag them from the Asset Library.
No.015
Editing flights, tags
No.016
View a particular asset
No.017
Modify the asset
Crop or annotate the image, or revert back to the original with asset history.
No.018
Upload to social media
Pre-populate a social media post based on information you've already provided.
Integration 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.
page-level interface
Try swiping left and right to navigate.
Another hint: Expand the slideshow to show the captions.
Tap to load
1
2
3
4
5
6
7
8
9
10
11
12
13
No.001
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
No.002
Canvas type: Timeline
Timeline
No.002
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.
No.003
Canvas type: Calendar
Calendar
No.004
Changing the time frame
Calendar is only available in a monthly view. For all other views, use Timeline.
No.007
Updating multiple flights
When two or more flights are selected, a dialog appears along the bottom that allows batch updating.
No.008
Creating a New Flight
This dialog contains everything needed to create a new flight, including attaching assets, comments, scheduling social media posts, etc.
No.009
Adjusting flight color
No.010
Canvas type: Columns
Columns can take advantage of the date filter, but it's not required.
Columns
No.011
Canvas type: List
This is a simple, sortable way to view the content within one or more campaigns.
List
No.012
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.
No.013
Editing campaign settings
No.014
Plans & Pricing
Previously 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.
earlier attempts to reimagine the calendar format
Try swiping left and right to navigate.
Another hint: Expand the slideshow to show the captions.
Tap to load
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
No.001
Starting with weekly view
No.002
Flight Modal
The first asset is selected.
No.003
Selecting the second asset
No.004
Changing the flight color
No.007
Back to the first asset
No.005
Triangle filter
No.006
The view selector:
Hovered
No.007
The view selector:
Press for alternative view
No.008
Toggle images on
No.008
Changing the time frame
No.009
Hovering infinite scroll
Images have been toggled off.
No.010
Activating infinite scroll
This mode allows the user to continue scrolling left or right to view additional dates.
No.011
Monthly View
No.012
Adding a new campaign
No.012
Toggle images on Monthly View
earlier attempts to improve the delivery of content
Editing Flights 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 to navigate.
Another hint: Expand the slideshow to show the captions.
Tap to load
1
2
3
4
5
6
7
8
9
10
11
12
13
No.001
Legacy view
This is what the UI looked like prior to my involvement.
No.002
Open Flight Modal
The meatball navigation underneath the modal uses icons to indicate other assets along with their statuses.
No.003
Flight name submenu
No.004
Sorting activity
No.005
Deselecting dropdown
No.006
Adding a new asset
No.007
Back to modal
No.008
Highlighting the current asset
When the asset is highlighted, asset-specific actions appear along the bottom of the modal.
