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.
Keep track of the smallest details across an entire organization
2017
My role on this project:
Art Director and Designer
1
User problem: Users were unclear about the date range on any specific screen, and struggled to find files after they appended them to dates.
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.
Keep track of the smallest details across an entire organization
UX & Interface Design for a Visual Marketing Calendar
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 solutions did I consider?
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
Swipe Left
or use the arrows
Legacy view
This is what the UI looked like prior to my involvement.
Open Flight Modal
The meatball navigation underneath the modal uses icons to indicate other assets along with their statuses.
Flight name submenu
Sorting activity
Deselecting dropdown
Adding a new asset
Back to modal
Highlighting the current asset
When the asset is highlighted, asset-specific actions appear along the bottom of the modal.
