#StopWarInUkraine Save the children

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers

Peter Westendorp Talks to us About Foldable.me

Article by Awwwards in Design & Illustration -

Peter Westendorp is a front-end developer who has worked for nearly 2 years at Mint Digital in London, though he is from the Netherlands.

Peter has been part of the team for Mint Digital’s project Foldable.me’, a creative kickstarter-funded project to let anyone in the world create their own cardboard friend.

Our colleague Martha, from the Awwwards team, was at the recent Future of Web Apps conference in London, and took the opportunity to interview him and learn more about Foldable.me straight from the horse’s mouth.

  • Question Awwwards Team: How did Foldable.Me come about? Whose idea was it?

    Peter Westendorp: Every year Mint Digital goes away on a Hack Week. This year we split the company up into 3 teams with the goal of launching a profitable business in 4 days. My team was brainstorming, and my colleague Richard came up with the idea of creating a website around Cubeecraft, and basically letting people be creative with it and customize it. So that’s how it started, off the Hack Week.

    Question And so you had to actually launch it within 4 days?

    Yeah. And that’s where we cheated a bit on the brief. We had something ready in 4 days, we could take payments. But when we got back to the office we decided together that this was a good idea, and it would be silly to launch it as it was at the time. We thought we’d rather polish it, make a beautiful product and then put it on the market. So that’s what we decided to do. We worked on it for 6 months and used Kickstarter to see if there was any interest.

    Within half the time we got 1000% of the funding. It was really encouraging.

  • Question What was the experience with Kickstarter like?

    It started with the Cubeecraft market, but we wanted to build on that, so we put it on Kickstarter and apparently it worked. Within half the time we got 1000% of the funding. It was really encouraging to see that there were so many people out there who were really interested in the product.

    Question How do you prepare a project for Kickstarter? What are the requirements?

    A lot of effort was put into figuring what we'd need to do to bring this to market. This meant making sure we knew how to approach the manufacturing, fulfilment and the costs involved. Once we had that it was a case of putting together a strong video that showed the story and vision for Foldable.me. Finally, our experience of a previous Kickstarter project taught us the importance of doing our own marketing to get things rolling. This meant reaching out to friends and family as well as blogs and press outlets.

  • Question Did you consider using alternative technologies?

    Not at the time. It came out of this ridiculous setting at the Hack Week, sitting in a bar joking around. So we had this project, I started working on the front-end and my colleague, Phil, was like “We need it in 3D!” and I said “No way, we can’t do that”, and he was like “Sure we can”. So I said I’d give it a try and it actually worked quite well.

    I didn’t consider 3D alternatives, it was more a question of “Are we going to use 3D CSS to do this? I think it was a valid use-case and because of the nature of the technique, if the 3D part of the CSS isn’t supported it just falls back to 2D. We don't want to break the user flow in older browsers. If people don’t see that model, they can’t buy a Foldable, so we needed that to work. I would say other techniques are not really useful for this particular use-case. WebGL for instance, it either works or it doesn’t work, it doesn’t really gracefully degrade.

    If you want it to be a profitable business you’d better make sure it works on most browsers. You don't want to turn away potential customers just because they are using an older browser.

  • Question How are the Foldables produced?

    Each one is made to order in the UK. They are printed on heavy stock card with a matt laminate finish. We precision cut and score them so there's no need for scissors or glue. We offer worldwide shipping for free and aim to dispatch them within 24 hours of receiving the order.

    I worked on the project from the start, and then I worked on other stuff for a long while, because we all work in sprints, we work on different projects, so for a little while I wasn’t involved with Foldable.Me anymore. When I got back on it I saw what we did to it and saw the improvements on the physical product as well and I was really impressed. That was pretty good. Since we’ve gone public with the final version it’s definitely improved a lot. Just tiny little things, but it’s really nicely polished.

  • Question What kind of success are you having at Mint Digital with some of your other projects, such as Stickygram or Olly & Polly?

    Every year Mint hires a group of interns, graduate students, who work to a specific brief. Olly & Polly were created for the brief “Bringing the online world to the offline world”. They created these two robots, a smelly robot and another which gave out gumballs based on things that were happening online, so if you got retweeted they would give you a gumball or a whiff of perfume. It created a buzz and got a lot of exposure but they were ambitious projects and in the end did not hit the funding requirements on Kickstarter. They are still regarded as worthwhile projects for Mint with lots of lessons learned along the way.

    Stickygram is a magnet printing service based on Instagram, which was actually there before Foldable.Me. We recently did a huge redesign on the whole website and made it responsive, so people can buy it from their phones and that works really nicely. There’s a great Instagram community that’s really active. That’s definitely a big success, so we’re hoping we can push Foldable.Me in the same direction.

    Question What technologies are Mint experimenting with now?

    3D CSS is the latest experiment. We’re always looking out for stuff that’s out there and how we can improve our workflow. Andy Appleton, my colleague, was speaking at Future of Web Apps on the modern Javascript application, for example. A lot of things might not be very visual, because we’re pretty tech-focused. We’re starting to work with the more modern Javascript applications, taking front-end languages more seriously than I think developers in general used to do. The front-end side of the business is moving on so fast, and getting more mature, so there’s always stuff out there that we can use and learn about and definitely start employing it as soon as we can.

  • Question I get the impression you’re something of a pioneer in 3D CSS. How does that feel?

    3D CSS isn’t that new. It’s been around for 2 years maybe, but all I’ve seen so far is demos. They’re nice, and it looks nice, but I can’t really see how I would use it in a site. We just happened to have a product and a service that completely fitted into 3D CSS. Our product happens to be square! If the shape of our product were different, it would be a completely different story. In this particular case it does work. However I do think there’s more to 3D CSS, and there are definitely more use-cases. So I’m just hoping to show that it’s ready to use and you can use it if you want to, and get the community involved. I want to see people consider it as an option. We shouldn’t let this become the new Flash, where people were annoyed because it was used in such a bad way and avoided the technique. The technique is still brilliant, but it’s just got such a bad name. If we do it right then it’s brilliant. Someone already said on Twitter, “It looks amazing but I can see this being used in so many bad ways”. People do like showing off, developers like showing off!

    I have a tendency to push things a bit too far. I was testing an experimental version of the Foldable.Me model on the iPad 1 the other day, and I just completely crashed the iPad. I pushed it a little bit too far. You’ve got to stop at some point. You think “This is awesome” but then you go to a designer and they say “It’s nice, but we might want to do it a little bit more subtly”. It’s really important to make sure you’ve got a proper use-case, and then to let a designer have a look at it. If it’s designed properly you can have some really nice 3D decorations, but there are also lots of bad examples out there.

    Question Have you got anything else in mind that you’d like to do with 3D CSS?

    I’ve done a lot, I’ve experimented a lot, seen how things work and what the limitations are. A couple of guys have demos of 3D city blocks with 3D CSS. That’s kind of cool, I tried it but I was sort of put off because I’m not a brilliant designer so I can’t make it look nice.

    On the 3D topic there’s a couple of other things I’m interested in. One is learning how to do 3D modelling in tools like Blender, or Maya or 3DS Max and to work around those limitations and start using Web GL, for instance. I’m quite interested in the more advanced 3D stuff, so that’s probably the next thing I’ll look into. We’ll see if it’s a success!

    Question Are there any other experiments in HTML5, canvas, javascript o CSS3 you could tell us about?

    I recently created a little demo of a 3D CSS ball on CodePen. CodePen is a great place to try out cool new things and share it with the community. I'm also really excited about the amazing things you can do with HTML5 and Javascript these days. My colleague Phil Nash has been speaking about HTML5 and device APIs at a few conferences recently. His talk at ArrrCamp was very interesting with lots of cool demos.

    Foldable-Me | P. Westendorp Web Site