pauldesigner.com
EN
B&M Florist

B&M Florist

Un sitio de comercio electrónico completo, escritorio y móvil, para una floristería de Sídney fundada en 1987, de la página de inicio al checkout.

Año
2022
Rol
Diseñador web y móvil
Herramientas
Figma, Shopify
Un iMac sobre un escritorio blanco junto a un florero con hierba, mostrando la página de inicio de B&M Florist, un ramo en tonos pastel bajo el titular "When Only The Best Will Do".

Contexto

B&M Florist es una floristería familiar del sur de Sídney, abierta desde 1987, con tienda física, una línea de bodas y eventos, y una trayectoria de apariciones en medios y premios del sector. Necesitaban un sitio que vendiera flores en línea tan bien como contaba esa historia, y que funcionara igual de bien en un teléfono que en un escritorio.

Mi rol

Diseñé el sitio completo, freelance a través de SlickWeb: cada página en anchos de escritorio y móvil, la tienda desde la colección hasta el producto y el checkout, y los componentes que comparten.

El trabajo

Un sistema, unas treinta páginas. Empecé por el mapa del sitio en Figma para que la tienda, las páginas editoriales y la parte de bodas compartieran encabezado, pie, tarjeta de producto y un set de patrones de sección, en vez de que cada una fuera un diseño aparte.

Lienzo de Figma con el mapa completo del sitio de B&M Florist: filas de frames de escritorio para inicio, nosotros, bodas, eventos, blog, contacto, preguntas frecuentes, producto, colección y checkout, con los frames móviles correspondientes debajo.
El mapa del sitio en Figma. Páginas de escritorio arriba, móviles abajo; el checkout corre como su propia secuencia a la derecha.

Editorial donde lo merece, tienda donde vende. La página de inicio abre con fotografía y un titular serif pausado, y luego pasa a los más vendidos, la colección de decoración y los productos destacados. La página de nosotros cuenta la historia de la familia con prensa y premios; bodas y eventos tienen una página guiada por galerías con la solicitud de cotización integrada.

Tres páginas de escritorio completas lado a lado: el inicio con hero, más vendidos y decoración; la página de nosotros con la familia en la tienda, apariciones en medios y premios; y la página de bodas y eventos con galerías y un formulario de cotización.
Inicio, Nosotros y Bodas y eventos en escritorio. El mismo encabezado, pie y ritmo de secciones en las tres.
Tres páginas de escritorio: Contacto con un formulario y un mapa de la ubicación de la tienda, un acordeón de preguntas frecuentes, y una página de producto para un ramo con extras, detalles de entrega y productos relacionados.
Contacto, preguntas frecuentes y una página de producto. Los extras como champaña y tarjetas de regalo van junto al ramo, no en un paso aparte.

Mobile first en la práctica, no solo de nombre. Cada página tiene su versión móvil diseñada a la par, incluidos el menú, el carrito y el checkout, para que nada quedara a la improvisación de una plantilla.

Una fila de pantallas móviles: el carrito de compras, el menú móvil desplegado, el inicio, nosotros, bodas y eventos, todas las bodas, una boda individual y el blog.
Móvil: carrito, menú, inicio, nosotros, bodas, una boda individual y el blog.

Resultado

Un diseño de comercio electrónico completo y consistente para escritorio y móvil, página por página: inicio, tienda, producto, colección, checkout, nosotros, bodas y eventos, blog, contacto y preguntas frecuentes. SlickWeb lo construyó y el sitio está publicado en bandmflorist.com.au.