This is the story of how we built Midnight, the dark theme Sketch plugin. It is the story of the challenges we faced and the lessons we learned, along with some metrics and how it will be sherlocked with the release of macOS Mojave and Sketch 52.
Challenge accepted!
We had been making Sketch plugins to speed up our personal work and were always inspired by other high quality plugins like Runner and Sketch Measure. After reading a thread on Spectrum.chat about the lack of dark theme support in Sketch, we spent an afternoon researching how to solve this problem with a plugin. We ended up with a preliminary plugin which darkened all NSView objects inside a Sketch document window, based on an experiment by Guilherme Rambo.
We found that many Sketch users were thrilled to see what we had managed to do in just a few hours of work, so we decided to spend 2–3 hours on this every day to try and build it into a product.
Support and Motivation
As we made progress on the plugin, we regularly updated the thread on Spectrum. The purpose of this was twofold — we wanted to let people know what we were up to, and we wanted to remain open to suggestions that would help us understand what they truly wanted. We were lucky to get invaluable support from Mathieu Dutour of Bohemian Coding to find the correct development methods. There were times when we were stuck for days on difficult problems and thought about giving up on the project, but we received tremendous encouragement from others on the forum and that pushed us to keep trying.
A huge thank you to everyone who posted a positive note on the Spectrum thread and kept us motivated. All of you really have no idea how much it helped us! 🙏
Themes and Custom Icons
At first, we assumed that inverting the UI to a darker color would be a good enough feature for the plugin. To understand how dark or light the UI should be, we created four themes at different levels of darkness. We put those screenshots in a survey, and asked everyone on Spectrum to vote for their favorite. But survey results showed no single winner, and we realized we had to give customers the option to choose the level of darkness they required. We decided to launch with the most popular option from the survey and introduce a darker theme in the next update.
We also asked respondents for open-ended feedback in the survey. We got some fantastic feature requests, but the most common one was to have custom toolbar icons to match the darker theme. After some research, we found a way to customize the icons, so we included it as a feature.
Develop First, Design Later
Interestingly enough, we actually reversed our development process when building Midnight. Instead of designing a mockup of the themes and then trying to develop it using designs as reference, we first developed the plugin using random theme colors. We then gave our designer a json file so she could modify color values to achieve the desired result. This helped us build faster because we didn’t have to wait for designs or specs from our designer, and she didn’t waste any time designing something which would never be developed.
Another benefit of this process was that we had externalized the theme colors and settings from the start. This made it easier to add more themes in the future using additional json files.
Advanced Features
Before working on Midnight, we had created some personal plugins to help us work faster. As we came to completing all the themes we thought about including some of our older experiments in the plugin, even though they were not directly related to themes. Two of the most popular advanced features we added were Indent Guides and Layer Tags. Instead of making these separate plugins, we wanted our customers to enjoy these bonus features as perks for supporting us.
Free or Paid?
We learned from one of our mentors that, “The price of a product should be based on what most people are willing to pay for it. How easy or difficult it was to build is irrelevant.”
So, we dropped our initial thought of charging $5, and chose to use the Spectrum thread to ask our future customers how much it was really worth to them. After evaluating the responses, we found the sweet spot at $8. There were some who thought that was too expensive while others who thought it was a steal for the value it provided.
This became one of the most controversial decisions we made and it even prompted a thread on Designer News titled “Are designers stingy?”.
7 Days Trial
Near the end of our beta testing period we found that some users had tried the plugin for some time but then stopped using it, even though they did not find any bugs or issues. When asked why, they said that after trying the dark theme they realized they actually preferred the default colors. Based on this feedback we understood that most customers want to test the plugin before buying it. So we delayed our launch date and spent an additional week adding a trial period for the plugin. This helped us minimize refunds (only 8 purchases were refunded) and gave customers more confidence in buying a license at the end of their trial period.
Launch 🚀
By December 20th we had completed all plugin development and the marketing website was ready with Stripe integration to purchase licenses. Final testing was also done and we were ready for launch. But this was a bad time to launch because the holidays were coming up. If customers started their trial period before the holidays, it would expire when they returned to work! So, we delayed our launch again until after the holidays and launched on January 2nd.
On launch day we sent out an announcement email to all those who had requested to be notified about our launch. We also posted on Product Hunt, but our post was buried due to bad timing and we did not get a great response. Still, we sold over 350 licenses in the first week and we were more than happy with the response!
Free Licenses
As a small team, we depended on our customers to help us find bugs or performance issues on devices with different configurations. We made an internal rule that we would send a free license to those who reported valid bugs or helped us test beta builds which fixed known bugs. It was the least we could do for customers who went out of their way to help us improve our product.
When most of the issues were already reported or fixed, we created a quota of 15 licenses per week to give away to students who asked for a discount, to people who had issues with our payment system, and some to people who were just polite or supportive when communicating with us.
3rd Party Plugins
We had initially decided not to support 3rd party plugins as it was too complicated with many versions of Sketch and versions of each plugin that would require maintenance. After we launched, support for other plugins became our most requested feature. In this case, our customers had made the decision for us, so we went ahead and added unofficial support for the most common plugins based on the requests. It ended up being the most difficult part of the plugin to maintain, but luckily our customers understood the limitations we faced.
Stripe or Gumroad?
To keep our overhead low, we chose to use Stripe as our payment processor. It was easy to set up and got us off the ground in no time. In the first week of launching the plugin, we started receiving messages from customers in the EU about VAT invoices. We had no idea what this was and after some research found that it was our responsibility to collect VAT from customers! 😱 We went back to comparing our options for payment processing and found that Gumroad solves this by automatically collecting VAT on the seller’s behalf. So we spent the next week changing our entire payment and licensing system to work with Gumroad. If Stripe had provided automatic VAT calculation, it would have been the perfect choice for us. But Gumroad ended up being the better option in this regard.
Competition
In late January, we were dealing internally with bug reports, feature requests, payment processing issues, etc., when we found out that we may soon be facing some competition.
Utah-based design firm, Reform Collective, had announced they were also working on a dark theme Sketch plugin. It is difficult to explain the mixed feelings of pride, fear, and uncertainty when one of the coolest agencies in the world, one that we had followed and admired for years, decided to compete with us! We thought this was the end of Midnight. Three of us working part-time would never be able to compete with a big agency with so many more resources.
After our initial dismay had subsided, we decided to continue putting our best effort into Midnight and see what happens. We took a closer look at the images from their announcement and found that they were mockups, not actual screenshots. We knew they would have an entire development cycle to go through before launching, so we decided to use that time to our advantage. We took some of the subtle design cues from their mockups, and borrowed their idea of including an ultra-light theme. 🙈
We released an update within two weeks of RC’s announcement and received an overwhelmingly positive response to the new design changes and the light theme. Unfortunately, as we later found out, their plans were stalled due to development issues and their plugin never made it to market. In this case, competition had helped us improve our product and our customers benefited the most.
Management and Customer Support
Building and updating the plugin was only half of the work in this project. The other half was to build an internal system to provide customer support and easily resolve issues related to licensing. We used an AWS serverless architecture, with Lambda functions to perform common tasks. Then we linked those functions to slash-commands in a custom Slack Bot to quickly fetch information about a customer, add or reset licenses, and the most common task of resending license keys to customers who couldn’t find their license. This system helped us provide fast support from anywhere using Slack on our phone, and our customers appreciated the short response time.
Sherlocked 😦
We had started working on the next update for Midnight, which included a theme editor and a new ultra-dark theme. Unfortunately we had to cancel those plans.
On June 4th, Apple announced that macOS Mojave would include dark mode as a system-wide feature. Sketch team was also quick to announce that this would enable them to natively support dark mode. We knew this would happen eventually since some of the API to enable a dark mode was already available in High Sierra and we were using it ourselves in the plugin.
Later, we received a private build of Sketch 52, and on inspecting the source we found that internally almost every aspect of the UI had been updated. None of our existing plugin code worked reliably anymore. Supporting our themes in Sketch 52 would mean redoing the entire plugin from scratch, while competing with a native Sketch feature!
This led us to cancel our plans for the next update and announce that 51.2 would be the last version of Sketch we support. We made the announcement as early as we could and put up a 50% discount on the plugin. Customers who still wanted to buy the plugin had to do so knowing that it will not be supported in future versions.
We decided our next step would be to create a free plugin for Sketch 52, containing most of the advanced features from Midnight, but without the themes. Customers who had bought the plugin could continue to use all its themes and features, without problems, up till Sketch 51.x.
Metrics and Analytics
We are happy to share our sales metrics for others making similar products to understand the market.
We are not a large company or startup trying to get rich from this. The profits from Midnight went towards little things like drumming/dance lessons for our children, short family trips, and additional lattes on our most stressful days. It helped us justify the evenings and weekends we sacrificed to create, maintain, and provide support for the plugin.
A huge thank you to everyone who tried the demo, and even bigger thanks to those who purchased a license! 🙏
Total licenses sold : 6590
Free licenses : 220
Costs incurred in 8 months (rounded):
- Web Hosting + Bandwidth (Firebase) : $80
- Serverside processing + Database (AWS) : $220
- Payment processing (Stripe + Gumroad) : $3820
- Affiliates : $290
- WebFlow subscription : $170
Themes by popularity:
- Designer (medium dark)
- Night Owl (dark)
- Lark (ultra light)
Advanced features by popularity:
- Custom canvas darkness
- “Collapse All Groups” button
- Indent guides
- Layer tags
Most common support queries:
- License related issues (over 80%)
- 3rd party plugin support (mostly Anima)
- Bugs and performance issues
10 Lessons
More than profits, Midnight gave us a journey of ups and downs, and we learned some great lessons.
- Build something for a passionate community, validate your progress often, and people will support you.
- Don’t be afraid to charge a fair price for your efforts.
- Some people will always complain about your pricing. Talk to people to understand the reasons behind their opinion, but instead of lowering your price, be generous with discounts or free licenses for customers who have a hard time paying.
- Spend extra time on features that will save users from having a negative experience with your product.
- Good branding gives customers more confidence when buying your product, so make it as appealing and transparent as possible.
- Timing is key when posting on Product Hunt. Research the best time to post based on your timezone, or use their Ship feature for best results.
- Never let competition get you down. Focus on your strengths, learn what you can from your competitors, and keep moving forward.
- Automating parts of your process and building internal tools to manage your products provides incredible efficiency and also affects customers by helping you resolve issues faster.
- Always be realistic. If your product’s existence depends on another product, have a plan for when the host product makes the core features of your product available natively.
- Document and share your process to help other creative makers learn from your mistakes and join you in celebrating your wins.
Thank you for reading. If you are also building a product and found our story useful, please 👏 and share it with your friends and followers.
