Nyala –that means antelope and is also the name of the capital of South Darfur– in is a little girl that needs to reach a source of clean water. It is 5km far, each click makes she run for 1 meter. Can you beat the game?

In collaboration with Alice Pintus and Francesco Carletto we given a new identity, developing custom tools for creating textures.

Textile, creativity, customisation and flexibility are visually translated into dynamic generated textures

With Latte Creative I had the opportunity to participate to the redesign of Amnesty International Italy website as Design Director and Product Manager.

BRIEF AND GOALS

• simplify the user experience and optimize the user flows
• enhance campaigning aspects, as lead generation and fundraising
• inform the user about Amnesty activity and related world news on different levels, based on the context of use of the website

METHOD

Who is the user of Amnesty International Italia website and what does she/he look for? Answering such questions was the first step towards a redesign of the user experience. Through an accurate user-research based on a poll and several tests, we were able to identify scenarios and personas, define high-priority activities and effectively meet the user’s needs.

We defined 3 different personas. Focusing on extreme target we were able to cover multiple aspects of Amnesty supporters and prospects.

UNIFIED DESIGN

Moving from the idea that today web users are multi-screen users, we designed a unified experience, which provides a coherent passage from one device to another: you can start a session on your desktop computer and complete it from mobile. We implemented the signing-up flow with specific features, such as the recognition of the user and his/her previous actions.

INFORMATION ARCHITECTURE AND USABILITY

For me was a great opportunity as design director and frontend developer to create a solid, smooth and usable solution to allow users to explore data and facts about Enel’s energy.

Screenshots

Animations

All the web application behave like a single page with areas expanding and showing the content. All the animations use the GSAP library.

Design iterations

Campaign Logo

My first proposal was a combination of sea, dead fish and a oil plant, to communicate the risk of the offshore drilling for the sea. Despite the client liked the work, they reject it.

We started working again, to make more explicit the threat to the whole Italy.

Interactive header

In the interactive header the user drip oil over the most representative italian coastline and cities moving the mouse. The tool is a combination of Google Maps, panning different locations, and an interactive canvas built with Paper JS.

Illustrations and cards

Below a serie of illustration explain the reason to join the campaign and vote to the referendum.

INTERACTION DESIGN

The website is designed to optimize the sign-in and explain the reason to join the campaign and take active part.
The form in particular is specifically tested to reduce the friction during sing-in and using the Floating Action Button, also maximize the sign-in from mobile devices.

TOOLS

Some tools developed for the project:
Drip tool – developed in PaperJS to simulate the oil drip on the map, it’s possible to generate and download a SVG of the visual result.
Map tool – developed using Google Maps API to collect images from the service.
Prototype – the first prototype used to explain the idea to the client.

Now loud your speakers and enjoy the result:
andreapinchi.it/spacereactive/

worthwearing.org

The project, still in development, has many aspects and with Latte Creative, we spend a lot of time to design every aspect of the platform from the business model, to the purchasing process, from the marketing strategy to A/B test, and I had the opportunity to take part in every part of the creation.

Designing the Identity

The brand identity was a bit challenging, because we needed to design for final users and for NGOs. Here is how I managed and directed the work

When I first come to Turin, walking through the big royal boulevard or the small roman alley, I was impressed by the good quality of old signs, usually painted by hand: they are elegant, well crafted, original, and many of them are still in their original place.

This project is a collection of the most inspiring letters and character I’ve found, is a ode to good typography, crafted by designers – or better, artisans – who carry out their work with passion and competence, being to me a great source of inspiration. When possible, the author of the original artworks is always indicated.

To replicate the letters often i had to rework them, sometimes I’ve chosen to keep some imperfections of shapes or perspective, some other times I’ve adjusted them or restored the ruined ones.

The website is not available anymore.

www.savethearctic.org

In this project I was responsible for the overall design, interaction and user experience, I was also responsible for the accounting with the client and the leading of the work team.

Despite the main website is composed by a single page, the project was tricky because Greenpeace is organised in many independent offices, one for each country, each of them had to be independent for content management and each one had different needs about content, policies and data management.

We built from scratch a flexible CMS, giving the possibility to each national office to change layouts and contents, to manage the collected emails, with specific tool to export them to other existing tools and to create separate sub-petitions. Each feature was tailor-made to fit not only the needs of each office, but also to match their own workflow, reducing their learning curve.
Here was our project’s requirements Greenpeace gave to us:

• Increase conversion rate
• Responsive website, ability to work on different devices, optimized for tablet and smartphone
• Easy and friendly CMS: easy and fast to implement with new plugin and features
• Multilingual website
• Easy to create new petitions, with same petition engine
• Improve the performance of Facebook connect
• Optimize and design the thank you message and thank you email

The layout and graphic was designed to be goal oriented but we wanted to make it catchy, modern and fresh at the same time.

The default theme has on the main area the animation of a melting bear-shaped ice floe. We also developed the possibility to insert instead pictures or video from youtube, because the campaign goals can vary during the time and we wanted to allow them to refresh the appearance to gain more signs.

For the main animation we used paper.js. After a quick sketch on paper, I used a scriptographer voronoi tool to create ice pieces in the shape of a polar bear.

Importing the SVG into the canvas we animated each piece to make it melt.

The animation is quite simple but has great impact, you can see the final non-optimized version here: Paper js animation (best viewed with Google Chrome).

This is one of the most important project I developed with Latte Creative, because of the international impact of the campaign and the prestige of the client.
Furthermore was a great occasion for me to help in this great campaign, to give my personal contribution to save our Arctic. You can contribute too: sign now to save the arctic!

Graphic design

“No country for young men” is my final project: an interactive data visualisation.

Italians often complain about their politicians being too old and detached. But are they really?
The project allows users to explore and find out the ages of Italian Parliament members, viewing data distribution over time and by legislature. The patterns and trends that emerge give insight not only on Italy’s political history, but also on the history of the Italian people as a whole.

The data visualisation includes an “equalizer” showing the distribution of MPs by age through all italian legislature, a tool to highlight the oldest members with the possibility to search and highlight your favourite parliament member, a line chart with three lines indicating the youngest, the oldest and the average age in each legislature.

The project was also commented by Federico Anghelé, an expert in political science, who helped to find the reasons behind the patterns discovered.

Explore and interact with the visualisation here: www.andreapinchi.it/dataviz

Preliminary graphic research

I worked in the early steps of the project to study and test the overall look and feel. I presented many different proposal mixing different graphic styles and material, then I chose the fonts with a particular attention to the readability.

Illustrations

I also realized all the scientific illustrations of the different cetaceans species, we needed to realize them as a vector illustration to allow every kind to application

Final graphics

The cetaceans was printed on a proportional scale to allow the visitors to compare their dimensions.

“The finger” proposal simulate a mouse pointer showing the middle finger, the famous hate gesture.
The “Traffic light” proposal transforms the symbol of the campaign – a red heart – into the red light of a semaphore, inspiring people to “stop” the hate online.

Here some imagine of the app at the moment we launched it, in 2012:

Graphic design

First we designed some preliminary ideas on the look & feel:

Feature list

The app was very complex not only for the feature’s list, but also because we should integrate it in the pre existent system and guarantee perfect integration with their CMS and website.
Main features are:

• explore written, video, and photo content, particularly on films in the Middle East.
• engage with DFI and your friends via social media integration with Twitter Facebook and Instagram.
• buy tickets for DFI screenings and events
• get movie showtimes for cinemas in Qatar
• support for English and Arabic language

Wireframing

Documentation and specs

The Ribbon effect with CSS is very easy to obtain and took me few minutes to invent and code.
Have a look to the Demo Page

Here the basic HTML of the page, note that you can add the effect directly to the h2 element, I’ve wrapped it in a div element, just to have more control on the element’s padding and appearance:

Ribbon on the left


Ribbon side to side

The CSS code for the Ribbon aligned to the left:

.ribbon{
	color: #fff;
	margin: 30px 0 50px;
	position: relative;
	text-transform: uppercase;
	background: rgb(0, 164, 239);
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: 0px 1px 3px rgba(0,0,0,.2);
	padding: 10px 15px;
	clear: both;
}

div.left_ribbon{
	color: #000;
	margin-left: -10px;
	float: left;
}

div.left_ribbon h2{
	margin: 0 12px;
}

div.left_ribbon::before{
	display: block;
	width: 10px;
	height: 0px;
	position: absolute;
	bottom: -10px;
	left: -11px;
	content: "";
	border-bottom: 10px solid transparent;
	border-right: 10px solid rgb(0, 80, 116);
}

div.left_ribbon::after{
	display: block;
	width: 6px;
	height: 44px;
	position: absolute;
	bottom: 3px;
	right: -1px;
	content: "";
	border: 1px solid rgba(0,0,0,.3);
	transform: skew(0deg,45deg);
	-ms-transform: skew(0deg,45deg); /* IE 9 */
	-webkit-transform: skew(0deg,45deg); /* Safari and Chrome */
	-o-transform: skew(0deg,45deg); /* Opera */
	-moz-transform: skew(0deg,45deg); /* Firefox */
	background: rgb(0, 80, 116);
}

and CSS code for the ribbon extended side to side

div.both_ribbon{
	text-align: center;
	color: #000;
	padding: 10px 9px 10px 10px;
	width: 100%;
	margin-left: -10px;
}

div.both_ribbon::before{
	display: block;
	width: 10px;
	height: 0px;
	position: absolute;
	bottom: -10px;
	left: -11px;
	content: "";
	border-bottom: 10px solid transparent;
	border-right: 10px solid rgb(0, 80, 116);
}

div.both_ribbon::after{
	display: block;
	width: 10px;
	height: 0px;
	position: absolute;
	bottom: -10px;
	right: -10px;
	content: "";
	border-bottom: 10px solid transparent;
	border-left: 10px solid rgb(0, 80, 116);
}

“Piece #1 of a collection of app that will shake your creative juices flow.
Marvelously useless, Lyh app plays with the amazing randomness of language, generating a large number of silly three-words phrases.
Lyh is an eclectic blend of automatic writing, interlude, and attempt to find possible unexpected combinations.”

I developed the app with Javascript, HTML, CSS and then incapsulated into a PhoneGap project and sent to Apple. First it was rejected because “useless”, and then accepted because we explained that that uselessness could be useful.

The user can play with the words creating hundreds of different three-words phrases, change the background, share the result in a tweet and take a snapshot of the screen.

I’ve participated as Lead Graphic and Interaction Designer in the Hotpoint Innovation Area project, wich explores how technology could improve our domestic life and make it a more sociable, connected and sustainable experience: a glimpse into how we can create smarter kitchens, homes and cities starting from our domestic appliances.

Eurocucina – Salone Internazionale del Mobile (Milan, April 17th – 22nd, 2012)
Concept and exhibition design by carlorattiassociati
Interaction and media design by ToDo

iPad app

We built a complete iPad app to allow users to control remotely the kitchen appliances and to simulate a smart home control UI.

iPod touch app

Another small interface was placed on every single appliance, we used some iPod touch to simulate an interactive display. Both application were in sync to simulate the control of the programs and the specific functionalities.

Multitouch induction hob

There was also a multitouch table, simulating a futuristic induction hob.

The work was not only to make everything looking good, but also intuitive, easy to use, realistic and accurate, so we developed the concept and designed the interface and the interaction at our best.

Research and test

Here we were testing the multitouch table, with a preliminary paper prototype, simulating the system we was about to develop.

Each action for the iPad and iPod applications, multitouch table and wall projections were first designed, wireframed, mockupped and then tested, producing also a full documentation of our work.

Here a functional wireframe, a detailed mockup for the iPad application and some preliminary sketches to define the flow and the main features of the area.

This project was definitely one of the most intense of my career as interaction and graphic designer with ToDo, because it required many cross-field competences and the product needed to be completely functioning.