A story full of 3s
Let’s talk about the number 3.
1) What is Packed?
Packed is an in-house born app that we devised at Lateral View to simplify an everyday task for our team of developers. It’s a web application that helps users share builds in 3 simple steps. That’s right, here’s when we begin speaking in 3s. In Packed you can 1-upload 2-manage and 3-share your build. This way, developers can easily distribute their iOS and Android builds with testers during development.
It works like a box where you can keep all your builds as you go developing and sharing them with your testers. This six-sided box opens from underneath, displaying a “P” that turns out to be the logo for Packed.
This week, we launched the landing page, to welcome new users and explain how it goes. We chose to present the app with a visual game making use of 3d CSS3 technology (I don’t know about you but I see nothing but 3s). It’s one of those landing pages that makes me proud to design. Mostly because it was the result of a long process. A year ago, I started working in Lateral View and my third project was of course, Packed.
2) The problem that needed solving: To create an innovative landing page for a product our own product.
Back then, the team came to us with a proposal. “We have a landing page, but we want to be surprised”. The marketing & development team contributed with the content and the design team with the first sketch. It was a traditional webpage made up of step by step illustrations and photos and a call to action button.
We wanted to make it more appealing so we developed version number one, where we produced a video showing how practical and simple Packed was. The landing page was ok but not great…remember there’s something about number 3!
So we began version number two. It was then that 3d came up. After a creative brainstorming, we decided that the landing page should be a big box that users could interact with. This way, we would reference the box that’s part of the logo.
The best way to devise a first sketch of a 3d object is to leave your flat screen and build it with paper. We cut and glued a box that we could manipulate by hand, unfold and play with.
After, we transferred the sketch into the first digital tests in the computer. Everything was done with CSS3. We created something simple and fast in codePen, ready to share and convince. This allowed us to give the brand some body and volume, turning it into something more tangible.
Convinced with our project, we created a new design, taking into account that 3d would be our main technology. We took advantage of Javascript, modified the shape of the box according to scroll, allowing it to explain in 3 steps what the product is about.
3. The lasting solution.
It wasn’t until the third version that we were ready. The previous webpage worked well in a technical sense. It had the necessary information, but we had branched out. There was something missing. The landing page was created by 3 people. Along with the team of the designers, Yesi and Elisa, we saved the whole process and started once again.
It doesn’t matter how many times it takes to recalculate. The important thing is to free yourself of any limits and try and forget what you’d been thinking about all along. What’s really worth it comes back in another way. We needed to create a space that occupied the window. We created a limitless space, a big grid in a world of 3 dimensions, made up of squares, boxes that safely store applications so that your contacts can easily download them.
The result, was like attractive visual candy, something that lives up to your expectations and communicates what it needs to communicate. Also, it has a likable backstage story to it. But above all, it’s a story full of 3s.
