Kieran Black
Kieran Black
velositey@2x.png

Velositey

Velositey

header@2x.png
 
 

Intro

Velositey is a Photoshop plugin that assists in prototyping, creation and development of a website design in Adobe Photoshop. It has been downloaded over 70,000 times and featured on Creative Bloq, Webdesign Depot, Sidebar & Hacking UI. Dan and I released two versions of the plugin, one with all of the features and one with less features but more templates to work with.

 

The Challenge

The design team that Dan and I were a part of was growing rapidly. Although we had experienced graphic designers on the team, when it came to web design, there was much to be desired. Problems like design and development handoff, layout grids, font sizes, common design patterns were plaguing the productivity of the designers. Dan and I set out to research this problem and create a tool that would help our team.

 

My Role

Dan was responsible for conducting user research, designing, marketing and website development. I was also responsible for conducting user research, coding, packaging and scripting Photoshop using Javascript Extended.

 

Think

We conducted ethnographic research by watching the design team and seeing what they do and how they interact with other members of the larger development team. This formed the baseline questions we put into a survey to clarify if the broader market of designers were facing the same problems.

Once the problems had been surfaced through the preliminary research we thought we could leverage the designers we had to help design the app. Participatory design allowed us and the rest of the design team to better communicate potential features to solve the design and handoff processes. 

 

Make

Based on the research we were able to create a wireframe of what functionality and interaction model the plugin would have. Dan then got started on creating the visuals for the plugin. Since I had knowledge in creating plugins previously, the plugin became the prototype. It was created using HTML, CSS, JS and JSX. Separating the duties for design and development of the plugin allowed us to iterate very quickly and the main bottle neck was bug fixing the scripts that were used. 

We decided to launch the plugin as a free download from our site. The plugin was also put on GitHub to allow other developers and designers to contribute. Dan created a marketing landing page for users to download it in exchange for their email address for our design newsletter and updates. We did this so that we could potentially launch paid plugins and resources later on (we did and it worked).

 

Check

A couple of weeks passed with little to no fanfare until one day we woke up to 1,000 downloads in one 6 hour block. We excitedly checked Google Analytics to see who was linking our plugin and site and we found out that we had been picked up on a top Photoshop plugins article from Webdesign Depot. Velositey gained huge traction and over the next couple of days we grew to 5,000 downloads. With all of this attention we got feedback on Twitter and GitHub that would help us to create version two. We conducted some usability lab studies with the in-house team where we gave each person a set of scenarios that lead to tasks. This, coupled with the feedback from external sources led us to make improvements and fix bugs. We found a lot of people used Velositey for wireframing, which wasn’t our intention, but we realised the market really embraced us as a quick tool for prototyping and wireframing.

 

Version 2

We looked at the app, what it was used for and how it could be improved. Our users were wanting more templates to wireframe with, a more focused tool set and a smaller panel to take up less room. Velositey was stripped down and we removed two thirds of the feature set. As a side note, this increased both the speed of the app and user satisfaction. Website for Velositey v2 is here.

 

What I learned

Velositey was a passion project for me that garnered great success for both Dan and I. Overall, it took about six months of planning, research and execution and throughout that time I learned a few things:

Designing for designers is quite difficult — designers are both the best and the worst users to create a product for.

Open-sourcing a project on GitHub is helpful — getting people to assist you where you fall short really made Velositey what it was.

Using an email as payment was an easy way to grow a following — I used this technique on countless other projects.

Building on an unsupported platform has its downfalls — Adobe has an almost non-existent support system for developers of Photoshop plugins. Unfortunately, it was an uphill battle the entire time.

 

 

 

Final Design