Inspiration

A shot in the dark: The creation of Drubbbler

4 min read
Emily Fiennes,
Luc Chaissac
  •  Apr 20, 2016
Link copied to clipboard

Dribbble is a social network where designers exhibit their work, receive feedback, and get noticed. A designer can use Dribbble to post shots of work that’s still in progress, or work that’s linked to their team’s communication campaigns.

Planning and posting shots in order to get more visibility—and being strategic about when to do so—has become a fundamental part of work for many designers.

It’s all about timing. To gain maximum visibility, designers need to post a new Dribbble shot when the West Coast is waking up. If you’re in Europe, that means stopping whatever you’re working on just to post a shot.

Drubbbler solves this problem by allowing you to schedule and automate shots.

The team

We’re a small team in Bordeaux, France. Luc Chaissac is the lead designer and the originator of the idea. It was for his own personal benefit (he was tired of getting up in the middle of the night to post shots), and he didn’t expect anyone else would want to use it.

Charley David is the lead developer, and he deals with the back-end development and APIs. Once Luc came up with a design for Drubbbler, Charley dedicated his weekends and evenings to developing it. Pierre Renaudin helps Charley with front-end development, which enabled Charley to build our payments system.

Audrey Labuxiere manages the communications and support, and Emily Fiennes handles content production and all English communication with designers.

“The Buffer for Dribbble”

Drubbbler borrows Buffer’s model. Buffer is a platform that allows Twitter users to plan and schedule their tweets. Tweets can be automated and sent out at the scheduled time, offering marketers and agencies a smarter way to manage their social media.

Charley and Luc realized that the same process could be used for design shots on Dribbble to offer Dribbble users greater visibility over time, and thus a more productive way to receive feedback and gain notoriety.

When we first posted Drubbbler on Product Hunt, there were a lot of reactions—Buffer and Dribbble loved it and found the idea amusing. There was a sudden surge in traffic to the site, causing the app to crash.

We realized that perhaps there was something worth taking seriously here, so we set about perfecting the tool.  

From Dribbble to Drubbbler: the design process

Logo and interface

The first step was to come up with a logo and an interface. We tried to maintain a link to Buffer via the logo. While Buffer’s logo depicts sheets of paper being stacked, ours shows the Dribbble ball in motion.

Buffer’s existence meant we had lots of ready-made solutions for the interface. For example, we used their open source date-picker.

“Design is a business like any other.”

Twitter Logo

Posting a new shot

After that, we created the form for posting a new shot. It seems so simple, but it was the thing that took the longest and was the hardest. Other than Dribbble, no one else had created a form where you could put your shot and description. We had to consider many things: the tags, the order in which the shots should be posted, and whether Drubbbler should resemble what Dribbble had done. We made several versions of this form.

Landing page

The landing page works so well that we’ve hardly changed it in 2 years. We asked motion designer Jokūbas Setkauskas to help us with the animation. There’s a catch phrase above and a large login button underneath—and that’s it.

Sometimes the simplest things are the most effective: a conversion rate can soar thanks to a good landing page.Twitter Logo And the conversion rate we’ve seen has been wild. It’s our best (and certainly our most effective) design, simply because we’ve never had to change it.

Challenges

Integrating feedback

The biggest challenge has been integrating user feedback into the shot form without making the form too complex. Users often ask for the ability to add projects as a field. For each feature, we have to decide whether the information being added is useful. Keeping the shot-posting process as simple as possible is key.

Representing the notion of time

Users can choose when a shot will be posted, but it’s difficult to show what that corresponds to in various time zones. Although shots were being posted at the correct times, we just couldn’t represent those times accurately for our users. It was the design that wasn’t working properly and needed to be changed. We solved the issue by redesigning the date-picker and adjusting how we represented the time zones.

Organization and strategy

Marketing

We hadn’t anticipated that Drubbbler would ever need a marketing strategy. When we posted on Product Hunt in November 2014, we just had one Twitter account—that was the extent of our communications materials. Since then, our marketing has evolved, but it’s still quite simple.

Because the platform is a way of promoting people, it’s its own best marketing tool. If big names in design are using Drubbbler and loving it, that’s the most effective marketing strategy.

“If you wait for perfection, you’ll never launch.”

Twitter Logo

When building and adding to the product, the developers state what they’re able to do, and the design can flow from there. Once Luc finishes his designs, he shares the Sketch file with Charley or Pierre.

Technical constraints also direct our design decisions. A considerable obstacle is the fact that Dribbble’s API isn’t completely open. So there are certain things that we just can’t do.

User profiles

Over time, we’ve identified 3 key Dribbble users:

  1. Players using Dribbble for the first time have no followers and need to gain increased visibility, with the longer term aim of building up a portfolio to seek out contracts
  2. “Celebrity” players have many followers and want to plan all their shots in advance—maybe even a few weeks ahead of time  
  3. Teams need to coordinate product communication when their marketing department starts creating hype on Twitter

All 3 of these personas have evolved over time as we’ve observed our users’ behavior more and more. In fact, the third is still a work in progress, as it’s become clear that any design team needs a presence on Dribbble to communicate. Dribbble has become an indispensable way of communicating about new features or clients. That’s why we’ll be offering something specific for teams.

User testing

We’re able to test if Drubbbler responds to user needs, thanks to the invaluable feedback we receive.

“Always be open and honest with your users.”

Twitter Logo

There are 2 types of user feedback: suggestions for improvement, and urgent matters. When a user asks for a feature, the situation is less critical. We communicate with the user and decide as a team whether the feature might be a good addition.

While creating a new feature, include the user who gave the feedbackTwitter Logo, and essentially the idea, by remaining in contact with them via Twitter.  

Either way, the most important thing is to remain open and honest. If you make a mistake but you’re honest about it, people understandTwitter Logo and don’t get mad.

Tools

InVision

We use InVision externally to create workflows and then share them so that other designers can leave feedback. Design prototypes can be made and shared really quickly on InVision. When we shared the workflow for Team shots, feedback showed us what worked well and what our community had imagined differently.

We often change a design if we realize from the prototype that the workflow isn’t effective, or that a function hasn’t been understood. For example, with the upcoming Team plan, there’s a dropdown menu to change the user profile. When we shared the prototype, people didn’t understand how that worked. We changed the design and re-shared the prototype. The process of drawing up a prototype and getting it validated is efficient, so we can double-check features before launching them.

The moral of the story

There’s so many talented designers out there, and gaining notoriety and building a reputation have never been more important. Drubbbler’s mission is to enable designers to post shots at the right time and to increase their visibility.

Some people think that this places too much emphasis on fame. But those who have succeeded thanks to Dribbble recognize that design is a business like any other.Twitter Logo To succeed, you need to be the driving force behind your own reputation.

“You need to be the driving force behind your own reputation.”

Twitter Logo

The kind of automation offered by Dribbble and Buffer could be a valuable model in the future—other professions will be able to apply it to their work. Today, Dribbble is for designers. Tomorrow it could be for copywriters who want to prepare their work in advance of posting it.

As it turned out, Drubbbler wasn’t ready for its launch. We had no clear marketing strategy and no clearly defined user personas. We certainly weren’t ready for the initial traffic we received. We didn’t even think others would use it—it was really just to meet our needs. So if we’d waited for perfection, we never would have launched.

But thanks to Product Hunt, the initial reaction was great. We seized the opportunity to grow from there. The mistakes and difficulties along the way were a vital learning curve. Crucially, we’ve learned the importance of transparency and openness. You can really progress by listening to user feedbackTwitter Logo and using it to inform design decisions.

Drubbbler will keep on evolving. And user feedback will be a fundamental part of that evolution.

Collaborate in real time on a digital whiteboard