An overview of the shirt configurator

To give you an update: from March 2009 untill August 2009 I worked at Bivolino.com. Partially as an internship, partially as a summer job. My biggest task was assisting in the realization of the 3D shirt configurator. The 3D shirt configurator is a SaaS from BivolinoServices that allows the user to create his or her own custom shirt. The user can choose between various fabrics, styles, colors and options like cuffs and collars. Based on biometric parameters like weight, height and age, you can get your own personal custom shirt in 2 weeks. Without ever having to go to a tailor to get your sizes. And the accuracy of those biometric parameters is amazing.

Anyway, my role in this process? For a detailed explanation I’d like to refer to earlier posts in the Internship category. But basically, I designed the work flow for converting the shirts into a digital version, and apply small fabrics textures on them. The Image Based Rendering is obviously not done by me, but I provided the necessary assets to allow the rendering.

I also did some usability testing on the configurator as you see it now, and I conclude many flaws have been corrected.

But granted, I have to give credit to my dear colleagues Cedric Vanaken, Bert Schols, Bert Vissers and Isabelle Botos for their excellent work.

The main idea was to make a simulation of the whole configurator. So, navigation should be working, and selection of elements. Last week I have been working continuously to get this simulation ready. It involved a lot of CSS and javascript. I don’t think I have ever worked this hard at my internship, making such things is just down my alley. The other things were also interesting, but kind of new to me. Designing and adding interaction to interfaces is one of the things I have been doing for years.

There was a lot of work to do though, but I’ve gotten some help from my colleague, Bert. Getting that help didn’t harm me at all, since there was a lot of work still remaining. After all, we did finish the prototype, and we were ready to test.

Isabelle had written down a scenario that would allow us to identify possible problem area’s in the site. After discussing and revising the script with her, we already had a good idea of possible problem area’s. We also got some nice usability tips and best practices. I also had to download a Mac app, called Silverback. This is a nice and cheap application that allows you to capture the screen and the face of the test subject. A quite convenient app I must say.

So, the first test today went well, but we won’t take today’s results into account, since this was only a pilot run. The real deal will happen on Thursday. I’m curious at the outcome.

My workplace

This is my setup, my own laptop and wacom, and a second monitor, kindly provided by the company.

Printplot pc

This is the playah in the room, he makes sure the printer and cutter work just fine

The printer

This baby makes sure we can print the hottest pictures on your shirt….in HD!

Summa cutter

This stud gets those hot pictures cut in the nick of time!

Servers

Noisy, nothing to add…

Then the less annoying work: we finally started producing the textures for the 3D configurator. So that means taking pictures of 200 fabrics, edit them in Photoshop and export them in the appropriate formats. Admitted, it’s also batch work, but still, Photoshop beats Excell. And on a side note, Excell beats Visio.

For the print module, I had to prepare some wire frames, to get a basic idea of the flow and structure of this process. I love making wire frames in Axure, which is a program designed to create wire frames. But since Visio is the standard here, we have to download the prototyping plugin for Visio, and work our way around the various flaws of this Microsoft failure. I’m not a plain Microsoft basher, I use various apps and operating systems. If something is good, I say it, but if something is bad, I say it too. On second thought, it’s a shame that I don’t have to do the change management project, because there are some small things here that could use improvement (mainly the use of Visio ^^). But I’ll be sure to mention this in my evaluation with Michel, I don’t think anyone of the IT-minded people would mind ditching Visio .

But back to my work. We have had some meetings about the Bivolinoservices application, the 3D configurator, and the monogram module. I have to work on the styling editor of the Bivolinoservices application, together with Isabelle, front end developer. I must say, I have had some fiery discussions with her, but I keep learning from her, especially in terms of usability. She seems really passionate about it, but sometimes I have the impression that she takes it a bit to the extreme. I think a counterweight wouldn’t harm the whole project. Usability is good, and in my opinion you would have the best functioning website of the world if you strictly follow usability guru Jakob Nielsen. But just imagine how the thing would look (cfr. http://www.useit.com/)!! When you try to hit on a girl, looks is the first thing you look at.

Megan Fox, if she was a website, you'd definitely want to browse it

Why would this be different for a website? But in the usability people’s defense, if the girl turns out to be a bitch, you ditch her. Same goes for a website. And Isabelle and I have a slightly different opinion about that, but it renders some interesting discussions. On the other hand, we agree that some things can be subjected to improvement at the new website.

Then the monogram module. We are dealing with the issue of showing a preview to the customers. In the old website an image based system is used, improved by former intern Niki Dubois. But we want to use a text-based system. It is a challenge to get this working. Since plain text can’t be rotated, we have to use images. But we can render text with a custom font, and the output is an image. So there are a few options, but none of them will do, since we are limited by requirements and resources.

sIFR: a flash solution to embed non-standard fonts on your website. Marks and Spencer prohibits the use of Flash. Bye sIFR

FLIR: a javascript/PHP version of sIFR. Renders practically the same result. Doesn’t use Flash. We have no PHP server. Ciao FLIR.

Typeface.js: A FLIR alternative that renders the output images clientside, using javascript, <canvas> and VML. We have to upload our custom fonts, and we get a generated javascript file for our font in return. This works fine for us. The only thing we need to to is rotate this text. For that I found the Raphael JS library. Sadly, I can’t get the 2 libraries to work together. It is or rendering custom font, or rotating. Sayonara Typeface.

So how to tackle this? We said goodbye to Typeface, FLIR and sIFR, but not to Raphael. Why not? Raphael CAN rotate images. So, if we would use FLIR, we would have our solution. But FLIR is not an option. Nonetheless I’ve found an ASP.NET version of FLIR. I passed this on to Bert Vissers, our main developer. He did some tests, and the image output works just fine. So the only thing we need is to convert the fonts to a TrueType Format, and then we can start developing our dynamic monogram module. It was quite a hard search, since we have so many requirements and limitations. In my opinion, not using Flash for the configurator is naive. Michel thinks it is a shame that M&S says we can’t use Flash, I can only agree. Their argument is that Flash isn’t installed on all PC’s, only 98% of all users has it. M&S strives for 100%. Fair argument, and I don’t mind them demanding AJAX for the configurator. But there are some users who don’t have javascript enabled, which is required for AJAX to function well. There are workarounds for this, obviously, using page refreshing. It’s just more work for the developer. Good thing that I don’t have to develop that

Well, more new post than I initially anticipated Oo

The past week I have been working out the work flow for the fabrics rendering. I have figured out how the photo shoot for the fabrics should go, and what to do exactly during post-production. The catch is that the shot patterns should be in real size. Every fabric has a pattern, and the x and y values of the digital images should correspond with the x-y values of the real thing.

X Y values

This allows you to compare a piece of fabric with the result on the screen, and both fabrics should be equal in size (and preferably color).

The result is quite satisfying. The images have the same size as the fabrics, so this is okay. The images I’ve made so far are tileable. I can see this with the aid of a nice tool, provided to me by EDM. I get a preview of the fabric, one straight tiled image, and one with the texture UV-mapped on a test mesh. With big textures the mesh looks good, but with the smaller ones some deformation and aliasing appears. This is beyond my control though (at least that’s what I assume), and probably will be handled when the big rendering tool is ready. For preview purposes, my small tool will do just fine.

This is basically how it goes:

rendering flow

At first we extract a tileable pattern from a fabric. Then we will render it on a fabric with a dotted pattern. The result is that the tiled textured has a UV-layout and feels like real. This way we can create an interactive configurator.

This is not a new technology though. I have been doing this for years in Maya, it’s actually basic texturing. In Maya, and other 3D applications you assign a checkered pattern to your models, on which the UV layout gets calculated and derived. The textures are placed on this checkered pattern, and basically you get the same effect like above. The difference with the method mentioned above, is that you texture a mesh that you create. What we will do is actually texture a mesh, generated from a photograph. So basically, we will texture a photograph with a photograph. Sounds complicated, doesn’t it? I think it’ll work out just fine.

By the way, I have also seen a test with shadows, which makes the final result look even more realistic. Dope indeed.

Shadow comparison

I have compared our photography with the textures from Marks & Spencer, and even if I say so myself, theirs can’t compare to ours in terms of quality (and especially resemblance). I must admit though, in conventional circumstances the textures of M&S might show more resemblance, but this is due to lighting conditions of the room. We have purchased a special desktop viewer with D50 TL-lights. This is the European lighting standard, and our devices are calibrated to match with D50 illuminated colors.

The second thing I was doing (actually did it yesterday with Jonas) was testing the shirt printing process. Michel asked us to find some artistic nude on the internet, and so we did (what an array of artistic nude by the way, God I love this job!). After some problems with the TexPrint software, the Illustrator files, the cutter and the iron press, we’ve finally managed to print an image on a collar. And the result is impressive, if I may say so. I’d go to a club with this stuff (but not with the guy holding the shirt, nothing personal mate).

Print test

So, what should one do when his/her boss/mentor is on holiday. Build a party? Of course not, but tempting though. No, we were given clear instructions. My first assignment was a bit more marketing-related. My mentor found an interesting article about price comparison sites. There is a possibility to put your assortment online. I had to figure out the business plan behind this. I had to dig into information about costs, conditions, traffic etc. So I started plunging into Kelkoo.com and Ciao-shopping. Quite interesting plans, although I’m still expecting a phone call from a Ciao-shopping representative to clear out the right terms and conditions. Kelkoo offered a trial, so we can actively investigate if subscribing our shop to Kelkoo is worthwhile.

The the other thing. We are developping a system that needs some customization options. We didn’t really figured out what and how the user could configure something, so I had to find this out. This was especially information architecture and usability, but without compromising the visual quality. So I made a proposal and discussed this with my co-worker Isabelle. We did agree that some things just weren’t right in terms of usability, and we still have to discuss this with Michel and Carine. So, when they are back, we’re gonna have a word with them, and try to convince them of the usability issues that occured.

So, there I went, doing some batch work in Photoshop. Using the pen tool to remove the background, doing some color correction (I made an action for this, obviously), and saving the files with the right identifiers. Although it was a lot of repetitive work and using shortcuts, it still took me about a day to complete this task. In my defense, the amount of pictures was rather high.

Before/after

Well, even if I say so myself, the result is quite good. Doesn’t look really realistic, but I believe it’s a better representation of the products. You don’t agree? Too bad for you I’m afraid.

Oh yeah, I worked on a layout for my portfolio, and I finally found something that I actually regard as satisfying. So there is hope for this blog layout. But knowing myself, it won’t be before June, so please bear with me ’till then.

Still though, I am happy that I can finally start making something. Today I started with the wireframe for the print module of the configurator. I use a nice app called Axure for this. This is an application which allows you to rapidly design wireframes for your applications. This is especially useful for usability and content testing. I hope that these wireframes will turn out to be a good base for the full app. If so, I can start designing the XHTML structure (and maybe the AJAX interactivity) for the module, so that my fellow trainee Jonas can start implementing the asp.net code. The bad thing is that he has 2 weeks of Easter holiday now, so if the XHTML structure would be ready, we would be kind of stuck.

But then there is my other focus, the configurator visualization. Cedric from EDM has provided me with a neat tool so I can preview my tiff files on a mesh, so I can edit the texture files if needed. I guess I have enough things to occupy myself with the next days.

So, I got developer14 assigned as my internal user name. What did I do today? Getting in the work flow, understanding what the project is all about, settling myself, the usual first day stuff.

About the project. Seems that I am getting a lot of responsibility for the future Bivolino.com shirt configurator (yes, we make customized shirts at Bivolino). Me and another trainee, Jonas, have to get this configurator up and running, aswell as the printing module. More about this printing stuff later.

I will need some stuff for the production process, so I was given the freedom to order my audiovisual and calibration equipment. So, what will be arriving in the next couple of days (I hope)? Joy oh joy, a Canon EOS 450D SLR Camera, a Sony SR-12 HD-camcorder, a ColorMunki Photo and an i1XTreme calibration tool. Nice toys I’d say.

After that, I went to the EDM (Expertisecenter for Digital Media, department of UHasselt) to talk to a researcher about the general approach and working process of the configurator visualization. We will be taking pictures of shirts, covered with dots. These dots will give information about position and curvatures of the shirt. We’ll use textures from the fabrics to cover that dotted model in the configurator. More when we’re at this phase, but it suddenly got a lot more technical and scientifically than I hoped for. Nice.

This will be it for now. And yes, I do need to design a custom wordpress skin for this blog O_o.

This blog isn’t personalized at all, but that is something on my to do list. First I have to get rid of another annoying item on my to do list, an exam on Friday. After that, I will start working out some concepts for my new portfolio. Renewing my folio was already on my to do list, but due to my school this “to do” received a priority increase. Well, back to studying now I guess.

Oh yes, in general, this blog will be kept in English so my international contacts can also follow this blog (if they can be bothered that is)