I've met and interviewed a lot of inspirational people thanks to CycleLove, many of them building cycling brands from the ground up with no outside investment. So bringing their products together in the same shop seemed like it would be an interesting and mutually beneficial experiment, however it panned out.
Working together with Fiona Mandos on the shop has been a hard knock lesson in the principles of unDesign for both of us. We've been learning copywriting, inventory control, art direction and modelling (!) as we go. Often with not anything near the recommended daily allowance of sleep or nutrients as a consequence.
But I think the hard labour has been worth it.
We designed and built a fully responsive e-commerce website — with thanks to code sprinkles from Sev Furneaux.
Letting go of pixel perfection
The budget and timescales for realising the CycleLux website were tight. Really tight. So we knew the design had to be simple.
I sketched out three layout options. The first was a bit too hipster. The second was technically much harder to build, because the product information (marked in green) would be sliding open on the homepage. And the third option felt, well, about right...
But the design was a fixed size. Connected devices aren't. I'd reached a crossroads. The options before me: design multiple versions of each layout in Photoshop (yup, tedious as hell) — or — build a prototype layout in HTML.
I decided to take the untrodden path, and started coding up a simplified version of the design. And I think I made the right choice.
But it raises an important and often-asked question for anyone working in the world of websites.
Should designers know how to code?
I don't think there can be a definitive answer to this. Different people work in different ways. Not every designer needs to know how to code. Some studios don't let designers anywhere near code.
So mine is: just enough.
Have just enough knowledge of HTML/CSS to bash out a layout.
I don’t do it every day so I have to Google a lot of things as I go, but that’s ok. The internet likes to teach you how it works. So let it. Or go on a course like those offered by Steer here in London, and take a crash course in front end web development. It's worth it, I think.
Anyway, back to the CycleLux design.
How was the basket going to be made visible on a mobile device? Well, now I could code up a solution and see how it felt. Not how it looked, but how it felt, to use, to scroll, to touch. You can’t do that in Photoshop.
I googled a few responsive grid frameworks and settled on the one with the smallest footprint that I could find — the helpfully named Responsive Grid System Calculator — and changed the number of columns to 6.
Within a couple of hours I had a squishy version of a product page up and running. Check out the prototype here. And a hat tip to Brad Frost for creating a viable alternative to the term 'responsive'. Squishy sounds so much better.
With something interactive to play with (both in my browser and on my phone), the design decisions became much easier. I'll be experimenting more in the space between Photoshop and the browser I think. It's fun.
In the end, the final product page doesn't look hugely different from the prototype. We removed the slideshow and flowed the images into a single column to make the layout and interaction less fiddly. But the rest of it is pretty close.
The (budget) CycleLux technology and ecommerce stack
The shop: Wordpress is the only CMS that I'm well versed in. So the Jigoshop ecommerce plugin, which I've used before on CycleLove shop, was really my only choice for building the CycleLux shop. It's free, although you do have to buy for plugins to do anything beyond the basics. If you're not a programmer or Wordpress expert though, I would recommend using something like Shopify instead. I might do myself next time, as Jigoshop often doesn't quite cut the mustard for what should be simple tasks.
Hosting: after a quick/confusing dalliance with Digital Ocean (yes, command line = hard for beginners), was no-brainer, and I upgraded our existing WP Engine account to allow for multiple domains and SSL. Their hosting is unbelievably fast and stable, although the support for UK customers seems to be a little slow off the mark. (They tell me they have plans to have European support staff soon, so I'm hoping this will change).
Payment processing: Stripe. Bye bye PayPal, hello lower transaction fees and in-page payments.
Web font: Fontdeck. $12.50 a year. Money well spent for a beautiful typeface like Apercu, I think.
Shooting the CycleLove collection
Although I've shot a lot of bike related things using my SLR, I haven't work with models before. Luckily a friend works as a production assistance and gave us a lot of pointers, as well as shooting Fiona and I wearing the new CycleLove tees. Cheers Graham!
We started with a mood board: an indication of tone, content and style. One of the key reference points was Outlier, who have absolutely nailed the whole performance casual wear thing. Here's how it looked:
The day before the shoot, I went out and took some test shots.
Tip: if you're shooting in commercial or public spaces, go early. Really early! That way you won't piss anyone off.
On the day of the shoot, everything went relatively smoothly. Shooting a t-shirt collection outside in late November was never going to be warm. Maybe next year some bobble hats and sweaters would make more sense. But we had a shot list, a mood board and a timeline worked out. The less decisions you have to make on the day itself, the better.
The kit: my trusty old Canon 400D camera, and the Canon f/1.4 50mm lens. You have to stand about a mile away from your subject matter, but you won't find a better lens for under £300. Takes great shots even with a basic camera. Pretty much the only lens I use these days.
The launch fallacy: if you build it, they won't come
But we were too close the project (and too tired after three weeks without stopping) to put anything together. Don't make that mistake — plan how you will talk about what you are doing, not just how you will do it.
We sent out press releases of course. But without a story, a press release isn't of much use to a journalist. I still believe that CycleLux has a great story. Perhaps we haven't told it as well as we could have done.
Which is why I wanted to write this for you — if you are building something yourself, I hope it helps in some way.