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 use very often to resize my images so that I can upload them on Dribbble. However, the 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 app with a better user experience.
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.