This final post of the lifetokens process series is about the last big phase of the project, the lifetokens webstore. It’s almost an injustice to condense the entire site down to a single post because it was really more like half the project. As with any online store, the site is the face of the whole company. Someone browsing Gapers Block or notcot for interesting things is not unlike someone strolling down a city street looking into storefronts. We knew it needed to be grabbing, friendly and most importantly, it needed to say what lifetokens is right upfront.

This whole project has come together in a very different visual style than I am used to working in, and this is a very good thing. It isn’t that I am not a colorful, friendly designer… we just tend to have, for lack of a better word, more ’serious’ clients. From a selfish view, lifetokens is a wonderful addition to our portfolio for this reason. This shift in style really became apparent to me when I began working on those first homepage mock-ups.

This is just one of several mock-ups that slowly got us closer to the final site design. When we began work on the website we first mapped out all the functionality we needed to create to have the perfect lifetokens.com. There were going to be some interesting challenges in developing but the design and organization of the site should be pretty simple. Text and images should be big and bold, colors should be bright and eye-catching and it should be very clear where to go for more information or to purchase a token.

It would eventually take a very conscious effort on my part to steer away from what we ended up calling the ’software’ style. This mock-up is clean, well organized, everything you need for a decent website. The problem is you could substitute lifetokens for anything and it would work just as well.

What we needed to figure out was how to give the site the same character we had given to the logo and tokens. We began by flooding the site with color. The backgrounds were no longer white and we even used color as the basis of the site organization. Any general site pages (home, how it works, T&C) would be blue, the shop and checkout would be green, about & contact and the retrieve page is yellow and personal account pages would be red. This worked really well as a method of organizing and separating each section while still having the site feel cohesive.

If you haven’t done so, poke around at lifetokens to see what we mean. The rest of the design really just fell into place with this system.

The retrieval page is the exception to that rule. When someone receives a token in the mail and then takes the time to retrieve it, we wanted it to be a nice rewarding experience. Nothing flashy or over-the-top, just nice. By using Flash we give the experience a little movement and audio. The user enters the code on the back of their token. The Flash movie contacts the database, receives all of the information attached to that code (token design, sender, message) and populates the page with that information. The token then flips and a simple chime (b-flat scale!) is played. Nice…

So that’s it, I would like to thank you for reading all of the lifetokens process posts. You deserve a lifetoken. If you enjoyed them let us know and we will keep doing them for future and past projects.