Tweakr.io is a web based software application to streamline the feedback process of designers, agencies and their clients. It promotes asynchrony feedback loops that provide the necessary simplicity and adaptability for both designers and clients. Based on the concept of WeTransfer users can effortless upload files on Tweakr.io and share a link with clients or workmates. Once the link is opened feedback can be added by clicking on the referred area.

📖 Continue reading if you are

interested in the product design process that lead to Tweakr.io

🕹 Try out our live demo

and see for yourself how Tweakr works. Click here →

😺 Take a look on our Producthunt page

and give us your upvote like 300 others before. Click here →

🖥 Watch a review about Tweakr.io on Youtube

by the design influencer Chetan from Design Pilot

The story of Tweakr.io

This case study includes the story of how Tweakr.io evolved from a group of motivated kids to a software launch with thousands of users within a year of work while going to school. We’re essentially learned product design on the fly, how we did this is structured in:

1. an introduction, giving some background on why

2. the challenge we were trying to solve

3. the solution, how we build our first product

4. the impact of this 1-year journey in our year of graduation

You will read about different design approaches we’ve tried out and how intensive user research led to many product iterations but eventually resulted in a product used by thousands. Don’t hesitate to reach out via mail or LinkedIn if you have any additional questions or requests.

Introduction

The starting point of Tweakr.io was a group of friends who wanted to make something together. Studying at a high school for media design we already went through several design projects but were eager to make something big, something with more impact than a good grade at school. We wanted to build something people would actually use and had long nights thinking about issues we wanted (and could) tackle. We eventually settled down on the topic of the iterative visual feedback process, a topic we have experienced ourselves working together on prior projects.

I lead the whole product and interface design process and supported Tobias Micko mainly focusing on product and service design strategy as well as UX research and QA testing. Clemens was in charge of the visual brand, design assets and community building and Antonia Beck acted as an interface between design, business, development and the users and Tobias Gruber was the lead developer (backend and frontend).

Challenge

Starting into the design industry ourselves we’ve noticed common practices and workflows when creators went through feedback loops. A crucial part of design that was secretly moaned about by almost every designer from all levels of seniority. They are not good at phrasing their request, they don’t even know what they want themselves, it’s such a lengthy process to meet up with every stake holder to finally agree on the next step. It is obvious that this attitude had longterm effects on the stress level of both sides and the relationship with otherwise great clients.

How might a product look like where iterating design drafts could be reviewed by all involved parties and without forcing a new workflow on anyone? How could we streamline the visual feedback process and provide transparency of the objectives from designer and client?

Solution

Tweakr.io is a web platform for designers to streamline the visual feedback process with internal and external collaborators. Designers can upload different drafts, share a link to the workspace with collaborators and ask for their input. Collaborators can pin feedback on the draft and thereby put visual context to their notes. Notes can be liked to agree, commented to provide additional perspective or ask for clarification and checked as done. Once the designer implemented all change requests she can upload a new version and Tweakr.io informs all collaborators that their input is requests once again.

How we were working

Looking back the design and development of Tweakr.io went through 3 phases:

1. Ideation and prototyping was all about finding the right angle towards the problem we were trying to solve. We knew that visual feedback loops were messy and frustrating and we were trying to make that different. This first phase lasted around 3 months and consisted of exploring the industry, talking to designers AND their clients, brainstorming and sketching different approaches and discussing them thoroughly. Once it became clear what “making that different” would mean we transitioned into

2. Research and Development. Around that time we moved together into an apartment and transformed our living room into the office we spent many long nights shaping the product. Being limited with our resources we tried to evaluate every step before a feature was handed over to development. Features would be sketched out, the design system would be applied to wireframes which were thoroughly animated to evaluate user flows and produce a guideline for frontend development. In that 4 month time span we’ve also spent a lot of time with copy writing and testing prototypes to evaluate ux and interaction design.

3. The third phase (beta and public launch) was full of up and downs. We connected with local agencies and companies, watched them use our product, changed the product, gave access to a few more designers, pitched Tweakr.io on startup conferences, built a Twitter community, won awards and launched two weeks before our high school graduation.

Legend — a definition of words

A creator uploads one more more files to Tweakr.io and thereby creates a workspace

• A collaborator can access the workspace of a creator with a shared link. Creators and collaborators have (almost) the same rights on a workspace, only the deletion of a workspace is limited to the creator.

• A workspace is defined by the link that can be shared with collaborators and consists of one or more files that can be accessed.

• A file is visualized by a small preview in the sidebar of Tweakr, that’s also where additional files (f.e a new version of a draft) can be uploaded at any point of time.

• A feedback note can be pinned or dragged onto a file or page to give feedback with visual indication (pin) what the note is referring to.

• Pages: A PDF file can have many pages that can be clicked through. If a PDF file has feedback notes on different pages a page number indicates where the feedback is located.

• A comment can be added to feedback notes to ask for clarification or communicate an opinion about a feedback note.

Generating leads

When developing Tweakr.io we’ve spent a big amount of time making sure to define out target audience and get in touch with them via meetups, conferences and building up an online community on Twitter and Product Hunt.

We were building a platform for the feedback process. In development we focused on the internal feedback process when several designers are working together on a deliverable (vs. external feedback given by several stakeholders from the client).

In out communication efforts we underlined the simple, fast and uncomplicated workflow our service provides. Over time and user feedback we also began to realize its opportunities for the asynchrony, remote design process and saw many users adapt Tweakr.io to broader use cases. We had built a tool so simple and non invasive to ones workflow that users would start using it in all kinds of ways.

Converting leads

As Tweakr.io is a tool that stands out by the simple and sleek way it works we’ve put great effort into a fast transition from hearing about the product and giving it a first try. We implemented a “live demo” as the main CTA on the landing page to immediately engage potential users into the outstanding experience and make the potential of Tweakr.io tangible. Once a lead experienced the main features in the demo workspace a pop-up encourages to try the same with your own files and thereby decreasing steps to become a converted user.

A non invasive platform

It’s been already mentioned: Tweakr.io is designed with the goal to be non invasive to delight with not existing marketing emails, newsletter pop ups, ads and even mandatory registration. In todays age of the internet that was one of our key factors to set us apart as the sleek tool, free of distractions we wanted to build.

Making it easy to adapt and use

Everyone has a different way of working and organizing their information. There’s not a standard workflow of giving and receiving feedback and we sure as hell didn’t want to make our users adapt to a workflow we’d dictate. We purposefully designed all aspects of Tweakr.io (UI, icons, copy text, etc.) in a way that would leave it to the user to decide how they use certain features.

“Making it easy to adapt and use” became one of our biggest motions when evaluating and designing new features. Creators can upload a big variety of file formats and share the link via the communication channels they already use. Collaborators can pin comments without entering their email address.

Tweakr.io seamlessly integrates into ones workflow without requiring to adapt to a new tool. That is fundamentally different to many competitive tools that are integrated into a software (XD prototyping feedback, inVision feedback, add notes to Google Doc, etc.).

Setting objectives

Tweakr.io provides the possibility to add a topic, a general description to every file. That feature can only be accessed by the workspace creator and can be used to set objectives for feedback, state the version or being left empty at all.

We’ve originally intended to differentiate between “general feedback” (about the whole file) and “specific feedback” (pinned on the image). Evaluating different versions of that thought via product testing showed that users would either use one way or the other to give feedback, the combination/differentiation was not necessary to allow different thought processes as users where dragging an area across the whole image or adding a note in the corner to express general thoughts.

Giving feedback with context

One major pain point of the remote feedback process is the context of a comment. When sending an image via mail or messenger the replies usually look all the same: a long block of text starting with something like “looks great, at the thing in the left corner is a shadow bug”. It takes effort to describe the context in text for both giver and receiver. That’s why the core feature Tweakr.io is based on are feedback pins. Collaborators can click on the area they are talking about to give comments with visual context. Additionally one can drag an area to reference to a whole section of the file. The big benefit: When other collaborators join the workspace they have an overview about what parts something has already been said about and add comments to share perspective. The feedback from different contributors is collected at one place.

The asynchrony feedback loop

Over time and user feedback we also began to realize its opportunities for the asynchrony, remote design process. To support that motion we adapted the email notification logic about new changes in a workspace.

Creators access their email address when creating a new workspace and get notified 3 hours after an invited contributor finished pinning feedback notes (inactivity). As contributors can access a workspace without stating their email address Tweakr.io asks them after their first comment if they want to opt into the email updates about that workspace.

But already the general logic of Tweakr.io supports the asynchrony design process. There is only 1 place with all feedback notes everyone has access to. No “_v12-feedback.pdf” in a big email thread. Everyone is always up to date with the latest version, can see and agree to comments from others or ask for specification in a comment.

Designers are hard to satisfy

Building software for the design community we had to set very high standards. Decent interaction flows are nothing ordinary in todays web, when targeting designers we had to overdeliver with outstanding visuals, little details, UI animations and such like. Our love for details became one of our USPs with many users excitedly talking on Twitter and Product Hunt about about the aesthetic simplicity of Tweakr.io.

Things that didn’t make it

As previously mentioned we were under tight time constraints building Tweakr.io. That also meant cutting features that would have otherwise got implemented. Here are some of them that already have been prototyped and tested:

• A Mac application meant to directly upload screenshots to Tweakr.io (removing the step of exporting a file to upload it on Tweakr.io).

• An Adobe XD plugin to directly upload a workspace to Tweakr.io from your working software

• A version history to compare old and new variations and a logic to transfer unresolved comments to another file when uploading an updated version.

• A drawing pen to add additional context when pinning a feedback note.

• Adding attachments to a feedback note to suggest dofferent solutions to a problem or give additional context to a comment

• A mobile version to give quick feedback on your way.

  
  

Impact

The final product that launched in June 2019 a week before graduating from high school. In the weeks after the launch Tweakr.io gained a lot of traction with thousands of users worldwide using our tool and still to this day we have a growing number of agencies and freelancers using the service as it was shipped back in 2019.

Tweakr.io streamlines visual collaboration making the process faster and more precise for thousands of users involved. Nobody has to change the way they work, one can opt into Tweakr.io to use its’ simply but effective features without additional effort.

After shipping Tweakr.io the five of us stopped working on the tool after high school graduation to explore other aspects and perspectives on the world of design. We grew exponentially as people, won international design and startup awards and made experiences for a lifetime.