Issuu on Google+

- Marc Camps - Marta PĂŠrez - Pedro Salas -


- Marc Camps - Marta PĂŠrez - Pedro Salas -


Indice 1. Estrategia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

1.1. 1.2. 1.3. 1.4. 1.5. 1.6. 1.7. 1.8. 1.9.

Introducci贸n . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Objetivos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8 Proyecto Ant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 驴Por qu茅 Ant?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Modelo de negocio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Benchmarking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 DAFO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Perfiles y escenarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Diagrama de Gant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

2. Arquitectura de la informaci贸n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

2.1. Mapa del site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 2.2. Diagrama de flujos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 2.3. User Journey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 2.4. Wireframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54


3.

Desarrollo Visual y Maquetación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67. 3.1. Diseño de la interfaz gráfica. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68 3.1.1. La marca. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 3.1.2. Paleta Cromática. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 3.1.3. Tipografías. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 3.1.4. Call to action. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

3.2. Mockups. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.3. Desarrollo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.3.1. Maquetación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.3.2. SEO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4. Siguientes pasos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5. Aracnografia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

73 82 83 84 86 88


1. Estrategia


007 1. Estrategia

1.1 Introducción Para poder poner en práctica todos los conocimientos adquiridos durante el postgrado, a los alumnos de ELISAVA se nos planteó desarrollar un proyecto web real a partir de la pregunta ¿qué podemos hacer para potenciar el comercio local? Barcelona, de la misma forma que muchas ciudades de España y de Europa, está pasando por una fuerte crisis económica que cada vez más obliga a cerrar a los pequeños comercios porque no pueden hacer frente esta situación. Este hecho nos lleva a que cada vez haya menos comercios locales, perdiendo de forma paulatina esa relación especial que compartían los pequeños comercios con los vecinos y clientes. Las grandes cadenas y los centros comerciales son los negocios actuales que sí pueden superar año tras año la crisis española por ser más competitivos en un mercado que cada vez es más exigente con los precios. También las grandes empresas pueden ofrecer un producto más barato que las PYME’s, porque pueden comprar más cantidad además de que abarcan muchos sectores/mercados.


008 1.2 Objetivos

1.2 Objetivos Nuestro objetivo principal es poder abaratar los costes de adquisición de mercancías/productos a los pequeños comerciantes (PYMES). Y por otra parte, queremos ayudar al pequeño fabricante/distribuidor, aportándole a éste un mayor volumen de compradores potenciales de sus productos. Con estos dos objetivos básicos desarrollamos un sistema de compra colectiva que beneficia a ambas partes.


009 1. Estrategia

1.3 Proyecto Ant Una de las soluciones con las que dimos trataba en buscar el cooperativismo entre pequeñas empresas para que éstas pudieran ser más competitivas en el mercado. Este principio está inspirado en la compra colectiva la cual consiste en lanzar ofertas con el objetivo de alcanzar un mayor volumen de consumidores determinado dependiendo del producto o servicio, consiguiendo así un descuento considerable. España y fundamentalmente la ciudad de Barcelona, ha vivido una gran expansión de los sitios de compra social, tal son los casos de Groupalia y LetsBonus. Con éxitos como estos como referencia creamos ANT, un proyecto web de compra colectiva para pequeños comerciantes.


010 1.4 ¿Por qué Ant?

1.4 ¿Por qué Ant? Esta plataforma está pensada para que las PYME’s puedan unirse y hacer una compra colectiva y de esta manera conseguir un precio más asequible, hecho que les convertirá en establecimientos más competitivos dentro del mercado. Actualmente no existe ningún sitio web donde los comerciantes puedan unirse para comprar una misma mercancía de forma única. Ant promueve la filosofía que cuantos más seamos, más nos podremos ayudar, algo que suena un poco utópico pero que es verdad. El secreto de Ant es que al gestionar un sólo pedido, pero con un gran volumen de existencias, los precios son mucho más económicos que si los comerciantes lo gestionan de forma individual (como lo han ido haciendo hasta ahora).


011 1. Estrategia

1.5 Modelo de negocio Ant se va a financiar mediante el cobro del 3% por cada oferta que se realice. Esto nos permitirá tener un pequeño beneficio. Un 3% nos permite mantener a flote nuestro negocio, sin que se note una subida abusiva del precio del producto, ya que nuestro objetivo es ser más económicos que la compra individual a la distribuidora. Existe la posibilidad de poder navegar por el site sin necesidad de registro, aunque es importante destacar el hecho de que hay zonas reservadas exclusivamente para el usuario registrado. A nivel de promoción, el proyecto Ant no está planteado para que se difunda de forma masiva en los diferentes medios de comunicación. Nuestra intención es ofrecer nosotros mismos los servicios a los diferentes comerciantes que estén dispuestos a probar esta nueva filosofía de gestionar su empresa. Es importante decir que Ant representa un cambio de mentalidad y somos conscientes de que no todos los usuarios están preparados para probar este nuevo sistema, y que debido a su novedad y desconocimiento para muchos, puede ocasionar incertidumbre o desconfianza. Así pues, queremos apostar en primer lugar por el boca-boca de los mismos usuarios satisfechos, ya que esta es la mejor garantía y publicidad que podemos tener. También nos interesaría mantener un buen SEO y SEM.


012 1.5 Modelo de negocio

Ant es una plataforma pensada para el beneficio común; cuantos más usuarios estén en la plataforma, más gente podrá apuntarse a las ofertas que presentemos (de nuestros fabricantes), y por lo tanto, antes se cerrará la oferta y distribución de la mercancía. En efecto, la distribución de los productos se realizará una vez se hayan asignado el total de mercancía ofertada entre los usuarios que se han apuntado. Las ofertas tendrán un tiempo limitado de una semana. Así pues, en el caso de no alcanzar el precio en el tiempo previsto, se anulará la oferta y quedará a la espera de lanzarse en otro momento.


013 1. Estrategia

1.6 Benchmarking COMPRA COLECTIVA

Actualmente existen empresas en la red que ofrecen la posibilidad de hacer compras grupales, pero están dirigidas a compradores particulares (al detalle) ejemplos de ello son la compra de entradas para espectáculos, viajes, gadgets/ objetos, etc. Algunas webs a tener en cuenta por su sistema de negocio de compra colectiva serían Atrapalo, Groupalia, Groupon, Letsbonus, MasBonus, Offerum y Privalia. Básicamente, el sistema consiste en que la empresa negocia con el proveedor un precio para adquirir el producto/servicio y una cantidad exacta que para ofrecer. De esta manera se consiguen precios más baratos a través de estos portales, porque estos compran grandes cantidades del producto o servicio y por consiguiente consiguen descuentos en su precio. Así pues, estos portales pueden ofrecer una gran rebaja del precio del producto ya que cuentan que se van a vender todas las unidades acordadas gracias a una importante acción de comunicación (publicidad) que llevan a cabo, además de potentes herramientas de marketing, como por ejemplo motivar a una compra impulsiva por el tiempo de durabilidad de la oferta.


014 1.6 Benchmarking

Atrapalo www.atrapalo.com


015 1. Estrategia

Groupalia www.groupalia.com


016 1.6 Benchmarking

Groupon www.groupon.com


017 1. Estrategia

LetsBonus www.letsbonus.com


018 1.6 Benchmarking

Offerum www.offerum.com


019 1. Estrategia

Privalia es.privalia.com


020 1.6 Benchmarking

CROWDFUNDING También buscamos referentes de páginas web de crowdfunding, ya que nos interesaba su forma de encontrar inversión para los proyectos de sus usuarios.


021 1. Estrategia

Creadores independientes que buscan financiación para materializar sus ideas. Su público, convertido en mecenas, recibe recompensas exclusivas a cambio de sus aportaciones. Los creadores mantienen todos los derechos sobre sus obras, y ofrecen a los mecenas que les ayudan a financiar sus proyectos recompensas en forma de creaciones y productos exclusivos, experiencias únicas, ediciones limitadas, merchandising, acceso a descargas…

Verkami www.verkami.com


022 1.6 Benchmarking

Kickstarter www.kickstarter.com

Interesante ejemplo: Cuanta gente esta apuntada al proyecto, cuánto dinero ha recaudado y los días que faltan para que se cierre la opción de invertir dinero. Debajo hay unas condicionantes. Va muy enfocado sobretodo a innovación. Por tu contribución, tienes una recompensa (varía según el proyecto)


023 1. Estrategia

Interesante sistema de pago a traves de la repercusi贸n en los medios sociales. Men煤 de categorias desplegable.

Thunderclap www.thunderclap.it


024 1.6 Benchmarking

Lanzamos www.lanzanos.com

Un proyecto más de financiación colectiva. Muy similar a Verkami. También ofrecen una recompensa.


1.6 Benchmarking

PUJAS Otro mercado que necesitรกbamos analizar fue el de las pujas. Nos interesaba bรกsicamente su sistema de negocio, cรณmo interactuaban los usuarios, cรณmo era su interfaz...en general su arquitectura de la informaciรณn.

025


026 1.6 Benchmarking

Madbid es.madbid.com/

Muestran lo que venden y lo que han vendido. ●Al ser una subasta, el precio varía en función de las pujas. ●Los productos que se pujan provienen la mayoría de: productos de almacén, de liquidacion de almacen, excedentes de liquidaciones, productos al por mayor, inventario al fabricante, etc.


027 1. Estrategia

Muestran lo que venden. Te dan el precio ya marcado en función de lo que tienen en stock. Cuando se termina el stock, no venden más existencias. Es una web que vende cosa baratas. Sin más explicación. ● Cada producto se pone a la venta a las 00:00 y finaliza su vida como producto cuando se acaban las unidades o pasadas 24 horas, a las 23:59:59. ● Sólo es posible comprar el producto que aparece en su home en cada momento.

Mequedouno www.mequedouno.com


028 1.6 Benchmarking

Ebay www.ebay.es

Muestran lo que venden. Ofrecen varios formatos de búsqueda/compras (<compra ya> <subasta> <mixto>). Los productos que se venden, pueden ser tanto de particulares, como de tiendas. Puedes buscar los articulos que venden, picando en el buscador directamente, o puedes buscarlo por categorías. Puedes definir dónde quieres que se lleve a cabo la búsqueda (<españa> <europa> <mundo>). A los usuarios se les atribuye una puntuación de 0% a 100% para definir si son buenos compradores/ vendedores.


1.6 Benchmarking

SUPERMERCADOS Y finalmente vimos ejemplos tambiĂŠn de supermercados online como Ocado y Ulabox.

029


030 1.6 Benchmarking

Ulabox www.ulabox.com


031 1. Estrategia

Ocado www.ocado..com


032 1.6 Benchmarking

ENCUESTAS Finalmente, también realizamos unas encuestas a varios comerciantes de diferentes sectores para investigar cómo funcionan actualmente los comercios locales y para hacernos una idea aproximada de cuáles son sus necesidades comunes. Una vez obtuvimos los resultados de la diferentes entrevistas, realizamos un análisis heurístico para sacar algunas conclusiones. Algunas respuestas nos sorprendieron más que otras, pero por este mismo motivo encontramos este ejercicio de investigación tan interesante. Las conclusiones que obtuvimos fueron las siguientes:


033 1. Estrategia

La crisis ha castigado mucho el comercio local, aunque no tanto como la presencia de las grandes cadenas o los centros comerciales. Cada vez hay menos comercios locales y/o la mayoría de los propietarios tienen más de una tienda en Barcelona o fuera de la ciudad, por lo que los pedidos siempre son mayores que los de una tienda individual. Los comerciantes son reacios a facilitarnos información de su negocio, gran desconfianza y aversión. Muchos no usan la tecnología (ordenador) para realizar pedidos para su stock pero si para hacer las gestiones de éste. Trato preferente con el comercial de toda la vida, en persona o vía telefónica. Están abiertos a usar alguna herramienta online en un futuro para realizar sus gestiones, si les aportase algún beneficio. Se incorpora una nueva tecnología - el whatsapppara comunicarse con sus comerciantes. El comercial tiene un margen para negociar con sus clientes, nunca con descuentos pero sí con regalos (Del pedido total, una unidad más de regalo, por ejemplo).


034 1.7 DAFO

1.7 DAFO Para seguir con el proyecto, decidimos elaborar un DAFO para tener muy presente cuales son nuestros pros y contras del Proyecto Ant.

Debilidades

Plataforma online, dependes de Internet. Sector poco familiarizado con el uso de herramientas online/informรกticas. No hay trato directo con una persona (de forma presencial). Desconfianza e inseguridad (por el uso de internet). Se exige un cambio de mentalidad, empezar a pensar de forma colectiva y no individual.

Amenazas

Existe la posibilidad que muchos negocios no quieran abandonar la forma tradicional de funcionar con un comercial de ventas.

Fortalezas

Ofrecemos productos a un mejor precio, con la misma calidad. Servicio 24h. Internet nunca duerme.

Oportunidades

No existe competencia directa. Innovadores en el sector y en el formato.


035 1. Estrategia

1.8 Perfiles y escenarios Una buena estrategia web tiene que estar centrada en su usuario. Por eso mismo es muy importante definir nuestro público objetivo, es decir, el usuario que utilizará nuestra web. Para poder definir el público objetivo es importante conocerlo, entenderlo, descubrir sus intereses, necesidades, expectativas y hábitos. Para empezar, definiremos en términos generales los criterios sociodemográficos de nuestro target: Hombre y mujer de entre 26 - 60 años, que viven en zonas urbanas, su nivel de estudios es mínimo estudios elementales y máximo estudios universitarios. Su nivel económico es medio-medio. Ant tiene dos tipos de público objetivo, por un lado los comerciantes y por otro lado las distribuidoras. El siguiente paso pues, fue crear varios personajes que representaran a nuestros dos públicos objetivos.


036 1.8 Perfiles y escenarios

JORGE QUINTEROS https://www.flickr.com/photos/jorgeq82/8328663868/


037 1. Estrategia

Persona 1 Shristi Wallace

De origen Inglés, es una mujer de 57 años que junto a su marido y dos camareros más sirven cafés todas las mañana enfrente de la boca del metro de la parada Glories. Lleva gestionando su negocio más de 20 años, y sirviendo cafés desde las 7 hasta las 12 del mediodía entre semana. A pesar de ser inmigrante, Shristi habla perfectamente el español y incluso el catalán. Shristi conoce bien los gustos de sus clientes; la cantidad de café, la temperatura de la leche, con o sin azúcar, etc. Básicamente porque le gusta cuidar a sus clientes y estos se lo agradecen repitiendo el mismo ritual día tras día. Tan solo entrar por la puerta y Shristi ya les prepara el café. También ofrecen todo tipo de vermuts o meriendas; patatas bravas, aceitunas, tortilla de patatas, cacahuetes, berberechos...siempre acompañados de alguna cerveza, de origen nacional.

Escenario Son las 6:30 de la mañana, Shristi abre el bar, y mientras espera que llegue todo el personal, repasa que no falte de nada para empezar el día. Llega su marido directo del mercado y los camareros, el bar se pone en marcha, empiezan a encender las máquinas, a calentar la leche, a colocar las pastas. Shristi se da cuenta que le falta cafe descafeinado, así que decide probar Ant. Abre la página web, busca café descafeinado genérico, encuentra un proveedor de café descafeinado del país y decide apuntarse a la oferta. Dudosa, cierra la web y sigue haciendo sus tareas diarias del bar. A las 11h recibe un sms avisándole que su oferta se ha llenado y que entre 2-3 días recibirá su mercancía.

Puntos débiles al usar Podríamos decir que Shristi es de la vieja escuela, y por lo tanto será difícil nuesttro producto hacerle cambiar su forma de gestionar el bar, a pesar de que haya la necesidad de cambio.


038 1.8 Perfiles y escenarios

JORGE QUINTEROS https://www.flickr.com/photos/jorgeq82/9585355758/


039 1. Estrategia

Persona 2 Anna Martín

Chica Joven y emprendedora en tiempos de crisis decide abrir un pequeño bar con aire vintage. A sus 27 años, Anna es directora de cine y periodista, y sin embargo decidió abrir un bar en una estrecha y poco transitada calle de Barcelona, en la zona alta de la ciudad. Siempre va vestida con un look sencillo pero moderno, quizás un poco hipster, pero porque en el fondo es un reflejo de sus intereses y gustos. En su local, junto con una amiga, realizan todo tipo de bocadillos, calientes y fríos, de esos que te recuerdan a los que te hacían tus padres cuando eras niño, sin olvidarnos también de su amplia oferta de tartas y pastas. Los fines de semana cambian ligeramente la carta para ofrecer a sus clientes y vecinos una opción nueva y muy moderna para satisfacer su apetito, el llamado “Brunch”. Sus horarios son infinitos, no perdonan las noches del jueves, viernes y sábado abriendo hasta altas horas de la madrugada. Entre semana siempre tienen presente la oferta de desayuno, merienda y almuerzo por si alguien quiere probar su quiche lorraine.

Escenario A Anna le está costando bastante poder llevar bien el negocio. Básicamente la

parte más costosa son los stocks y negociar un buen precio con el comercial. Su compañera le habla de Ant, el proyecto de compra colectiva por internet y Anna siente curiosidad. Cada vez que trata con el comercial se siente estafada, un sentimiento subjetivo que le nace a partir de su mala conexión. Es entonces cuando, a través de su smartphone, en vez de contactar con su comercial, alguien que no le acaba de caer bien, decide probar Ant. Abre la web, y de forma intuitiva ya entiende un poco como funciona, y se apunta a su primera oferta. Queda a la espera que le lleguen noticias de Ant a través de su e-mail.

Puntos débiles al usar Es posible que Anna al tener poca experiencia en el sector, se vea abrumada por nuesttro producto todas las gestiones internas que supone llevar un bar.


040 1.8 Perfiles y escenarios

MARC CAMPS i OLLER


041 1. Estrategia

Persona 3 Jordi Puig

Heredó el bar de su familia. Jordi Puig a sus 30 años decidió darle un giro al negocio y apostar por algo más selecto y exclusivo. Los padres de Jordi querían que éste tuviese una buena educación y al menos una carrera universitaria por si algún día no les fuera bien el negocio del bar y Jordi tuviera que buscarse la vida. Jordi estudió económicas y posteriormente marketing. Cuando se jubiló el padre de Jordi, éste pasó a ser el dueño y director de marketing del bar, en otras palabras, sus propia empresa. Así pues, Jordi decidió abarcar un público nuevo, más exigente y con un paladar más fino. Gente que sabe lo que quiere y que está dispuesto a pagar por ello si no consideran que es excesivo. Decidió abrir una coctelería donde sólo sirven gin tonics. Su oferta de gin tonics es muy diversa, exòtica y atractiva. Con diferentes precios, pero siempre enfocados a un público de clase media-alta. Situado en una calle del barrio Poble Sec, decide apostar en un principio por la única publicidad que el boca a boca.

Escenario Como cada tarde, Jordi Puig revisa su stock y haciendo cálculos, previene que se le va a agotar en unos días uno de sus productos. Teniendo presente este margen de tiempo, decide apostar por Ant ya que le sale más económico. Él sabe que aunque solo sea una diferencia muy pequeña del precio, al cerrar el ejercicio económico anual, lo notará. Así pues abre su smartphone y decide hacer su pedido.

Puntos débiles al usar Al usar productos tan exclusivos y selectos es posible que al principio no ennuesttro producto cuentre lo que anda buscando, o en cualquier caso si lo encontrase, difícilmente

coincidirá con suficientes usuarios para que se termine de llenar la oferta, retardando así la entrega de los productos.


042 1.8 Perfiles y escenarios

JORGE QUINTEROS https://www.flickr.com/photos/jorgeq82/8729632981/


043 1. Estrategia

Persona 4 Pablo Navarro

Tiene 35 años y, hace tres decidió retomar el negocio familiar. Cuando empezó la crisis perdió su trabajo en la ciudad y por este motivo se volvió al campo, de donde era su familia. Heredó la fábrica de su padre y su principal objetivo ha sido siempre hacer crecer la empresa, en otras palabras, aumentar su distribución. Actualmente sus productos llegan a distintos lugares de Cataluña, sin embargo su asignatura pendiente es potenciar su distribución en la ciudad de Barcelona. Cuando Pablo heredó la fábrica se encontró con el problema de que estaba muy mal a nivel financiero, y en estos tres años se ha dedicado básicamente a hacer sobrevivir la empresa. Desde pequeño Pablo siempre había tenido conciencia con el medio ambiente y estos valores los quería ahora transmitir a través de sus productos. En su poco tiempo libre le gusta salir a caminar o incluso hacer senderismo por caminos de Gerona.

Escenario Está claro que necesita un cambio de rumbo de su negocio. Sus productos son

de precio alto y por desgracia no tiene muchos compradores. Ve por internet un anuncio de Ant, siente curiosidad e investiga la web. No se siente seguro así que prueba el chat. Por su sorpresa, alguien le contesta y lo anima a probar el servicio, porque en el fondo, no tiene nada que perder. Así pues, decide mandar un e-mail ofreciendo sus productos. Ant lo llama en un rato y acuerdan un precio . Es la primera vez que Pablo vende por internet. Cruza los dedos para que todo le salga bien.

Puntos débiles al usar Al haber perdido ya una vez un empleo, es posible que Pablo no quiera innovar nuesttro producto en el formato de gestionar un negocio tan viejo como el de una fábrica de cervezas.


044 1.8 Perfiles y escenarios

JORGE QUINTEROS https://www.flickr.com/photos/jorgeq82/8371371895/


045 1. Estrategia

Persona 5 Albert Gómez

Es un un hombre de 60 años que ha trabajado toda su vida en la fábrica de su familia. Albert tiene un hijo de 25 años que estudió un FP de informática y que de vez en cuando le ayuda a gestionar la empresa. Albert es una persona que le cuesta mucho creer en las nuevas tecnologías. A pesar de ello, y con la influencia de su hijo, poco a poco empieza a probar pequeñas cosas de internet que le facilitan su vida. Albert le gustan las cosas sencillas, leer el periódico todas las mañanas mientras se toma su taza de té, y el arte. Albert le gusta que su hijo le ayude con tareas de gestión y mantenimiento de la fábrica. Poco a poco va dejando sitio a su hijo y él se va quitando responsabilidades. Sin embargo, aunque los años, Albert siempre estará presente en la empresa (hasta su salud se lo permita). De momento dispone de más tiempo libre así su carga no es tan pesada.

Escenario Albert junto con su hijo se ponen a repasar las cuentas trimestrales de su

fábrica. Se dan cuenta que el negocio no les va bien ni mal, se quedan con que el beneficio es cero. Albert mientras no le salgan números rojos no se preocupa, pero su hijo le insiste en que deberían mejorar dándole argumentos razonables. El hijo le habla de la plataforma online Ant, algo que les podría beneficiar mucho a su negocio. El padre, después de pensárselo, decide sentarse al lado de su hijo que estaba con el ordenador encendido y revisar ambos la página web de Ant para ver qué le puede ofrecer. El hijo, decidido, escribe un e-mail para ponerse en contacto con Ant y hablar de su oferta de productos.

Puntos débiles al usar Su avanzada edad no es un obstáculo pero si es importante tener en cuenta que nuesttro producto su aprendizaje para hacer funcionar la web será más costoso que para cualquier otra persona. Además que por principios no le gusta usar la tecnología.


046 1.9 Diagrama de Gant

1.9 Diagrama de Gant

Calendario NOVIEMBRE ARQUITECTURA WIREFRAMES DISEÑOS INFOGRAFIA MAQUETACIÓN PRESENTACIÓN ENTREGA

DICIEMBRE

ENERO

FEBRERO

1 de Enero - 10 de Diciembre 1 de Enero 17 de Diciembre a 15 de Enero 6 de Enero a 16 de Enero 17 de Diciembre a 9 de Febrero 4 Feb a 9 Feb 12 de Febrero


2. Arquitectura de la informaci贸n


048 2.1 Árbol del site

2.1 Árbol del site Productos Registrarse

Formulario

Destilados Alimentacón

Refrescos

Bebidas

Zumos

Limpieza

Agua

Higiene

Buscador

Lista de productos

Correo/e-mail

Landing

Presentación

Inicio

Contacto

FaQ Localización Teléfono

Favoritos

Logearse Mi Ant

Pagos

Formulario de pago

Ranking Lista activa Historial Ayuda

Ayuda

Chat

Gestión de ofertas

Básicamente se desarrolló dos veces el mapa de la arquitectura de la información del site. En primer lugar se planteó una arquitectura con la presencia de una landing page. El proyecto Ant estaría cerrado al público general por lo que sólo podrían acceder a la plataforma (y poder ver que hay en ella) los usuarios que se hayan registrado previamente. Se barajaron diferentes opciones y argumentos sobre si presentar la plataforma de forma cerrada o abierta, ya que lo que buscábamos era la exclusividad de ser una plataforma dirigida solo a un target profesional. Queríamos evitar la masi-


049 2. Arquitectura de la información

Destilados

Productos

Alimentacón

Refrescos

Bebidas

Zumos

Limpieza

Agua

Higiene

ficación de registros por parte de usuarios que no fueran de nuestro público objetivo, sin embargo, teniendo en cuenta que Ant no es una marca conocida, decidimos modificar el mapa de l’arquitectura de la información. Es interesante poder mostrar a los internautas -registrados o no- qué posibilidades tienen con Ant, es decir, que puedan averiguar qué les puede ofrecer la plataform; además que a nivel de SEO es más beneficioso para el site. Así pues, decidimos modificar el mapa, abrir el site al público però guardando alguna zona exclusiva sólo para los usuarios registrados:

Presentación

FaQ

Inicio Correo/e-mail Contacto

Chat Localización Teléfono Favoritos

Logearse Mi Ant Registrarse

Pagos

Formulario de pago

Ranking Lista activa Historial Ayuda

Gestión de ofertas


050 2.2 Diagrama de flujos

2.2 Diagrama de flujos Primer contacto

Registrarse

Cómo funciona

Utilidad Encontrar

¿Qué puedo comprar?

Comparar precios

Logearse Buscar productos relacionados

Buscar ofertas

Comprar

Apuntarse a la oferta

Esperar a que se llene la oferta


051 2. Arquitectura de la información

Pagar

Gestionar

Dudas

¿Qué tengo que pagar?

¿Qué he compadro?

Solicitar ayuda

Método de pago

Estatus del pedido

¿Cuando lo recibiré?

vía e-mail

vía chat


052 2.3 User Joruney

2. 3 User Journey Ahora nos toca definir la estructura de Ant y sus diferentes secciones. Para llevarlo a cabo nos tenemos que imaginar el camino que va a recorrer un tipo determinado de usuario al utilizar nuestra plataforma. Para ello hemos dividido el camino en tres etapas distintas: - Inicio - Compra - Gestión Dentro de cada etapa se encuentran las diferentes acciones que realizará el usuario. Y a partir de estas acciones se describen las emociones que siente el usuario al realizar cada acción. Por último, se muestran los “touchpoint”, un punto de contacto entre el usuario y Ant.


053 2. Arquitectura de la información

Acción

1 Información

Sentimiento

Encontrar

Utilidad

Satisfacción

Infografía

Buscador

Etapa

7

3

Gestionar Control

Pagar

Touchpoint

6

8

Alivio

+

Área personal

Recibir el pedido

e-mail info Felicidad

Emociones

Apuntarse

Registro Inseguridad Formulario

Registro

2

4

Inseguridad Inscripción

Esperar

5

Incertidumbre Duración oferta

Comprar

Gestión


054 2.4 Wireframes

2.4 Wireframes Una vez ya teníamos planteado la arquitectura de la información del proyecto y vimos diferentes referentes en la red, empezamos a conceptualizar los wireframes. El primer detalle a tener en cuenta, es que desarrollamos un diseño multiplataforma. En concreto para dos tipos de plataformas diferentes, ordenador (pantalla normal de 1024x600) y para móvil (480x320). Teniendo en cuenta nuestro actual entorno, decidimos apostar por el diseño multiplataforma por varias razones, como por ejemplo que España es el país Europeo con más usuarios con smartphone o, que nuestro target (comerciantes) principalmente se comunica mediante el uso del móvil (ya sea haciendo llamadas o mensajes vía whatsapp). No decidimos descartar la opción de hacerlo para web también porque algunos usan el ordenador para realizar sus gestiones de empresa, aunque no sea directamente para pedir stock. Así pues, desarrollamos Ant como una web app.


055 2. Arquitectura de la informaci贸n

Home No Registrado

Home Registrado


056 2.4 Wireframes

MenĂş No Registrado

MenĂş Registrado


057 2. Arquitectura de la informaci贸n

Registro

Productos


058 2.4 Wireframes

Proceso de Compra


059 2. Arquitectura de la informaci贸n

Proceso de Compra


060 2.4 Wireframes

Contacto

Ficha Producto


061 2. Arquitectura de la informaci贸n

Productos


062 2.4 Wireframes

Registro / Log in


063 2. Arquitectura de la informaci贸n

Proceso de compra


064 2.4 Wireframes

Proceso de compra


065 2. Arquitectura de la informaci贸n

Pedido Finalizado


066 2.4 Wireframes

Pedido Finalizado


3. Desarrollo visual y maquetaci贸n


068 3.1 Diseño de la interfaz gráfica

3.1 Diseño de la interfaz gráfica 1. La marca Ant (hormiga en inglés) surge de la idea del trabajo de las hormigas. Las hormigas trabajan de forma contínua, en comunidad, para alcanzar un bien común. Una sola hormiga no puede hacer nada en su actual entorno para sobrevivir, pero juntas pueden alcanzar mucho más y esta es la filosofía que quiere reflejar Ant. El proyecto de Ant, junto con su eslogan ¨cuantos más mejor¨, integra en una sola palabra las ideas que buscamos transmitir, las cuales son confianza, seguridad, perseverancia y sobre todo el sentimiento de colectividad, con el cual se puede hacer frente a cualquier amenaza. Una vez definido el nombre pasamos a darle vida a esa palabra mediante la tipografía Sofia, además del uso de colores contrastantes cromáticamente amigables y manteniendo una saturación parecida con lo que se logra afianzar el propósito del proyecto.


069 3. Desarrollo visual y maquetaci贸n


070 3.1 Diseño de la interfaz gráfica

2. Paleta Cromática

Colores primarios

04 B5 AF

B4 25 39

Colores secundarios

8D C6 41

F9 A1 62


071 3. Desarrollo visual y maquetación

3. Tipografía Droid Sans Bold Botones menú

Droid Sans Regular Contenido Texto, Categorias Filtos , migas de pan

Droid Serif Bold titulos

Sofia Regular logo ant

ABCÇDEFGHIJKLMNÑOPQRSTUVWXYZ abcçdefghijklmnñopqrstuvwxyz 1234567890.,;:¡!&()[]/$@oa¿?%”+-= ABCÇDEFGHIJKLMNÑOPQRSTUVWXYZ abcçdefghijklmnñopqrstuvwxyz 1234567890.,;:¡!&()[]/$@oa¿?%”+-= ABCÇDEFGHIJKLMNÑOPQRSTUVWXYZ abcçdefghijklmnñopqrstuvwxyz 1234567890.,;:¡!&()[]/$@oa¿?%”+-= ABCÇDEFGHIJKLMNÑOPQRSTUVWXYZ abcçdefghijklmnñopqrstuvwxyz 1234567890.,;:¡!&()[]/$@oa¿?%”+-=


072 3.1 Diseño de la interfaz gráfica

4. Call to action Montseny EcoPlus 24 ud. x caixa

95% TO GO

3

DIAS

Apúntate

Gestiona desde la barra de inicio tus reservas! ;)

80

EUROS

?


073 3. Desarrollo visual y maquetación

3.2 Mockups Una de las soluciones con las que dimos trataba en buscar el cooperativismo entre pequeñas empresas para que éstas pudieran ser más competitivas en el mercado. Este principio está inspirado en la compra colectiva la cual consiste en lanzar ofertas con el objetivo de alcanzar un mayor volumen de consumidores determinado dependiendo del producto o servicio, consiguiendo así un descuento considerable. España y fundamentalmente la ciudad de Barcelona, ha vivido una gran expansión de los sitios de compra social, tal son los casos de Groupalia y LetsBonus. Con éxitos como estos como referencia creamos ANT, un proyecto web de compra colectiva para pequeños comerciantes.


074 3.2 Mockups

1. Home


075 3. Desarrollo visual y maquetaci贸n

2. Registro


076 3.2 Mockups

3. ¿Qué es Ant?


077 3. Desarrollo visual y maquetaci贸n

4. Productos


078 3.2 Mockups

5. Lista Activa


079 3. Desarrollo visual y maquetaci贸n

6. Ficha de Producto


080 3.2 Mockups

7. Gesti贸n de Pagos y Envios


081 3. Desarrollo visual y maquetaci贸n

8. Pantalla movil


082 3.3 Desarrollo

3.3 Desarrollo Ant estĂĄ diseĂąado con un esqueleto en HTML, la forma estĂŠtica en CSS y algunas animaciones como los banner slide en javascript utilizando la biblioteca jQuery. Para lograr que Ant funcione de manera responsive se generaron diferentes meta queries en los CSS tomando en cuenta el ancho del dispositivo a la hora de navegar por el site.


083 3. Desarrollo visual y maquetación

PATRÓN: Host Carpeta archivos html HTML del site Carpeta archivos CSS CSS formato desktop CSS formato tablet CSS formato móvil Carpeta Fuentes Tipos de Fuentes Carpeta JS Archivos java scripts Carpeta img Imágenes

1. Maquetación A la hora de maquetar el site se utilizaron patrones de desarrollo, pensados en facilitar la resolución de problemas con mayor facilidad y, a su vez, gestionar modificaciones necesarias entre distintos desarrolladores sin sufrir daños estructurales en el proceso. PATRÓN Los HTML y CSS están divididos por los Tags <HEAD>, <NAV>, <SECTIONS>, <ASIDE> y <FOOTER> y a su vez en el código están ordenados separadamente para evitar confusiones. Los archivos javascript en el HTML siempre se encontrarán en el final del <BODY> después del <FOOTER>.


084 3.3 Desarrollo

2. SEO Pensando en el posicionamiento del site a corto y mediano plazo se tomaron en cuenta estrategias entre las que cabe mencionar las siguientes:

PALABRAS CLAVES: Pensando en el posicionamiento en los buscadores de Internet se ha diseñado un plan de palabras clave difundidas por todo el site y estructuradas con los tags <H1>, <H2> y <H3> . Para la selección de estas palabras fue utilizado la herramienta gratuita Google Analytics, con la finalidad de encontrar palabras tuvieran altas búsquedas en la región de Cataluña, pero con poca competencia (es decir, que pocas empresas las usen para posicionar su web). Usar palabras con poca competencia tiene como meta que se puedan hacer inversiones pequeñas pero con grandes resultados a la hora de hacer campañas de posicionamiento mediante Google.

LINKS A ANT: Una de las mejores forma de posicionar el site en los buscadores es mediante link de paginas externas hacia Ant, por lo que se tiene previsto una campaña de difusión de información por internet.


085 3. Desarrollo visual y maquetación

NO OBSTACULIZAR LOS ROBOTS DE BUSCADORES: Para lograr esta tarea se diseñaron menús y formularios con el menor uso posible de programación javascript y flash. Hacer un archivo robots.TXT: Con este archivo logramos hacer que los robots entren solo a los archivos que deseamos y a su vez darle mayor o menor importancia a cada elemento de Ant. Con este archivo podemos mejorar la eficiencia del robot en el tiempo que esté en Ant.


4. Siguientes pasos


087 4. Siguientes pasos

¿Y ahora qué? Una vez el proyecto esté en marcha, sería interesante desarrollar un plan de negocio más detallado, junto con un plan estratégico y de comunicación. Ant es una herramienta que tiene mucho potencial, sin embargo, somos conscientes de sus limitaciones (como por ejemplo, el tiempo de espera desde que se efectúa una oferta hasta que ésta se llena). Todo depende del volumen de usuarios que usen Ant. Por lo tanto, nuestro principal objetivo de cara al futuro será conseguir usuarios, tanto fabricantes como comerciantes. Sin embargo, a estos usuarios les debemos aportar algo más que una herramienta que les proporcione ahorro. Debemos darle un valor añadido a la marca. ¿Por qué apuntarse a Ant en vez de ir a comprar al supermercado de la esquina que me puede proporcionar lo que necesito en el mismo instante? ¿Es el ahorro un argumento suficientemente fuerte como para justificar el uso de Ant? Queremos tratar nuestros usuarios de igual manera que los comerciantes a sus clientes. Por eso mismo pensamos en desarrollar una metodología de atención al usuario basada en su historial de compras y en la frecuencia en que las realiza.


5. AracnografĂ­a


089 5. Aracnografía

Marketing Directo España es el país europeo con mayor penetración de smartphones y tablets w w w.marketingdirec to.com/ actualidad/infografias/espanaes-el-pais-europeo-con-mayorpenetracion-de-smartphones-ytablets/ Atrápalo www.atrapalo.com Groupalia www.groupalia.com Groupon www.groupon.es LetsBonus www.letsbonus.com Offerum www.offerum.com Thunderclap www.thunderclap.it

Kickstarter https://www.kickstarter.com/‎ Lanzanos www.lanzanos.com Verkami www.verkami.com Me quedo uno http://www.mequedouno.com/ Madbid www.madbid.com Ebay www.ebay.com Ulabox www.ulabox.com Ocado www.ocado.com



Ant