En agosto, Webflow celebró su Dream Big Week anual, una semana en la que todos en Webflow dejan de lado sus tareas habituales para soñar a lo grande y trabajar en lo que quieran.
El resultado fue sencillamente increíble. Los ingenieros desarrollaron nuevas funcionalidades de producto que les apasionaban, los diseñadores y especialistas en marketing se dedicaron a proyectos personales, muchos otros trabajaron en iniciativas para aprender más sobre Webflow y algunos intentaron llevar al límite lo que nuestra plataforma puede hacer.
Un pequeño equipo del que formé parte durante la Dream Big Week comenzó con la idea, aparentemente sencilla, de crear una tienda de comercio electrónico. Pero no cualquier tienda. Una digital.
Como la pandemia nos ha llevado a pasar gran parte de nuestra vida en línea, queríamos crear una tienda que mostrara cómo Webflow puede apoyar a los nuevos tipos de empresas digitales. Una tienda donde pudieras vender tus propios productos digitales y darle tu propia personalidad y estilo.
¿Qué es la Digital Dollar Store?
La Digital Dollar Store es una tienda de comercio electrónico digital donde todo cuesta, lo has adivinado, un dólar estadounidense. Sin envíos ni logística complicada. Solo un lugar para vender productos creados íntegramente con un ordenador, desde diseños gráficos hasta contenido descargable.
Todas las ganancias de esta tienda se destinarán a OTTP-SF, una organización benéfica que brinda servicios de salud mental a jóvenes afectados por traumas en el área de la bahía de San Francisco.
Al empezar a construir la Digital Dollar Store, sabíamos que muchas tiendas de comercio electrónico se centran principalmente en sus productos. Y con razón. Es difícil vender algo sin un buen producto. Pero en el caso de la Digital Dollar Store, la tienda es nuestro producto. Además de mostrar nuestras funcionalidades de descuentos y descargas digitales, queríamos centrarnos mucho en la marca y el diseño, porque sabemos que a medida que disminuye la barrera de entrada para crear sitios web comerciales, la marca y el estilo se vuelven más importantes que nunca.
Cómo un equipo distribuido construyó la Digital Dollar Store
Este año nos ha traído algunos... es broma, no voy a usar esa palabra, 2020 la arruinó. Lo que este año realmente nos ha obligado a hacer a todos es a colaborar mejor de forma remota.
Webflow ha sido una empresa principalmente remota durante años. Pero esta vez, quienes no trabajaban de forma remota (como yo) tuvieron el desafío de intentar trabajar de manera asíncrona, sin poder simplemente acercarse al escritorio de alguien para obtener una respuesta rápida. Afortunadamente, contamos con herramientas como Miro (para lluvia de ideas en equipo), Slack (para mensajería) y Zoom (para reuniones de video) para asegurarnos de estar todos en la misma sintonía.
La fase de ideación
El primer paso del proyecto fue determinar qué productos digitales venderíamos. Queríamos crear diferentes tipos de recursos divertidos que pudieran ser creados por cualquier persona en Webflow. Esto incluyó un libro de cocina, tarjetas coleccionables digitales, fondos de Zoom que usamos internamente, fondos de pantalla de nuestra gira mundial y una mención especial en nuestro blog.
Al final, queríamos ir más allá del significado de productos digitales.
El libro de cocina está lleno de recetas caseras de los empleados de Webflow, las tarjetas coleccionables presentan a las mascotas de los empleados y el resto son recursos digitales que creamos internamente.
Una vez que tuvimos los productos planificados, llegó el momento de crearlos.
Obtención de los productos
Queríamos involucrar a muchos empleados de Webflow en la creación de nuestros productos, especialmente en las tarjetas coleccionables de mascotas y el libro de cocina. Así que creé un formulario sencillo en Airtable y envié una solicitud por Slack a un canal donde estaban todos los empleados de Webflow. En cuestión de minutos, ya teníamos suficiente contenido para nuestro libro de cocina.
Una vez que organizamos el contenido, Pear Weerawong, diseñadora de nuestro equipo de Brand Studio, trabajó arduamente en la creación de todos los archivos de producto, desde las divertidísimas tarjetas coleccionables hasta el original libro de cocina y mucho más.
Lecturas relacionadas: Ya en versión beta: vende productos digitales en tu tienda de Ecommerce
Lecturas relacionadas: Los descuentos para Webflow Ecommerce ya están en versión beta
Diseño y creación de prototipos
Mientras Pear creaba los productos (y la simpática mascota del dólar), otro diseñador, Ryan Miyoshi, empezó un tablero de inspiración en Figma para buscar ideas de diseño web. Esto es lo que hizo Ryan:
Una vez definida la inspiración y tras revisar Ryan el enfoque que quería darle a la tienda, comenzó la construcción.
A estas alturas, lo que la mayoría de la gente haría (incluyéndome a mí) es diseñar y crear primero la estructura de todo el sitio web en Figma, Sketch, Adobe XD o con papel y lápiz, para luego llevar ese diseño a Webflow y empezar a construirlo.
Sin embargo, Ryan se lanzó directamente a Webflow para diseñar y construir al mismo tiempo. Escribió una entrada en el blog sobre por qué lo hace, por si quieres echarle un vistazo. En resumen, cuando dominas Webflow, te das cuenta de que ahorras tiempo empezando tus diseños iniciales directamente en un lienzo en blanco. Especialmente si tienes muchas interacciones y animaciones, como en este proyecto, es más fácil diseñarlas directamente en Webflow para ver los resultados en tiempo real.
En la página de inicio encontrarás nuestra sección de bienvenida, como si entraras a una tienda física. A medida que bajas, verás nuestra lista de productos y, al final, una llamada a la acción (CTA) para probar Webflow Ecommerce.
Al visitar la Digital Dollar Store, notarás que no es una plantilla web genérica. Es un diseño web totalmente personalizado, rematado por otro diseñador de marca, Johnnie Gomez, y creado íntegramente en Webflow.
Además de la página de inicio, tenemos una página de "sobre nosotros", un catálogo de la tienda, una página de pago y una plantilla para cada producto individual.
Como puedes ver, hay muchas cosas en marcha. No voy a entrar en detalles sobre cómo se diseñó cada píxel, o este post sería eterno, pero te animo a que explores el proyecto tú mismo. Echa un vistazo al Navegador (a la izquierda) para ver todos los elementos HTML, y al panel de Estilo (a la derecha) para ver cómo está configurado cada elemento.
Es una locura lo que se puede hacer sin código.
Haciendo que todo funcione mediante la colaboración
Aunque realmente solo hace falta una persona para construir esta tienda, nos pareció mucho más divertido trabajar juntos como equipo.
La verdadera magia empezó cuando usamos Figma y Webflow para colaborar. En Figma, podíamos reunirnos todos en una llamada de Zoom y planificar los diseños en tiempo real; realmente parecía que estábamos todos en la misma habitación. Y con Webflow, mientras una persona estaba en el Diseñador construyendo el sitio, otra estaba en el editor añadiendo el contenido. Esto hizo que el proceso de construcción de la tienda y la publicación de los productos fuera ágil y eficiente al mismo tiempo.
Mientras construíamos el sitio, necesitábamos acceder a una cuenta de Stripe para cobrar los pagos y configurar nuestro flujo de pago. Trabajar a distancia también me ha enseñado que, en casos en los que quizás no interactúas mucho con el equipo ejecutivo, ahora tienes la oportunidad de enviarles un mensaje directo por Slack. Por ejemplo, necesitábamos configurar nuestro sistema de pagos para que Johnnie pudiera probar el flujo de pago y realizar el control de calidad.
Como parte del equipo de marketing de Webflow, no tengo acceso a la cuenta bancaria de la empresa para crear integraciones de pago. Pero sé quién sí lo tiene. Así que un simple mensaje directo a nuestro vicepresidente de Finanzas hizo posible configurar nuestra integración de pagos en menos de un día.
Pero, hablando en serio, la lección principal es pedir ayuda cuando la necesites, incluso a personas que no formen parte de tu equipo directo. Al fin y al cabo, como empresa, somos un solo equipo.
Alojamiento y lanzamiento
Una vez que la tienda estuvo casi terminada (con los productos cargados y un proceso de pago fluido), llegó el momento de lanzarla.
Compramos el dominio digital-dollar.store y lo conectamos a nuestro proyecto de Webflow.
Conectar un dominio personalizado en Webflow es bastante sencillo. Si tienes algún problema, echa un vistazo a nuestra guía paso a paso de Webflow University sobre cómo hacerlo.
Llegó el momento de alojar el sitio y publicarlo. El primer paso era exportar el proyecto, descargar todos los recursos y conectarlo a un servidor. Es broma, solo hicimos clic en publicar.
¡Y listo, la tienda ya estaba en línea!
Ve paso a paso
La Digital Dollar Store busca demostrar cuánta personalidad puede tener un proyecto cuando te lo propones. Fue un proyecto especial para todos los que trabajamos en él. Además, es una oportunidad para contribuir a una causa benéfica.
Si hay algo que aprender de este artículo, es que las grandes cosas requieren tiempo y colaboración.
Ve paso a paso. Lanza ese producto, aunque no sea perfecto, y mejóralo con el tiempo. Un día mirarás atrás y verás lo lejos que has llegado.
Agradecimientos
Sin ningún orden en particular, queremos agradecer a algunos de nuestros colaboradores, tanto por la Digital Dollar Store como por su apoyo a OTTP-SF:
@mackenziechild, @evercastus, @themoondesigner, @CopprOnline, @thatsfinsweet, @NitishCRR, @bearsilber, @stephenwiseco, @donorkit, @ughwtfdude, @codegician, @krbarrett_, @laceykesler, @inboxstash, @hire_ar, @verasemily, @SpurwingAgency, @nocodehackers, @annawardart, @NineTheGhoul, @codegician, @austinthesing, @sarrahfanny, @codymilas, @thepixelgeek, @mtjack9, @dawidmeller, @codegician, @yyonfai, @T_bekkers, @MoenDesign, @ratheejaisal, @PsilocybinAlpha, @waldobroodryk, @badunicornvc, @tmault, @codegician, @louroboros, @parkerthompson_, @FreshlyGroundUK, @josselinco, @Pierquinto, @tinyprojectsdev, @fialaerik, @EverchatHQ
Tu marca es única. Tu tienda también debería serlo.
Dale forma a la experiencia de tus clientes en cada paso y crea un sitio web de comercio electrónico moderno, todo sin escribir ni una sola línea de código.
