Imgur is a great service for sharing pictures, memes, and screenshots. I wanted to update Imgur as a thought exercise, for a bit of a hat-tip to a service I love, and because I think the Imgur uploader can be significantly improved with a few relatively minor tweaks.

The Approach

I’ve redesigned the Imgur web upload process to clarify the interface and focus on customers uploading images. For this project I’ve kept three things front of mind:

1. Mobile First — the interface must work well on mobile devices and be effective in a browser as well. This also means the site could be coded responsively, improving maintenance of the codebase.
2. Instructional — the interface should show customers the easiest way to upload an image and encourage best practices from the start.
3. Goal Oriented — Imgur exists to facilitate the sharing of images. The interface should help the customer share photos with ease.

I decided that on-boarding materials describing other Imgur features or opportunities for customer engagement was out of my scope here, but that would be an interesting exercise.

Without further exposition, let’s dive into to Imgur.

Step 0—The Landing page

A customer has successfully opened http://imgur.com, and they will see the homepage-o-memes. They browse some memes before tapping the upload button to share an image on reddit.

Step 1 — Choosing the Files

When new customers tap the upload button on the home, they are presented with a screen with four equally weighted options.

Which to pick? Browse is most familiar and is highlighted, indicating it’s the preferred way to upload. Paste URL, Drag and Drop, and Paste from Clipboard are also options, but have slightly less emphasis. The trouble with this equal weighting of options is that the options are all good, but it’s not obvious which route to take. Imgur has an opportunity to teach customers the best way to upload images.

I propose a new look which keeps the process intact, but focuses new customers on Drag and Drop, one of the more intuitive ways to pick files for upload. Secondary file picking methods are shown below, with clear iconography and help text.

There is a clear order to options presented to the customer in the proposed screen, as opposed to the current Imgur picker screen, which presents options as a group. It’s much easier to scan the new interface and choose a method to pick files.

Step 2 — Beginning the Upload

Once the customer has selected files to be uploaded, the Imgur interface still does not show clear hierarchy. Take a close look at the Imgur screen below and you’ll find lots of competing information, which is not clearly separated by task or order of operations.

Trouble is, the content competes with buttons for customer attention:

• some content is green which draws the eye
• visual treatment of button areas and content areas are similar, and
• even reading through content is difficult as it’s not linear.

So how do we get to a logical flow?

As you can see, deemphasizing already-used controls, hiding a few ambiguous controls (edit image & filename), and emphasizing next steps clarifies what to do next for new customer.

You’ll also notice I’ve ordered the page to be roughly chronological:

Header Info
What customer is doing and an escape hatch to abandon the upload

File Attachment Methods
Instructions to attach another file

Informational Message
Message about file upload state

Picture Info and Options
Information about specific file(s)

Upload Options / Start Upload
Select options and begin upload

Options like Make Album are still available, and would stay in chronological order. “Choose images, see chosen images, do something with images, and upload images.”

Again, the focus here is on accomplishing customer goals, and designing for mobile-first. Everything points the customer toward the goal (Start Upload) and everything is chunky and tappable for mobile devices.

Step 3 — The Upload Begins

Uploading in Imgur isn’t terribly complex.

A screen shows each file individually and repeats the “green bar fills to the right” process for each file. This works just fine, but does not show the customer how many total files have uploaded or remain to upload. In fact, the individual uploads flick by fast enough that it’s almost irrelevant to show them.

In the proposed screen I’ve kept all the previous functionality, and ensured the customer knows which files have uploaded, which failed, and about how much longer it will be until the rest of the files have uploaded.

There is also a message area that can display different system messages, followed by a clearly-labelled escape hatch.

Step 4 — The Upload Succeeds!

Now the upload process is coming to a close. Let’s check out our picture, get some share links, and set the interweb alight with great memefires.

Stats, edit, description, views, posting time, etc are sprinkled about the page. Icons for social sharing are both below the picture and on the right side of the page. Share in Imgur is not an obvious choice and should either be removed from the page or grouped with the other share information.

In the proposed page, the overall layout has been kept intact with all key functionality. I’ve chosen to put the title / description above the image, clustered with editing and deletion controls. Information about photo views, posting time, and stats are in the upper right to balance the container.

Sharing is now only shown in the right panel with Imgur’s sharing prioritized, simple social sharing highlighted, and image-size controls surfaced. The existing links are also displayed below the simple share options to ensure customers who need specific links are still served.

Conclusion

That’s all for improving the Imgur upload process.

This was a fun exercise for me and I hope it was interesting for you too. If you have thoughts I’d love to hear them here or on Twitter (@inhll).