By cossovich on

Grandiflora is a boutique florist based in Sydney, Australia. Although you might not have heard of them before, you've probably seen their work in the pages of Vogue, Harpers Bazaar and many other fashion magazines. They've also created the floral design for many celebrity weddings and events in the Australia's premier harbour city.

Recently Grandiflora were interested in updating their identity and marketing (including their website), so they tasked the team at House of Laudanum to create a custom online shopping experience to sell their products online. The previous website was a custom CMS written in Perl and while it did have some e-commerce facilities, it required updating to be a more integrated shopping solution.

Why was Drupal chosen for the project?

Although WordPress was considered early on in the decision making process, the team chose Drupal mainly because of the Ubercart module and some other contributed modules which laid the foundation for the integrated payment solution required for the project.

The other aspects of Drupal which influenced the team were:

  • Drupal and the associated contributed modules are open source, and supported by an excellent developer community
  • The development team were interested in developing features using a project-agnostic approach so that those features could be contributed back to the Drupal community and be more widely used.
  • Ubercart and Drupal are very tightly integrated. Adding features to the shopping experience across other areas of the site was going to be important.

Custom front-end, Javascript integration

The new design for the Grandiflora website and some of the associated shopping cart experience required full control of the front-end code and a structured way to integrate front-end interactivity via Javascript. The development team's Javascript library of choice is JQuery and the way that Drupal integrates JQuery into the Drupal API meant that there was a documented and structured way to easily deliver the front-end dynamic interactivity.

Mr.Snow, the Technical Director at House of Laudanum, talks about it like this:

We were able to split development stages efficiently across different team members and have confidence that even though individual elements were being developed separately, the whole system would work together when combined. Drupal's modular and extensible nature made this possibile. Being able to have full control of the front-end and the Javascript elements of the page was crucial to the project.

Customer reminder system

The customer reminder system is a feature that allows users to create their own reminders for events that they'd like to be reminded of to send flowers at some time in the future. The system needed to be simple and users needed to be able make reminders repeatable on an annual basis (for things like anniversaries, birthdays and the like).

Peter, part of the Laudanum team and a developer relatively new to Drupal, explains:

We had prototyped the customer reminder feature on paper and at first I was concerned that we might need to alter our original wireframes to accomodate Drupal but it was the other way around. We spent a significant amount of time researching the Drupal Handbook and the Drupal API documentation site especially and it paid off in being able to implement the feature in the way we wanted. The API is deeeep! For developing custom features I recommend that people approach Drupal as a framework and forget about the out-of-the-box front-end that it supplied. I think people sometimes see the surface of Drupal and think it's a big customisable blog... the default installation is more like a framework with a 'demo' mode enabled. That demo mode is the tip of the iceberg, the API is what makes Drupal so powerful.

Deployment and development practices

The development team was heavily influenced by many of the recent advances in Drupal development practices and aggressively integrated as much Drupal configuration of the website into code. Drush was a crucial tool in the development process and formed the keystone of the deployment system as well. Deployment was handled by a custom shell script but will be updated in the future to use Drush make.

Contributed modules that made it possible

The heavy lifting for the website is done by the killer combination of CCK, Views and Ubercart. We would estimate that 80% of the project got built by configuring these modules, applying some theming and using hook_form_alter to modify UI and behaviour of certain form elements. The last 20% of the project was a little trickier and required some custom modules. Part of the challenge was interacting with the Drupal API in an elegant and "best practice" way. We've started collecting techniques and snippets of code from the Drupal handbooks and from around the web so that we can keep rolling this knowledge into subsequent Drupal projects.

Here is the complete list of contributed projects used on the site.

Developers and Contributors

⋅ Categories: Drupal 6.x

Comments

kraymer’s picture

kraymer commented

I can't think of a better way to sell flowers than having a naked blond hottie displaying them!

Oh and your site looks great too...

Seriously though looks great, nice work!

~kraymer

cossovich’s picture

cossovich commented

Thanks for the feedback kraymer. We were rather surprised ourselves when we got supplied with the catalogue photos. Hoping it can make the drupal.org frontpage but I think we may encounter some NSFW issues.

drupgeek’s picture

drupgeek commented

I think you wll be losing business. The photos are offensive. MAKING IT NEUTRAL WOULD HAVE MADE IT BETTER.

it is really awful.

themegarden.org’s picture

themegarden.org commented

Naked or not, you have created nice site.

dan.hu’s picture

dan.hu commented

cool! geeks rock!

Drupal-Tech’s picture

Drupal-Tech commented

Good.. but nothing special so it can be on first page of drupal.org. what other say?

sovarn’s picture

sovarn commented

HTML5 how cool!

Any usability/accessibility issues?

queenvictoria’s picture

queenvictoria commented

Some - a bit painful. We're using the HTML5media library which falls back to Flash when required. Also with HTML5 we can display a poster frame so if HTML5 fails and Flash also fails we have a still image. There's still a bit of work to do to cover off all of the browsers we want to support but we're getting there.

bisuteria’s picture

bisuteria commented

I really like the designs as his or naturists as the one implemented in Gulmohar, eg http://tubisuteria.com.ve

Health and have good luck with your web.

Yuki’s picture

Yuki commented

How did you build Customer reminder system?

cossovich’s picture

cossovich commented

The customer reminder system was built using 2 main components. The first component was a CCK node with the following custom fields (in addition to the regular node fields):

  • field_occasion_date ... the date of the special occasion that the customer wants the reminder about.
  • field_annual_repeat ... a toggle for if the date is repeating (like a birthday or an anniversary).
  • field_last_reminder ... a hidden utility field for recording the date of the last reminder sent.

We exported the custom node type using Features so we could save it into our project codebase. The second component was a custom module which was based on a few hooks and functions: hook_menu; hook_cron; and drupal_mail.

The paths for all the CRUD functions related to the special occasions are created using hook_menu. Here's what some of the code looks like:

/**
* Implementation of hook_menu
*/
function customer_reminder_menu() {
	
	$items = array();
	
	$items['user/%user/reminders'] = array(
	  'title' => 'Your Reminders',
	  'description' => 'View your reminders',
	  'page callback' => 'customer_reminder_list',
	  'access arguments' => array('view and edit customer reminders'),
	  'page arguments' => array(1),
	  'type' => MENU_LOCAL_TASK,
	);
// ...

Reminders are saved as nodes and then each morning at a certain time the custom modules hook_cron gets run and check's which reminders need to get sent out. Here's the SQL query that finds the reminders that need to be sent:

  // Query special occasions with the target date
  $sql = "SELECT node.nid AS nid FROM node node INNER JOIN content_type_special_occasion cck_fields ON node.vid = cck_fields.vid WHERE (node.type in ('special_occasion')) AND (cck_fields.field_occasion_date_value = '%s') AND (node.status <> 0)";

At the moment the custom module that handles the reminder feature isn't very portable but our idea is too clean it up and remove some of the current dependencies so we can release it as a contributed module.

liberatr’s picture

liberatr
he/him
Primary language English
Location Portland, OR
commented

A commendable job, but I have at least one question:

Given Drupal's very powerful systems for providing "user-friendly" and "search-engine-friendly" URLs, why didn't you create a scheme for this?

Your main links all seem to be the Ubercart "catalog" urls, customized slightly (as Ubercart allows), and everything else is node/37 and so on...

Ryan Price
DrupalEasy Podcast

cossovich’s picture

cossovich commented

Clean URLs are on the roadmap. This was our first Drupal project so there are quite a few features that didn't make it into the launch. Since developing this site we've done a number of projects in Drupal and clean URLs are one of things we've found that Drupal handles really well. Hopefully we turn them on for this site in the near future. Thanks for the feedback.

sovarn’s picture

sovarn commented

I have found that fixing the url structures should be done before launch. Because from experience it is a pain getting the correct pages reindexed with all the 301 redirects in place.

willvincent’s picture

willvincent commented

Global Redirect helps take care of all of that.

Follow me on twitter.

mattyb’s picture

mattyb
Location Stoke-on-Trent
commented

Ditto - poor old path auto would have loved working it's magic on these beauties

mamarley’s picture

mamarley commented

Looks like a cool site, but I looked at the HTML code and there is a mile-long list of CSS and JS files right at the top. Seems as if a great amount of bandwidth could be saved by enabling aggregation.

cossovich’s picture

cossovich commented

True mamarley. We're currently chasing down a bug (with our code) which is breaks the site when we turn CSS and JS aggregation on. Performance and load times is our next priority. We're looking at how to use technologies like memcache to really achieve teh snappy.

willvincent’s picture

willvincent commented

APC is your friend. ;)

Follow me on twitter.

espirates’s picture

espirates commented

Pics of naked girls selling flowers ? Not very classy at all unless you are selling porn. I like the way proflowers does it.

drupgeek’s picture

drupgeek commented

I was about to send the URL (Impressed by the home page) to one of my female colleagues and realized a little later that it had picture of naked girls.

This is really offensive. They should categorize this as a porn site.

ruttettest’s picture

ruttettest commented

How is this offensive? Porn site? Jesus Christ...

-Mania-’s picture

-Mania- commented

Minus the customer reminder system the site is pretty much your out-of-the-box Drupal Ubercart site. A good job as your first Drupal project but I don't think this is drupal.org frontpage material. Besides some of the already mentioned basic lacking features e.g. clean urls, the site only works nicely in IE8+ and the use of html5 video on homepage is just thoughtless.

yalasta’s picture

yalasta commented

Hi, how you make the url with trailing slash at the end of url? as I know clean url in drupal is without trailing slash at the end of url.

stevenpatz’s picture

stevenpatz
he/him
commented

ASAP

joehenriod’s picture

joehenriod commented

Totally disagree. If I saw one of my co workers buying flowers from this site there is NO way they would be reprimanded.

splashworx’s picture

splashworx commented

Competition for online flowers is red hot in Sydney so you're going to want to get the clean URLs sorted and sorted FAST. The site needs some serious SEO attention too - even the basics would be a good place to start such as effective page titles, some good copy on pages and so on. It's rather bare in this department so will need attention if they want to get picked up and ranking on page 1 of Google and co. They need to be aware that if they're not ranking on page 1 then they're as good as dead in the water.

The online store product pages seem rather bare too. Is this a design consideration? Product pages will also need some meaningful copy if they're to capture anyone's attention or imagination. At present they're about as exciting as a blank piece of paper with an accompanying photo. Deadpan boring. Sorry (although this is more the client than you, I understand).

And while I understand that the client probably paid a ransom for the raunchy images, I think they're potentially alienating up to 50% of their buying audience. Do they honestly believe that women will be motivated to purchase from the site? Doubtful. Why alienate 50% of the population?

Almost there, now for the urgent cake icing.

Cheers.

cossovich’s picture

cossovich commented

Thanks for the feedback splashworx, I agree that clean URLs are a must. The client in this case is a woman who has a staff comprised of 3 women and 1 man. They're a successful business and I think they know their market well. Some of the product shots might not be to everyone's taste but ultimately the client is free to market her product as she sees fit. I think the debate about the images relates to broader issues in society or the fashion industry, not so much Drupal community issues (but I'm glad we can still talk about them in a Drupal forum!).

dottedfish’s picture

dottedfish commented

First of all, nice approach on presenting flowers a little differently. It might not exactly my taste but there are a few real flaws that I came across.

I find buying really inaccessible. You priorize it in your navigation by putting it right next to home but the selection process underneath seems flawed. You don't even really get a preview of what you're buying for example - there's potential here. I don't want to buy a bouqet of flowers for 500$ and all I get is a preview of a naked lady holding some in front of her bottom part).

An issue that really made me comment though is the bad font design which caused color distortions on a number of my panels.
I didn't go into intesive testing here but all in all I think that the fonts are way to small and are causing issues when rendering. That's not elegant and minimalistic, to me it's just bad user interfacing.
I'm talking about the mouse over effects on the categories here: http://grandiflora.net/online-store/1
Further: that scroller doesn't work well, if at all - it's horrible! Why would you cut off one of your sections with such a poorly implemented scroller? I didn't even see that there is such a thing the first time I was looking at it. Not minimalistic but a bad user experience. If you test that with random people you'll see that most of them wont find these "hidden" sections at all.

And what's with the URL in the shop section? Clean URL's are needed there I believe.

Over all a different take on the presentation of flowers but I can't really get used to the design and it's approach on interfacing. There's room for improvement though and I'm sure it's a great place for people that are interested by this kind of design.

queenvictoria’s picture

queenvictoria commented

We're working on a revision of the scrolling galleries. Glad to have your feedback on it too - confirms what we're thinking.

Overall there is a bit of a design review in the works post launch. It's been great to get everyone's feedback - in particular the Drupal community. It really highlights what aspects are of most concern and need addressing quickly. I think the short list's in these comments!

JayNL’s picture

JayNL commented

you've used and .ogg video on the homepage instead of flash... Much appreciated! :) Native controls in my browser just run faster than loading in a plugin.

The naked model and cool photography make it truly stand out from the rest. The model has an excellent body as well. The only thing I can say is: be careful with semi transparant texts, they can look edgy and blurry in some browsers. To stop that, add a background-color to the (semi) transparent items.

cossovich’s picture

cossovich commented

Yeah that's a recent update to the homepage... HTML5 made that super easy, we really like the way it gracefully handles the multiple versions of the one file and picks the first one that the browser supports ala:

<source type="video/mp4" src="/sites/all/themes/grandiflora/libs/flower3_15_2-crop.mp4"></source>
<source type="video/ogg" src="/sites/all/themes/grandiflora/libs/flower3_15_2-crop.ogg"></source>

I'm glad someone on this thread had some positive feedback on the photography! The shoot was done by Gary Heery, a legendary photographer who happens to be based in Sydney now. He has worked on a series of books with the owner of the store. People would be more familiar with some of his other fashion and celebrity work (Madonna's self-titled album cover for instance). He's also won prestigious prizes for his portrait photography.

Re: the transparency... I think we may have overdone it a little :p. Thanks for the feedback.

JayNL’s picture

JayNL commented

The photography looks amazing, really unique and just very cool. The photographer has an amazing portfolio as well, great stuff.

Re: the transparency... I think we may have overdone it a little :p. Thanks for the feedback.

you're so welcome! Keep it up!

venusrising’s picture

venusrising commented

Gorgeous Looking site. The simplicity adds such class and appeal, cheers.

venusrising