Never Saw the Light of Day
Almost PicPac.com
We met our client on the shadow of a jazz bar in a summer day to discuss the site for a new product she has been developing with the help of a product design/ branding firm. The idea was really exciting: a new range of products for travelers to make their trips more pleasant. With a practical side to help the packing process as well as to use it in the temporary location and keep everything organized.
We were on board! The budget wasn't that much, but we decided to give our best.
Step 1: Learning the brand
A few workshops helped us understanding the brand foundation, ambition and values.
- High quality products which are both practical and exclusive.
- Focus on details (buckle) and materials in combination with smart design
- Products that solve challenges people can relate to when traveling
- Smart stacking (hang on to each other)
- Playful in its tone of voice (for product naming, PICPAC - SHUPAC - ZIPPAC etc) classic in it's appearance and "feel"
- Hand drawn illustrations for information (use, wash etc) on the products
The challenge is to find the right tone of voice since the products are genderless but the context for Men and Women are different. Show the use of the products for both travel and daily life.
Splash page was launched that day :)
Step 2: Setting the ambition levels
The brand would only release two products to start with, so we suggested launch a website to introduce the brand and those initial two products rather than making a large ecommerce-alike solution for the future and compromise the engagement of introducing the brand to the world.
1. Create stories that people can relate to & engage & share with their friends
- Not focus only on getting information accessible but connect with people
- Explore contexts where the product adds value to the situation
2. Create affinity between the audience and the brand with a sense of desirability
- Good stories
- Engaging interactions
- Good photography
3. Secure shopping with Amazon is included in the site but not fully integrated in the expression
- Amazon check out was a requirement from the client to facilitate the logistics part of the process.
4. Be present in all devices
After showing and discussing a few references we agreed that we should make the site more appealing and not another online store.
Step 3: Defining the concept.
Product rendering by Work
The product language was really the inspiration and we wanted to translate it to the web. (Although at the time we only had seen 1 product prototype). We want to use a explorative approach to the storytelling. The (product) strap had such a central role in the “smartness” of the products and in the first sketches we created some animations to see what we could do with it and the scroll.
It was an abstract exercise but good starting point.
At this point we started to develop the stories of the product qualities (ie. space efficient, works together); and contexts where can show the product in use (ie. rainy day and the need to bring shoes in bag, wearing boots; Hotel room, etc).
Next round our focus was to:
- Explore the cleverness of the products (duality status [clean and dirty section] [man and woman product] [etc])
- Focus on storytelling through photos and make the interface and interactions very simple.
- Permanent access to the BUY and to SHARE
- Avoid being futile or gimmicky — “effects for effects sake”
- Use technical language for the details (similar to the labels with washing instructions)
The main interaction was a scroll to introduce the brand universe to stop in a “cross-road” where the user could discover each product. The menu could be only a navigation aid or wayfinding, it followed the label of the product with the brand logo and was always present, as well as the Buy and Share features.
At this point it felt that this direction would be able to meet the website ambition and success criteria. We were excited and it was time to start detailing this direction.
Step 4: The narrative
Together with the client we made a storyboard to present the brand and the products. The simplicity of copy, clarity of structure and using the photography to set the tone of voice, with particular attention to show both masculine and feminine contexts for the same product.
The challenge here was to make an interesting layout to show 2 products but which could also work with 4. The goal with this page was to be the entrance point for the users to start discover each product.
Step 5: Shopping cart
Initially the shop ( and share) labels were positioned on the right side but it clearly would interfere with the scroll bar of the browser so we moved it to the opposite side. This overlay had to be minimal in width and a minimal step procedure to buy the products.
Check out with Amazon was a requirement unfortunately it was an extremely difficult procedure for our client to establish a contract. To address this impediment we developed and implemented a customized ecommerce solution.
After all (work and dedication) the client wished to pursue another direction which you can see at Picpac.com and buy the products there.
We like to share our work and learn from every project we do, while we reveal the process here you can see our site at:
The Awards
- Gold on European Design Awards 2014, Best European Commercial Website of the Year.
- Silver on CCP 2014 Clube Criativos de Portugal, Best Portuguese Commercial Website of the Year
- Awwwards Site of The Day, 21st Feb 2014
Designed by Int. & Development by Burocratik
