floresfrescas.com redesigned

written by Javier on 20/07/2009

We recently redesigned floresfrescas.com, probably the most ambitious project designed and developed at Vostok. It was not only the front store but all of the internal applications: inventory management, courier interfaces and backoffice stuff behind such a business. We could say we rebuilt the whole enchilada. Huge project.

floresfrescas.com is a place to buy nice & fresh flowers in Spain for half the price you would pay at any interflora kiosk. The concept is simple: they carry only three products (roses, multi-flower, and flower of the week bouquets).

We are extremely proud of our work. There are many tiny details in which we put so much care both in design and programming:

  • The heading color for the flower of the week changes according to the color of the flower (María spent days on this).
  • The muted color palette was designed to allow the freshness and vivacity
    of the flowers really shine.
  • Texts are clear and friendly, especially confirmation messages.
  • Calendars. They rock. You can change delivery dates after your order has been placed. That is done in a really awesome manner, thanks to Sam’s code-wizardy.
  • All your account info and configuration is in a single page.
  • The homepage is clear and the structure is very flat, you can access
    pretty much any page from there.
  • We also redesigned all the Corporate Identity (taking good care of making the brand web-centric instead of logo-centric).
  • The 404: Page Not Found rocks

Just as a reference, this is a screenshot of the old website:

The visual difference is outstanding, but we are also very proud of being able to narrow down a 12+ step checkout process into a couple of screens, without overloading the customer with endless error-prone forms.

We hope you like it and (here comes the shameless plug) if you, or one of your loved ones is in Peninsular Spain, try it out!

There are 16 comments to this article:

  1. 20/07/2009Outsider says:

    It looks beautiful. Congratulations!

  2. 20/07/2009Carlos Úbeda says:

    I like it!

    There are many reasons of why this work looks so so well, but i think all you at Vostok know them ;-)

    Because of that, this time it’s worth noting some points that, at first glance, made me stop and think (only 5!):

    1. Product page is really simple and beautiful but… if i browse to multiflower bunch page… where can i buy it? Only at home page?

    2. At product page i’m sure there’s another way to cross-market flowers (some of them at sale) and engage users than a plain two-column text list.

    3. I want to see aconitum info and i want to see it without cheating! :-P

    4. Persolize your present: Two teddy bears are two much but a teddy bear and a vase are not. The logic is smart (it is honest, i like it) but the interface doesn’t show that. Too much cognitive effort for me in a summer afternoon…

    5. No navigation at site is great but no path at checkout makes me a little anxious. But at this point i admit i am not sure :-)

    If i miss the point, please show me the way.
    Congrats!

  3. 21/07/2009Ignacio says:

    It’s clear to me that:

    1.- All the post is a huge shameless plug. You love so much yourself…
    2.- You *really* need to change your obsession with the so-called “vostok palette”. Kind of boring right now…
    3.- You called this a “huge project”, and that makes me really think…
    4.- Something does not rock just because you did it, see #1 ;)

  4. 21/07/2009Javier says:

    Hola Carlos, thanks for the compliments. Here’s some answers to what you point (and thanks a lot for doing so):

    Re. 1. Good point. You are absolutely right. It’s something we should correct on the next iteration.

    Re. 2: Again, you are right :) Two small blocks with the other two products would make it, although there is some intentionality in making the homepage the page where decisions are taken.

    Re. 3: Not sure I understad this one. Are you taking acconitum, son? (that’s kind of psychodelic :)

    Re. 4: I don’t get this one either, not sure what you mean.

    Re. 5: Yes, it’s intentional.

    Thanks a lot, really!

  5. 21/07/2009Javier says:

    Hi Ignacio,

    Re. 1: You are totally right. The post is 67% blatant self-promotion. Don’t take us too seriously, c’mon :)

    Re. 2: Using dark neutral colors is the best way to enhance vividly chromatic content, really. That’s for the flowers and also to make links and buttons stand out more. You can do the same with whites and light greys but it’s usually less memorable. Besides, we combine content in whites and greys very intentionally. Check the home page and see which boxes are grey and which ones are white. It’s not arbitrary at all, really.

    Re. 3: It is a huge project in terms of scope (many different things), not in terms of budget or the size of the client. We’ve done projects for bigger clients (banks and big tech companies) with more budget but they were not as strategic for them and not as challenging for us. We’ve done IA, design, front-end and back-end coding, systems, etc. That’s why it’s huge for us.

    Re. 4: It does for us :) No, seriously. There are some nice details which we consider clever. There are also mistakes and plain non-original things, of course. We just like to point out the ones we like most.

    Thanks and stop by sometime, I’d trade a beer for some attention of yours so I can better explain the benefits of such a palette in some contexts.

  6. 21/07/2009Carlos Úbeda says:

    Javier, thanks for your response.

    Re 3. It’s a silly one: Flower selector at homepage. #1 item (“Aconitum”) is preselected and there is no button. Then, it is impossible to go to that page from there. And, of course, Aconitum helps me to fly, as flower description says ;-)

    Re 4. If you look at “personalize your present” page, it is not obvious that teddy bears (for example) are mutually exclusive and a teddy bear and a vase are not. The only hint is the content.

    Re 5. :-D

    Designing takes weeks, but having a look and leaving your respectful tips only takes ten minutes if you have a fresh eye and you have got some experience. Whether you are the designer, the reviewer or the lurker, you learn something.

    I miss so much this kind of things in UX community. Sometimes it looks like we are afraid of each other :-(

  7. 21/07/2009Javier Cañada says:

    Carlos,

    Re. 3: Hmmm… now I see… that’s a small big mistake :) We’ll fix t soon. Thanks!!

    Re. 4: Good point. I guess we could either make everything non-exclusive or make rows of exclusive items (green stuff, teddybears, etc.) which would make the page too long. The first approach makes more sense, although I fear that someone could check two puppies by mistake. I’d rather leave it the way it is now.

    You are right, designers usually fear each other. I think it’s because we are not usually 100% happy with final results and decide not to show the *product* (which is what counts at the end of the day). That’s why I am so obsessed about product over method,

    Again, many thanks.

  8. 22/07/2009Ignacio says:

    Nice Javier, thanks for your comments.

    You’ve taken a half-rant post, well, full rant; and transform it into something useful. Kudos and thanks again.

  9. 25/07/2009Sergio says:

    Hi Javier,

    I am a great admirer and respect very much your work since long time ago.

    In reference to the chromatic scale you use so often, sometimes I doubt whether it is intentional or not. There are a wide range of dark neutral colors to choose, and many visual resources to use than squares and plain colors, and it comes to mind why you always use the same ones for all your projects.

    I’ve always thought that our job has to be invisible, that is, respect customer’s corporate identity. You are greatly improving the navigation, structure and flow, but at time, you are overriding their corporate brand imposing yours.

    Sometimes customers corporate image is not as cool as we would like, and our improvements in the layout doesnt’ look fancy, but if finally the customer is happy and there’ve been improvements, we’ve done our job properly.

    As I like to say very often: “Your sons are not your sons”.

    Thank you for share your work.

  10. 29/07/2009Marcos says:

    Tengo que decir que me gusta mas el diseño anterior, he comprado en varias ocasiones en floresfrescas y el diseño anterior era mas sencillo de utilizar y orientado a todos los publicos, creo que con el nuevo diseño esta empresa perdera muchas ventas y clientes y sino tiempo al tiempo.

    Tengo que decir que la imagen que habeis colocado como web anterior, la habeis descolocado aposta, que la he visitado muchas veces y nunca la vi como vosotros la mostrais.

  11. 29/07/2009Javier Cañada says:

    Marcos, te confundes. La captura de la web vieja la hemos sacado de archive.org, donde se guardan copias pasadas de la mayoría de webs. Compruébalo tu mismo:

    http://web.archive.org/web/20080206124840/http://www.floresfrescas.com/

  12. 29/07/2009Marcos says:

    En este tipo de páginas, como archive.org, suelen hacer mal las capturas por los banners y otros objetos que no son propios de la web y provocan que se descoloquen los objetos, ademas de que no aparecen todas las imágenes, pasa lo mismo con el historico de google. Pero no me confundo, he visto la web muchisimas veces y nunca ha estado tan descuadrada como vosotros la mostrais.

    Por cierto os quedan muchas cosas que pulir en la nueva web, ya que todavia tiene muchos fallos de programación, links rotos, botones y cajas de texto descuadradas, hay una ventana en la que incluso el boton tapa el texto de la caja de texto.

    Saludos

  13. 29/07/2009Mark says:

    Marcos (Miguel?) La captura que pusimos no fue con mala intención, es la representación más fiel que encontramos respecto a lo que había antes. Si tienes una captura de pantalla que creas que le haga justicia con gusto la ponemos.

  14. 29/07/2009Marcos says:

    (miguel?), yo me llamo Marcos y trabajo en diseño (Front-end) para empresas clientes de Indra.

    Yo no he dicho que sea con mala intención, solo que parece que querais dejar peor de lo que era el diseño anterior para darle mas importancia al vuestro, del que por cierto se puede decir que tiene mucha similitud con esta página, tal vez demasiada, misma fuente, mismos colores, etc.

    ¿Por cierto quien es Miguel?

    Saludos

  15. 5/08/2009keko says:

    Habéis estado trabajando durante meses para cambiar una web y la única versión de la versión anterior que tenéis es ese pantallazo de archive.org? Es que en todo el tiempo en que habéis estado desmenuzando el diseño anterior, nadie hizo un pantallazo?.

    Otra cosa: si cambiáis la marca en la web al menos tener un poco de respeto por vuestro propio trabajo y haced lo mismo con todas los demás soportes. Es paranoico tener una compañía con 2 marcas: la de antes en la mayoría de las aplicaciones (como las motos) y la nueva.

  16. 6/08/2009Javier says:

    Aquí hay otra captura de la web vieja:
    http://11870.com/pro/floresfrescas/media/20d9fb8c/u/jagtomas

Write your comment: