From idea to validation in 31 days

Joseph Mueller
Design + Sketch
Published in
10 min readMay 15, 2018

--

We are proud to announce the public launch of Stackswell, a plugin that increases the speed you can design responsively by bringing CSS smarts into Sketch.

How this post could help you
This post chronologically recaps the steps and learnings I took when launching Stackswell. I’m hoping you can use this post as an actionable list of steps you can use to launch your products.

Before you get started
In an effort to prevent launching a product that ultimately doesn’t gain traction with clients, it’s important to make sure your product actually solves an expressed (or unexpressed) problem. For Stackswell, we posted the idea to Designer News to check for product/market fit, before even starting to build the service.

Transparent development
On of my goals for development was to keep the process transparent as I felt it would improve the product and inform future decisions. A transparent development process for Stackswell means that we can build ways for potential clients to give their feedback directly into the sign-up process, we can openly share the status (phase of development) of the project on the website, can have a beta tester program and we regularly share milestone announcements on Twitter.

March 3rd
I was having a tough time communicating the idea of the plugin. Since I’m a visual person I figured it would be easier to just show what the plugin would do rather than tell. I created an animation that would illustrate how the plugin would work that I could reference when I described what the plugin would do. I also figured if I did the animation in a cool way I could use it as a marketing piece and use it on the website as well.

The last thing I did was make an announcement list of deliverables:

Announcement Todo List:
Animation to help communicate idea
☐ Get developer onboard
☐ Find out if anyone has already built my plugin
☐ Design plugin UI
☐ Buy domain name
☐ Set up new email addresses
☐ Design website
☐ Design welcome email
☐ Build website
☐ Capture emails from website
☐ Build welcome email
☐ Setup website analytics
☐ Build Typeform to capture feedback
☐ Set up Twitter account
☐ Make announcement launch list
☐ Set up a reusable emails for beta testers feedback
☐ Write Medium post to explain concept in-depth

March 8th
Get developer onboard
Find out if anyone has already built my product
Design plugin UI

Spent some time researching the official Sketch Plugin page, searched around with google and asked on forums to see if anyone else out had already solved this problem. No one is really addressing Responsive Type or Smart Symbols, I did find two plugins who were addressing spacing issues in Sketch (Paddy and Anima’s Stacks) but neither were built to for responsive designs. I also worked on the UI designs for the plugin. This helped me understand what the potential scope of the project would be and really think through how to solve the problem in the best way.

I have a very good friend who is an all-star developer. We are always cooking up ideas, thinking them through and building them out. I pitched the idea to him to see if he would be onboard to develop it. He said yes! I’m super grateful to be able to have someone I can bounce ideas off of, someone I like working and with who has my back.

Takeaways:
It’s important not to scrutinize ideas in brainstorming. Once you decide to move on your idea you have to examine it from different directions. Research and early client conversations will ensure you are building a product that there is a need for and hasn’t already been solved.

March 10th
Buy domain name (I already have hosting)
Set up email addresses with the new domain name
Start designing the splash page

I decided on the name Stackswell and purchased the domain from Dreamhost for $39.95. This was the first time I spent money on the project. After buying the domain name I dove straight into development for the website but without a strong design I wasn’t happy with how things were turning out.

Takeaways:
When it comes to small touch points such as email addresses I feel having those set up makes a huge difference with consumer creditably. I’ll make sure an email for support and a general inquiry are also set up.

I learned that I cut corners when I live develop. My process was more fruitful when I stepped back and did layouts in sketch. Much faster and higher quality.

March 14th
Proactive Outreach

I liked the idea of starting Stackswell with a transparent development plan in hopes of having a more invested community around the product. I posted to Designer News asking what people thought about the plugin idea. I wasn’t worried about people stealing the idea. At that point I was thinking if someone else wants to build it, let them. In the end the Designer News post payed off great dividends The post got 23 upvotes and 11 comments a decent response. On a side note Designer News is a really great community. I was pleasantly surprised how nice and supportive the community is there.

Takeaways:
I think this was one of the coolest things to trying to build the plugin transparently. One of the comments from Designer News suggested a different way to think about how we implemented a feature which made the development much easier and the product better the end. This was a win on multiple levels and in hindsight I probably should have done this sooner.

March 16th:
Finish design of the website

It took me a few days of working after work here and there but I finally finished the designs. Now time to quickly build out the site.

March 17th
Set up social sites and touch points
Set up website analytics
Hook up MailChimp to website to capture emails of interested people
Build automated Welcome email
Build form to capture feedback

Looking back this was my favorite day and most productive of the project so far. I worked 9 hours on the 17th. I got up in the morning and developed the landing page and hooked up a way to collect the emails of interested people.

Once the site was all set up coded the automated ‘Welcome’ email. I was guessing if clients were excited enough about an idea they would want to give feedback as well. With this in mind I tied a form in the email so I could collect opinions about how much they felt was fair to spend and if they wanted to be a beta tester. The answers I got back helped me immensely! I could feel at ease making decisions because they were based on data and I wouldn’t have to guess what my users want.

Once the emails had been knocked out I set up a Twitter account and laid out images for meta tags and a profile to match the site.

Data is so important for a product to see how people interact with your site - both in where they are referred from and how much time they spend on the site. I set up accounts with bit.ly and Google Analytics so I could compare the data against each other.

Last but not least I started writing a long form post so I could link to it from the website incase a potential customer wanted a deeper dive into how the app could benefit them.

At this point we still hadn’t written a line of code for the product.

Takeaways:
Make sure your site messaging is as clear and direct as possible. You need to have your elevator pitch down by this point.

It’s so important to have small touch points designed and consistent. Meta tags, Open GL images, favicons, social profile pictures and email branding are just some of the touch points that need to be polished. Cohesion across platforms creates trust in your brand, makes the brand feel larger and indicates to the user what quality to expect with the final product.

You can skip MailChimp’s double opt in process by linking their api with this code. I used this set up on numerous projects in the past and it worked fantastic. By skipping their double opt in capture emails easier and honestly it’s a better experience for the user.

I Spent $30 on MailChimp to remove their branding from emails. I feel like any outside branding on top of your product is worthing getting removing. This is a personal preference and you could skip it if you want to save the money.

March 20th
Make announcement list of blogs and influencers

I made a list of actions to take after the post goes live. I wanted to be ready and try to amplify the amount of exposure the plugin got.

Here’s what’s on my launch list:
• Find people of influence on twitter
• Find blogs of influence
• Joined niche forums
• Tweet link to article
• Update website with article link
• Email influencers

Takeaway:
I could do a lot more when it comes to this launch list. The big takeaway for this section is gather resources and explore your niche. Have an actionable list and be ready for launch. In the end I skipped emailing and messaging influencers. I’m not a big fan of cold emails but they aren’t totally a bad thing. I tweeted the article but didn’t have many followers at the time so not much progress there. The article was accepted to two different blogs, that drove a huge amount of traffic and engagement.

March 24, week four
Signed up for design communities

I joined a few Sketch forms and poked around, answered questions, and liked things. Probably not greatest use of time as a growth method but nice way to get involved with the community. It was super cool to get the first organic signup from a member of a forum.

March 27th:
Submitted the long form post to go live on Sketch App Sources

I wanted a Tuesday launch, so I published the post at 6am to make sure it would be at the top of Sketch App Sources when everyone got to work. When I checked the blog to see if I had done it correctly my post didn’t show up. I had assumed incorrectly about my posting privileges to the blog. In retrospect I didn’t have posting privileges and when I submitted my article it had to be reviewed then queued. The post went out a week later and I ended up losing a week due to this assumption.

Takeaway:
Mistakes will probably happen in your project, it’s tough to prevent them. But by building in flexibility into launch dates it can reduce the stress of the mistakes. Be sure to communicate with all persons associated with your project to understand fully how each process works.

April 2rd:
The post went live on Monday evening and it put me in a great position to be the first spot article on the site for Tuesday morning. Once I saw that the post went live I submitted the article to Sidebar. I was floored by how many people read the post then came to the site and joined the wait list to be notified when the plugin was released. I am truly grateful to both Sketch App Sources and Sidebar.

Takeaways:
I was very fortunate and submitted the article to two separate blogs and was accepted to both. I’m still reaping the benefits and dividends from a tight feedback loop. Setting up a questionnaire and input to capture emails has built my potential client base up. The first three days the post was live we got over 1,000 sign ups!

April 3rd:
Linked Medium article on Designer News
Did some twitter callouts to Sidebar and Sketch App Sources

I launched into the rest of my announcement list from above. I posted to the forms I felt like were a good fit, updated the site and sent any remaining emails.

Wrapping Up
Transparency and communication have brought a lot of value to the project because it has provided us with more insight into our client’s needs, can help set expectations and are starting to grow a base through word of mouth referrals. Overall, early and open communication has enabled me to build a better product.

I feel confident there are people who want to use and are willing to pay for Stackswell. Now it’s time to improve on the plugin and make it better. I set up another feedback loop so clients who purchased the plugin can tell me how it worked for them, and what other features they would like to see.

To me the easy part of a plugin is launching it. What scares me is the amount of work it could take to support it. I took some steps before launch to get our “Client Operations” in a good place. I signed up for Zendesk and pre wrote a few template emails. I also built a FAQ page and created some how-to videos. My main goal is to have all the resources out publicly so a client can solve the problem on their own.

Summary

At the time of writing this I collected:
+1,500 mailing list sign-ups
+6,800 reads
+1,600 claps

Money I spent to date: $234.95 Total
• $39.95 Domain name, Dreamhost
• $180.00 8,000 Unbranded Emails, MailChimp
• $15.00 SSL Certificate, Dreamhost

Free products I used for the announcement
TypeForm — Used to ask potential clients and beta testers questions.
Bit.ly — Added layer of source tracking
Google Analytics — Source tracking
Medium — In depth posts on the decisions we made for transparency
Twitter — Quick posts to keep clients up to date
Dropbox — To hosting files testing files and image sharing
Vimeo — To host demo videos
MailChimp — Not free for me but could be if you leave their branding

Good luck out there,
Joseph

--

--