Cómo diseñé, construí y lancé un producto durante el fin de semana – Un desglose de los eventos

A principios de este año, lancé un proyecto paralelo llamado Lancerlist, que es una plataforma que permite a las empresas encontrar trabajadores autónomos en su ciudad y que marca un hito importante en mi viaje como creativo. Es la primera vez que se me ocurre la idea de lanzar durante un fin de semana, 16 horas de tiempo de trabajo para ser exactos. Desde entonces me he dado cuenta de la importancia de tener una idea rápidamente para ver si vale la pena profundizar.

Fondo

Hace un tiempo estaba escuchando un podcast sobre la construcción de plataformas de redes verticales, esta industria en particular era el petróleo y el gas, pero lo que me interesaba era que esta red facilitaba la mayoría de las conexiones entre los propietarios de los equipos y los contratistas.en la industria del freelance creativo, tenemos redes como Freelancer.Hay algunos problemas con estas plataformas como la comisión de hasta el 20% que estas plataformas cobran por cada transacción o la competencia global que hace bajar los precios y causa una carrera hacia el efecto de fondo. Con el aumento de la competencia global, los beneficios de trabajar localmente serán más importantes; la comunicación, la reputación y el control de calidad son todos factores.

Idea y alcance (1 hora)

Con esta información de fondo en mente, el principal problema en la actualidad es el descubrimiento para las empresas y la exposición para los trabajadores autónomos, mientras que las opciones de descubrimiento incluyen las plataformas de trabajo autónomo ya mencionadas o las redes de redes generales como LinkedIn. El problema con ambos es que los resultados son demasiado generales. Las plataformas freelance, si bien están dirigidas, proporcionan un conjunto global de resultados. Los freelancers establecidos tienen su red, reputación y clientes existentes para mantener el flujo de caja, los freelancers de nivel de entrada tienen más dificultades para establecerlos en los primeros días y las opciones actuales requieren la creación de una marca personal (Twitter) o cold outreach (Email) Mi solución a esto es una plataforma simple que permite a los freelancers registrarse, mostrar su información de contacto y piezas de trabajo seleccionadas, y establecer su ubicación. Una vez que esta idea rebotó en mi cabeza, me puse a pensar en una enorme lista de características e interacciones potenciales que pensé que beneficiarían a la plataforma, y luego ordené estas características por tamaño (tiempo de diseño y desarrollo) e impacto potencial. Los dibujé en un gráfico y creé una hoja de ruta con los elementos de alto impacto y bajo tamaño priorizados para el producto mínimo viable.

Diseño UX (1 hora)

Para proyectos de gran envergadura, normalmente realizo una investigación a fondo de los usuarios, creo personajes y hago mapas de viaje. Para un proyecto pequeño como éste, en el que el objetivo era lanzar un MVP rápidamente, esto no importaba porque como freelance ocasional conocía al usuario objetivo, por lo que decidí que la etapa UX se utilizaría para definir la arquitectura de la información y crear una maqueta de baja fidelidad de los flujos clave del producto.La arquitectura de información consiste simplemente en diseñar qué información/datos se necesitan para que el producto funcione y luego organizarlo para mostrar la relación entre la información. Lo que quiero decir es que no necesitas nada especial, yo personalmente uso una herramienta llamada draw.io, es un programa gratuito, basado en la nube, que me ayuda a visualizar las ideas de mi cerebro de una manera más permanente.mockups de baja fidelidad son una simple representación visual del producto, pensar en esbozar diseños de pantalla en papel. En esta etapa tomaría la arquitectura de la información y crearía diseños básicos a partir de ella, pensando en cómo navegaría el usuario de pantalla en pantalla, una de mis herramientas favoritas, aparte del lápiz y el papel, para crear maquetas simples, es Balsamiq. Balsamiq, con su estilo de boceto, me permite crear diseños simples sin tener que preocuparme por los detalles más finos que vienen con el diseño de la interfaz de usuario. Luego puedo añadir enlaces entre las pantallas para crear un prototipo en el que se pueda hacer clic, es básico, pero el trabajo está hecho.

Diseño de interfaz de usuario (2 horas)

Ahora tenía un diseño aproximado de lo que quería construir, era hora de convertirlo en lo que sería el producto final. Mi arma de elección es Figma, me permite cambiar entre Mac y Windows con todos los archivos almacenados en la nube, lo que significa que puedo recoger fácilmente los diseños donde los dejé, sin preocuparme de si tengo la última versión. lo primero que hice fue clasificar la marca, para el esquema de colores me inspiré en periódicos como el Financial Times con su fondo blanco y su paleta de colores monocromáticos.El logo más simple que se me ocurrió fueLancerlist en una gracias que me gustó sin icono, esto podría venir más tarde y no era necesario para el MVP, con proyectos a gran escala, normalmente creaba un sistema de diseño, hacía que todos los componentes fueran intercambiables y creaba un prototipo interactivo, lo que no era necesario para un proyecto de este tamaño, en las dos horas que pasé en la interfaz de usuario probé y me equivoqué con muchos diseños de componentes, usando Dribbble para inspirarme cuando era necesario, y se detuvo cuando eralo suficientemente bueno, no cuando no era suficiente Muy wabi-sabi.I terminar el diseño de cinco pantallas completas de la UX que cubría el 95% de la interfaz, yo estaba feliz de proceder al desarrollo.

Backend (2 horas)

Para iniciar el desarrollo, siempre tiendo a construir el backend del proyecto primero. Esto me permite construir la funcionalidad del producto en primer lugar y suele ser la etapa en la que capto la mayoría de mis errores desde la etapa de diseño, lo primero que hice fue crear dos bases de datos, una base de datos de preparación y otra de producción. Esto me permite probar el producto localmente sin la amenaza de eliminar accidentalmente los datos reales del usuario, ya que todo el backend del producto está construido en Laravel, que es un framework PHP Modelo-Vista-Controlador (MVC). He estado usando Laravel durante años y me encanta, esto significaba que estaba ahorrando tiempo al aplicar mis conocimientos del pasado, por lo general, la estructura del backend era la misma que la configuración predeterminada de Laravel. Utilicé Laravel Auth para crear el sistema de autenticación, que literalmente tardó 30 segundos en configurarse y funciona como un placer, especialmente para el MVP.

Frontend (8 horas)

El gasto de tiempo más significativo en este proyecto fue el desarrollo del frontend, convirtiendo el diseño de la interfaz de usuario en una interfaz funcional, interactiva y sensible. Esto, sin embargo, añade complejidad y tiempo de desarrollo al proyecto y estoy tratando de completarlo en un fin de semana, así que decidí mantener la interfaz simple, para el HTML decidí usar el sistema de plantillas Blade de Laravel, para aquellos que están familiarizados con Twig es muy similar pero con el beneficio añadido de poder acceder a las funciones de Laravel. La estructura HTML era simple, un diseño que las páginas individuales extienden y pasan propiedades, como el título de la página, de nuevo a. Para el estilo, de nuevo recurrí a la ayuda de otra característica de Laravel, Mix. Mix actúa como un compilador para SCSS y JavaScript y está integrado en el Framework, lo que significa que no había una configuración compleja del WebPack. Todo el diseño se realizó en SCSS, estructurado con componentes, variables y mixins que mantienen el proyecto organizado, permitiendo un rápido desarrollo, para la interactividad utilicé funciones puras de JavaScript ES6 que detectan componentes interactivos en la carga de la página y asignan toda su funcionalidad en el momento. En general, la interactividad en la etapa de MVP era mínima, tal y como estaba diseñada, así que no me llevó mucho tiempo añadirla. una vez hecha, la conecté al backend para revisar los datos en vivo y los probé a fondo, comprobando si había algún fallo en mi lógica o errores en mi código y los arreglé en consecuencia.

Despliegue (1 hora)

El proyecto ya estaba listo para su lanzamiento, pero en este momento, sólo vivía en mi ordenador local, era hora de moverlo en línea, lo primero que hice fue crear un repositorio git y empujar mi código hacia arriba. Esto me permite controlar diferentes versiones de mi código para poder trabajar y liberar múltiples características a la vez. Luego configuré una gota básica de DigitalOcean (servidor) con la ayuda de Laravel Forge, una herramienta que proporciona una interfaz de usuario para la gestión de servidores basados en Ubuntu.luego compré el dominio, configuré los registros DNS apropiados que apuntan a mi servidor y creé un nuevo proyecto para el dominio en Forge. Desde Forge I entonces configuro el despliegue que toma el código almacenado en el repositorio git y lo copia a mi servidor. procedí a configurar una nueva base de datos en Forge y copiar a través de la base de datos desde mi ordenador local. los registros DNS se propagaron unos 30 minutos más tarde y estábamos en el negocio. El proyecto ya estaba en marcha y funcionando desde el dominio en vivo.

Lanzamiento (1 hora)

¡Hora de despegar! En el pasado, me he abstenido de lanzar proyectos, ya sea por tratar de perfeccionar el proyecto o por la ansiedad de poner mi trabajo en marcha, no esta vez… Decidí que la operación de lanzamiento se llevaría a cabo en dos frentes, Twitter y ProductHunt, por lo que concentré mi preparación en torno a estos… Para Twitter, establecí la cuenta, la califiqué con una foto de perfil, color primario (cuando eran una cosa) y llamé a la acción en la biografía para los curiosos… Creé tarjetas de medios sociales para el sitio web e hice un tweet con la llamada a la acción y el enlace. para ProductHunt me preparé para el lanzamiento creando miniaturas, tomando capturas de pantalla y pre-escribiendo el primer comentario que apuntaba a la participación de los usuarios. Luego programé el lanzamiento a través del panel de control de ProductHunt para el día siguiente. Construí un panel de control muy básico, protegido con contraseña (como un nuevo proyecto de Laravel) que medía las vistas de las páginas y los registros, y lo desplegué en un subdominio para poder medir el lanzamiento cuando estaba en movimiento.al día siguiente se lanzó. En algún momento, escribiré otro artículo en las estadísticas del lanzamiento, pero para darles una idea de lo que pasó, lo lancé a medianoche mientras estaba en un autobús de redeye en Cornualles para surfear, 18 horas más tarde me senté en un Wetherspoons haciendo soporte al cliente…. Echa un vistazo al proyecto en vivo en lancerlist.co.

Etiquetas

FreelancersProyectosMvpStartupsDiseñoFreelanceConstruye un proyecto paraleloLas últimas historias técnicasContinúa la discusión