Esta es la historia de cómo creamos Midnight, el plugin Sketch del tema oscuro. Es la historia de los desafíos que enfrentamos y las lecciones que aprendimos, junto con algunas métricas y cómo se verán bloqueadas con el lanzamiento de macOS Mojave y Sketch 52.

¡Desafío aceptado!

Habíamos estado haciendo complementos de Sketch para acelerar nuestro trabajo personal y siempre nos inspiramos en otros complementos de alta calidad como Runner y Sketch Measure. Después de leer un hilo en Spectrum.chat sobre la falta de soporte para temas oscuros en Sketch, pasamos una tarde investigando cómo resolver este problema con un complemento. Terminamos con un complemento preliminar que oscureció todos los objetos NSView dentro de una ventana de documento de Sketch, basado en un experimento de Guilherme Rambo.

Nuestro primer experimento

Descubrimos que muchos usuarios de Sketch estaban encantados de ver lo que habíamos logrado hacer en solo unas pocas horas de trabajo, por lo que decidimos pasar de 2 a 3 horas en esto todos los días para intentar convertirlo en un producto.

Apoyo y Motivación

A medida que avanzamos en el complemento, actualizamos regularmente el hilo en Spectrum. El propósito de esto era doble: queríamos que las personas supieran lo que estábamos haciendo, y queríamos permanecer abiertos a sugerencias que nos ayudaran a comprender lo que realmente querían. Tuvimos la suerte de obtener un apoyo invaluable de Mathieu Dutour de Bohemian Coding para encontrar los métodos de desarrollo correctos. Hubo momentos en los que estuvimos atrapados durante días en problemas difíciles y pensamos en renunciar al proyecto, pero recibimos un gran aliento de otros en el foro y eso nos empujó a seguir intentándolo.

Comentarios en Spectrum.chat

Un enorme agradecimiento a todos los que publicaron una nota positiva en el hilo de Spectrum y nos mantuvieron motivados. ¡Todos ustedes realmente no tienen idea de cuánto nos ayudó!

Temas e íconos personalizados

Al principio, supusimos que invertir la interfaz de usuario en un color más oscuro sería una característica lo suficientemente buena para el complemento. Para comprender qué tan oscura o clara debería ser la IU, creamos cuatro temas en diferentes niveles de oscuridad. Pusimos esas capturas de pantalla en una encuesta y les pedimos a todos en Spectrum que votaran por su favorito. Pero los resultados de la encuesta no mostraron un ganador único, y nos dimos cuenta de que teníamos que dar a los clientes la opción de elegir el nivel de oscuridad que necesitaban. Decidimos lanzar con la opción más popular de la encuesta e introducir un tema más oscuro en la próxima actualización.

Cuatro temas iniciales de nuestra encuesta.

También les pedimos a los encuestados comentarios abiertos en la encuesta. Recibimos algunas solicitudes de funciones fantásticas, pero la más común fue tener iconos de barra de herramientas personalizados para que coincida con el tema más oscuro. Después de investigar un poco, encontramos una manera de personalizar los íconos, por lo que lo incluimos como una característica.

Iconos de barra de herramientas personalizados

Desarrollar primero, diseñar después

Curiosamente, en realidad invertimos nuestro proceso de desarrollo al construir Midnight. En lugar de diseñar una maqueta de los temas y luego tratar de desarrollarla utilizando diseños como referencia, primero desarrollamos el complemento utilizando colores de tema aleatorios. Luego le dimos a nuestro diseñador un archivo json para que pudiera modificar los valores de color para lograr el resultado deseado. Esto nos ayudó a construir más rápido porque no tuvimos que esperar los diseños o las especificaciones de nuestro diseñador, y ella no perdió el tiempo diseñando algo que nunca se desarrollaría.

Otro beneficio de este proceso fue que habíamos externalizado los colores y la configuración del tema desde el principio. Esto hizo más fácil agregar más temas en el futuro usando archivos json adicionales.

Características avanzadas

Antes de trabajar en Midnight, habíamos creado algunos complementos personales para ayudarnos a trabajar más rápido. Cuando llegamos a completar todos los temas que pensamos incluir algunos de nuestros experimentos más antiguos en el complemento, a pesar de que no estaban directamente relacionados con los temas. Dos de las funciones avanzadas más populares que agregamos fueron las Guías de sangría y las Etiquetas de capa. En lugar de crear estos complementos por separado, queríamos que nuestros clientes disfrutaran de estas características adicionales como beneficios por apoyarnos.

Etiquetas de capa y guías de sangría

Gratis o de pago?

Aprendimos de uno de nuestros mentores que, “El precio de un producto debe basarse en lo que la mayoría de la gente está dispuesta a pagar por él. Lo fácil o difícil que fue construir es irrelevante ”.

Entonces, abandonamos nuestra idea inicial de cobrar $ 5 y optamos por usar el hilo Spectrum para preguntar a nuestros futuros clientes cuánto valía realmente para ellos. Después de evaluar las respuestas, encontramos el punto óptimo en $ 8. Algunos pensaron que era demasiado caro, mientras que otros pensaron que era una ganga por el valor que proporcionaba.

Esta se convirtió en una de las decisiones más controvertidas que tomamos e incluso provocó un hilo en Designer News titulado "¿Son tacaños los diseñadores?".

7 días de prueba

Cerca del final de nuestro período de prueba beta, descubrimos que algunos usuarios habían probado el complemento durante algún tiempo, pero luego dejaron de usarlo, a pesar de que no encontraron ningún error o problema. Cuando se les preguntó por qué, dijeron que después de probar el tema oscuro se dieron cuenta de que en realidad preferían los colores predeterminados. Según estos comentarios, entendemos que la mayoría de los clientes desean probar el complemento antes de comprarlo. Así que retrasamos nuestra fecha de lanzamiento y pasamos una semana adicional agregando un período de prueba para el complemento. Esto nos ayudó a minimizar los reembolsos (solo se reembolsaron 8 compras) y les dio a los clientes más confianza para comprar una licencia al final de su período de prueba.

Lanzamiento

Para el 20 de diciembre habíamos completado todo el desarrollo de complementos y el sitio web de marketing estaba listo con la integración de Stripe para comprar licencias. También se realizaron las pruebas finales y estábamos listos para el lanzamiento. Pero este era un mal momento para lanzar porque se acercaban las vacaciones. Si los clientes comenzaran su período de prueba antes de las vacaciones, ¡caducaría cuando volvieran a trabajar! Entonces, retrasamos nuestro lanzamiento nuevamente hasta después de las vacaciones y lo lanzamos el 2 de enero.

El día del lanzamiento enviamos un correo electrónico de anuncio a todos aquellos que habían solicitado que se les notificara sobre nuestro lanzamiento. También publicamos en Product Hunt, pero nuestra publicación fue enterrada debido a un mal momento y no obtuvimos una gran respuesta. Aún así, vendimos más de 350 licencias en la primera semana y ¡estuvimos más que felices con la respuesta!

Licencias gratis

Como equipo pequeño, dependíamos de nuestros clientes para que nos ayudaran a encontrar errores o problemas de rendimiento en dispositivos con diferentes configuraciones. Hicimos una regla interna de que enviaríamos una licencia gratuita a aquellos que informaron errores válidos o nos ayudaron a probar las versiones beta que reparaban errores conocidos. Era lo menos que podíamos hacer por los clientes que hicieron todo lo posible para ayudarnos a mejorar nuestro producto.

Cuando la mayoría de los problemas ya se informaron o solucionaron, creamos una cuota de 15 licencias por semana para regalar a los estudiantes que solicitaron un descuento, a las personas que tenían problemas con nuestro sistema de pago, y algunas a las personas que eran simplemente educadas o de apoyo al comunicarse con nosotros.

Complementos de terceros

Inicialmente habíamos decidido no admitir complementos de terceros, ya que era demasiado complicado con muchas versiones de Sketch y versiones de cada complemento que requerirían mantenimiento. Después de su lanzamiento, el soporte para otros complementos se convirtió en nuestra característica más solicitada. En este caso, nuestros clientes habían tomado la decisión por nosotros, por lo que seguimos adelante y agregamos soporte no oficial para los complementos más comunes en función de las solicitudes. Terminó siendo la parte más difícil del complemento para mantener, pero afortunadamente nuestros clientes entendieron las limitaciones que enfrentamos.

Stripe o Gumroad?

Para mantener bajos nuestros gastos generales, elegimos usar Stripe como nuestro procesador de pagos. Fue fácil de instalar y nos despegó en poco tiempo. En la primera semana de lanzamiento del complemento, comenzamos a recibir mensajes de clientes en la UE sobre facturas con IVA. ¡No teníamos idea de qué era esto y después de algunas investigaciones descubrimos que era nuestra responsabilidad recaudar el IVA de los clientes! Volvimos a comparar nuestras opciones para el procesamiento de pagos y descubrimos que Gumroad resuelve esto mediante el cobro automático del IVA en nombre del vendedor. Así que pasamos la próxima semana cambiando todo nuestro sistema de pagos y licencias para trabajar con Gumroad. Si Stripe hubiera proporcionado el cálculo automático del IVA, habría sido la elección perfecta para nosotros. Pero Gumroad terminó siendo la mejor opción a este respecto.

Competencia

A fines de enero, estábamos lidiando internamente con informes de errores, solicitudes de funciones, problemas de procesamiento de pagos, etc., cuando descubrimos que pronto podríamos enfrentar cierta competencia.

La firma de diseño con sede en Utah, Reform Collective, había anunciado que también estaban trabajando en un plugin Sketch de tema oscuro. ¡Es difícil explicar los sentimientos encontrados de orgullo, miedo e incertidumbre cuando una de las mejores agencias del mundo, una que habíamos seguido y admirado durante años, decidió competir con nosotros! Pensamos que era el final de la medianoche. Tres de nosotros que trabajamos a tiempo parcial nunca podríamos competir con una gran agencia con tantos recursos más.

Después de que nuestra consternación inicial había disminuido, decidimos continuar poniendo nuestro mejor esfuerzo en Medianoche y ver qué pasa. Echamos un vistazo más de cerca a las imágenes de su anuncio y descubrimos que eran maquetas, no capturas de pantalla reales. Sabíamos que tendrían que pasar por un ciclo de desarrollo completo antes del lanzamiento, por lo que decidimos aprovechar ese tiempo para nuestro beneficio. Tomamos algunas de las señales de diseño sutiles de sus maquetas y tomamos prestada su idea de incluir un tema ultraligero.

Lanzamos una actualización dentro de las dos semanas posteriores al anuncio de RC y recibimos una respuesta abrumadoramente positiva a los nuevos cambios de diseño y al tema ligero. Desafortunadamente, como descubrimos más tarde, sus planes se estancaron debido a problemas de desarrollo y su complemento nunca llegó al mercado. En este caso, la competencia nos ayudó a mejorar nuestro producto y nuestros clientes se beneficiaron más.

Gestión y atención al cliente

Construir y actualizar el complemento fue solo la mitad del trabajo en este proyecto. La otra mitad fue construir un sistema interno para proporcionar soporte al cliente y resolver fácilmente los problemas relacionados con las licencias. Utilizamos una arquitectura sin servidor de AWS, con funciones de Lambda para realizar tareas comunes. Luego vinculamos esas funciones a comandos de barra diagonal en un Slack Bot personalizado para obtener rápidamente información sobre un cliente, agregar o restablecer licencias, y la tarea más común de reenviar claves de licencia a clientes que no pudieron encontrar su licencia. Este sistema nos ayudó a proporcionar soporte rápido desde cualquier lugar usando Slack en nuestro teléfono, y nuestros clientes apreciaron el corto tiempo de respuesta.

Comandos de barra personalizados en Slack

Sherlocked

Habíamos comenzado a trabajar en la próxima actualización para Midnight, que incluía un editor de temas y un nuevo tema ultra oscuro. Lamentablemente tuvimos que cancelar esos planes.

El 4 de junio, Apple anunció que macOS Mojave incluiría el modo oscuro como una característica de todo el sistema. Sketch Team también se apresuró a anunciar que esto les permitiría admitir de forma nativa el modo oscuro. Sabíamos que esto sucedería eventualmente, ya que parte de la API para habilitar un modo oscuro ya estaba disponible en High Sierra y la estábamos usando nosotros mismos en el complemento.

Más tarde, recibimos una compilación privada de Sketch 52, y al inspeccionar la fuente descubrimos que internamente se habían actualizado casi todos los aspectos de la interfaz de usuario. Ninguno de nuestros códigos de complementos existentes funcionó de manera confiable. ¡Apoyar nuestros temas en Sketch 52 significaría rehacer todo el complemento desde cero, mientras compite con una función nativa de Sketch!

Esto nos llevó a cancelar nuestros planes para la próxima actualización y anunciar que 51.2 sería la última versión de Sketch que admitimos. Hicimos el anuncio lo antes posible y pusimos un descuento del 50% en el complemento. Los clientes que aún querían comprar el complemento tuvieron que hacerlo sabiendo que no será compatible con versiones futuras.

Decidimos que nuestro siguiente paso sería crear un complemento gratuito para Sketch 52, que contenga la mayoría de las funciones avanzadas de Midnight, pero sin los temas. Los clientes que compraron el complemento podrían continuar utilizando todos sus temas y funciones, sin problemas, hasta Sketch 51.x.

Métricas y Analíticas

Nos complace compartir nuestras métricas de ventas para que otros hagan productos similares para comprender el mercado.

No somos una gran empresa o startup que intenta enriquecerse con esto. Los beneficios de Midnight se destinaron a pequeñas cosas como tambores / clases de baile para nuestros hijos, viajes familiares cortos y lattes adicionales en nuestros días más estresantes. Nos ayudó a justificar las tardes y fines de semana que sacrificamos para crear, mantener y proporcionar soporte para el complemento.

¡Muchas gracias a todos los que probaron la demostración, y aún más gracias a quienes compraron una licencia!

Total de licencias vendidas: 6590
Licencias gratis: 220

Costos incurridos en 8 meses (redondeados):

  • Alojamiento web + ancho de banda (Firebase): $ 80
  • Procesamiento del servidor + Base de datos (AWS): $ 220
  • Procesamiento de pagos (Stripe + Gumroad): $ 3820
  • Afiliados: $ 290
  • Suscripción a WebFlow: $ 170

Temas por popularidad:

  1. Diseñador (medio oscuro)
  2. Night Owl (oscuro)
  3. Alondra (ultraligera)

Funciones avanzadas por popularidad:

  1. Lienzo personalizado oscuridad
  2. Botón "Contraer todos los grupos"
  3. Guías de sangría
  4. Etiquetas de capa

Consultas de soporte más comunes:

  1. Problemas relacionados con la licencia (más del 80%)
  2. Soporte de complementos de terceros (principalmente Anima)
  3. Errores y problemas de rendimiento

10 lecciones

Más que ganancias, Midnight nos dio un viaje de altibajos, y aprendimos algunas excelentes lecciones.

  1. Cree algo para una comunidad apasionada, valide su progreso con frecuencia y la gente lo apoyará.
  2. No tengas miedo de cobrar un precio justo por tus esfuerzos.
  3. Algunas personas siempre se quejarán de su precio. Hable con las personas para comprender las razones de su opinión, pero en lugar de bajar su precio, sea generoso con descuentos o licencias gratuitas para los clientes que tienen dificultades para pagar.
  4. Dedique más tiempo a las funciones que evitarán que los usuarios tengan una experiencia negativa con su producto.
  5. Una buena marca brinda a los clientes más confianza al comprar su producto, así que hágalo lo más atractivo y transparente posible.
  6. El tiempo es clave cuando se publica en Product Hunt. Investigue el mejor momento para publicar en función de su zona horaria, o use su función Enviar para obtener mejores resultados.
  7. Nunca dejes que la competencia te deprima. Concéntrese en sus puntos fuertes, aprenda lo que pueda de sus competidores y siga avanzando.
  8. Automatizar partes de su proceso y crear herramientas internas para administrar sus productos proporciona una eficiencia increíble y también afecta a los clientes al ayudarlo a resolver problemas más rápido.
  9. Sé siempre realista. Si la existencia de su producto depende de otro producto, tenga un plan para cuando el producto anfitrión haga que las características principales de su producto estén disponibles de forma nativa.
  10. Documente y comparta su proceso para ayudar a otros creadores creativos a aprender de sus errores y unirse a usted para celebrar sus victorias.

Gracias por leer. Si también está creando un producto y encuentra útil nuestra historia, y compártala con sus amigos y seguidores.