Upload and Select Content

Increased upload success rate

Designed for the ability to have a drag and drop upload anywhere in the content management system. Previously if a user tried to drag and drop into the list of content it would open up the content in a new page and they would lose all work done. The redesign still included a button to upload content, but was changed to say create and all creation flows led from there. This was to account for accessibility and paralleling mental models users see in other similar systems. The visual design of the system was being concurrently worked on so any of the designs made were lower fidelity to cover affordance needed to know where to drag, errors that occurred, and the loading progress. 

Reduced instances of multiple uploads of the same content

Redesigned the modal to be one screen versus two tabs, since users rarely saw select tab and ended up uploading their content again. It was meant to be designed to look like a more compact or limited version of the content management system itself, to create a more consistent and predictable experience. 

Created functionality for drag and drop upload

Customers expected to be able to drag and drop into the Content Management System to parallel functionality of other programs they used regularly, such as Google Drive.

Additionally, it was noticed that customers tried to upload directly onto the Email Creation program during a summative test, so I added the functionality and drop permutations to upload directly dragging from your computer onto the creation canvas.

Roles

Julie Byers | Designer, Interactions and Flow

Kathleen Surfus | User Experience Researcher

Jessica Krucina | Designer, Visual design of new content management system

Stephanie Brechbuhl | Designer, provided freedback and discussion

Craig Birchler | Design, Content Team Lead

Spencer Abrams | Product Manager

Thomas Besluau | Developer Lead

Research

Our UX Researcher conducted a end to end research study on the content product. The biggest pain points were how users uploaded and selected content in the content management system itself, and the compact version in the email editor. No user, who completed the study, could successfully upload content. There were many times bugs in the system would occur and confuse the user. For example, a common bug was that the thumbnail of an image did not display and showed the broken image link. Also, if there was already content with the same name in the system, the system did not append a number or differentiator at the end of the name, instead it erred the upload. Users did not see that they could resolve errors in our system, so they would typically change the name (or edit the error) on their side and then re-upload the content. Furthermore, in the test we asked users to select pre-uploaded content to use in an email. Most users did not see the compact version of the content management system and either tried to go back to the main system or re-upload the content. The upload experience was the first experience shown to a user, and they had to go to another tab on the modal to see a content already uploaded to the system previously. Users did not understand why the compact version felt much different than the main product itself, and did not associate the two with each other. 

Workflows

I mapped out the current workflow users had to go through to upload or select a piece of content from the content management system. I went through to add notes, pain points, and user quotes from the study. From there, I reorganized the workflow to fix the pain points, grouped them into parts of the system to try to simplify the flow, and mapped out a more ideal flow based off user expectations. 

Task Flows

Based off the overall end-to-end flow, I created more specific task flows. These tasks were the same tasks that we made the users complete in the study, and some other flows that users had issues with during testing (such as error handling). 

Design

I redesigned the modal to be one screen (versus two different tabs for upload and select) and look more like a compact version of the content management system itself, creating a more consistent, predictable experience. I also edited the error handling to give the users more detail and help them preventing errors in the future, or if they do prevent errors helping them more efficiently resolve them. I eliminated the name duplication error by appending a number to the end of the newly duplicated content. Also, I designed for the ability to drag and drop content for uploading in more places than just the modal. Most the edits were made to give more clarity and consistency in our system. The content management system was in the process of a complete redesign and redevelopment, so I based the design off an ideal design (at the time) for the new content management system. Some edits were made in production from the ideal design, and the modal was changed along with it, but I was no longer on the team at that point.  

Drag and Drop Upload on To Editor

After adding the functionality to the modals and main content management system, it was best to then parallel the functionality to be able to upload while creating an email, landing page, etc. in the editor itself.

Workflow

I talked to our lead developer, Thomas, and figured out the issues that could keep a piece of content from seamlessly uploading for a user, and how to make affordances for those instances. We mapped out the general flows: successful upload, resolvable error, and unresolvable error, as well as made note for what was happening on the backend.

Drag and Drop Permutations

Since dragging into the editor, the “content block” - or sections in a template where you could put content - could be empty or already filled, I went through and mapped the various permutations of these scenarios to see how a piece of content would react default.

Dropping onto the editor task flows

Step by step walking through with the tasks that a user can take to upload, and how to resolve them. These were done with low fidelity thumbnails so that the backend team could quickly raise issues or know what they needed to prepare for. This went through several iterations with issues with Akamai - an image rendering service - and then also figuring out where to place this content in the CMS so that the customer could find it post use.

Low Fidelity Wireframes

From the task flows, I turned those into low fidelity wireframes. In these the task flow action was the first statement, and any backend or component notes were made next. Also, the affordances were detailed out. An example of this is the loading bar, were shown how they would look, since the progress bar was not actually showing the actual progress of an upload but was there to make the user feel better and know something was happening.

The other styles and affordances were just inherited from the editor team, which were already in place determining on the editor they were using.