Abracadabra– you're live.

After launching Local Connect, we immediately learned people wanted more control over their site transfers. It felt annoying, for example, that we transferred large media files in every sync. 

We wondered how much control we could give our users. Could we could win over some of the more technical SFTP + Git crowds with basic tools for the "80% use case?" I partnered with the dev team to figure out how to make website file transfer something to get excited about...we called it MagicSync.

Making sense of the file system

The WordPress file system is…intense. It’s literally thousands of files inside multiple levels of folders. We needed a clear way to navigate this depth. I researched tools that had already solved this problem, and realized that really what we needed was to just mimic the file system.

Working closely with our devs, I designed the UI so it could go multiple levels deep. Vertical bars surrounding the content created a visual “container” for folders that ended up taking up a lot of vertical space. Zebra striping to aids the eye in determining related content horizontally. 

iterations@2x

These various iteraton/feedback rounds helped uncover the clearest UI

All-out-of-sync@2x
Sync-details@2x-2

Clarifying changes

I needed to provide clear communication of what exactly was changing. I came up with a way to show the Local environment and the live environment next to each other, and icons denoting if a file was being added (+), deleted (-), or just updated (no icon). I added color shifts as secondary reinforcement of changes, and added supporting text where necessary (including an overview total at the top of the list for quick scanning).

Keeping the user in control

A simple select lets you choose to push only files that are newer than the destination, or everything out of sync. This is above the list, because it controls everything below it.

Our customers told us they needed the ability to always prevent specific files from getting sent. I designed a simple lock/unlock interaction that would persist to prevent times from ever being included in the push or pull.

Lock-unlock@2x

Project impact + reflection

Making this product easy to use took a significant amount of thought and trial and error before it made sense. It also highlighted the difficulty from the dev side on doing such heavily interactive things. I loved working and dreaming and scheming with our team's front-ender on how to actually make this happen (though he was the one who did all the heavy lifting).

We still get confusion from time-to-time over how we communicate the various types of syncing (everything that's changed vs. only newer files), so we're working on improving this laanguage in the near term. Otherwise, it served as a flagship feature to our "Local for Teams" and "Local Pro" releases, which found a decent footing before we decided to just give the paid features to everyone a few months later.