Dribbble Resizer Redesigned

Dribbble is a web application for the design community where designers can showcase images of projects they are working on. Dribbble only allows images of certain dimensions to be uploaded on the site. Excess areas of large images are cropped out. The Dribbble Resizer is a tool I sometimes use to quickly resize my images in order to upload them on Dribbble. However, the web app doesn’t have the best user experience and could drive away new users who aren’t already familiar with how to use it. I decided to redesign the tool with a better user experience.

Process

The two main problems with the current state of the Dribbble Resizer are that the user flow is unnecessarily longer than it needs to be, and there is a lack of feedback to the user about what action has taken place.

After users have uploaded their image and made their selections, they have to click the “Resize” button to resize their image and then click the “Download” button to retrieve their image. Not only does this make the process longer but there is also lack of feedback between these two steps. As soon as the user clicks “Resize”, the image preview disappears as if it were eaten by the website. The upload button and selection options go back to their initial blank state. It would take a very observant user to realize that a “Download” button replaced the “Resize” button. Most first time users would probably think they went back to the first page of the application and try to upload their image again. As you can see below, the download page looks identical to the blank state of the application.

I streamlined the process by making one button that resizes the image and also immediately opens the download dialog box.

When a user visits the site, they are immediately faced with a page that shows them all the options they have. This can be overwhelming for a first time user. In my redesign, the only thing a user can see when they first visit the site is the option to upload their image to the site. When users see only one action they can take, they are less likely to get confused/overwhelmed and leave the site.

As soon as the user uploads their image to the site, they now see their uploaded image and below it more options to customize it.

Underneath those options there is a “Resize & Download” button that users can click to get their resized image. I also added a status bar during the process to give visual feedback to users that the app is working. After the app is done resizing the image, the download dialog box immediately opens up.

Final Thoughts

Although my redesign of the resizer tool seems to have a better user experience, I still haven’t fully addressed the problem the tool was created to solve. The root of the problem lies in Dribbble’s inability to aesthetically crop and resize the shots users upload. There are some apps that have built-in solutions for cropping images without compromising on content or presentation. For example, uploading a profile image on Whatsapp is very user-friendly. Users are able to zoom completely out of the image they want to upload, and a blurred version of their photo is automatically turned into a background.

Unfortunately, when uploading shots to Dribbble users have to create separate image files designed solely for showcasing on Dribbble. For designers who already spend so much time creating their work, it is an inconvenience to spend more time trying to showcase their work in Dribbble. In my opinion, Dribbble could benefit much from redesigning their user experience. What do you think? Share your thoughts with me in the comment section below!