Picbag

I worked on the UX/UI and brand identity for Picbag, a visual organization app at prototype stage.

Picbag lets users collect inspiration, intelligently tag and sort photos and image snippets, and create moodboards they can share.

Picbag promo screen
Continue reading Picbag

Taormina Jazz Festival

Every summer since 2010 my family and I, together with the cultural association Taormina Jazz, have been organizing the Taormina Jazz Festival.

Of the artists presented, some play traditional jazz, while others dedicated their musical research to more experimental forms.
We’ve had David Kikoski, Ed Howard and Nasheet Waits,
Kurt Elling, Charlie Hunter and Derrek Phillips, Kenny Werner, The Bad Plus, and many others.

I curated part of PR and the brand identity of the festival and produced several posters, program booklets and promotional videos.

Interactive Framework

I worked on the CIPD Profession Map, a framework used by HR and people professional to guide them in their work, career planning and development.
My role focused on interaction design and actual development of the interactive version of the map diagram. I also created a large set of illustrations centered around diversity and inclusion.

Profession Map diagram

Under the hood, the map is an SVG file with embedded bitmap graphics and JavaScript logic, and it’s animated and easy to update. For full responsiveness it can adapt to three different layouts. It’s also fully accessible by screen readers, and users with impaired motion or dexterity can navigate through it using either the mouse, touchscreen, keyboard or assistive devices.

I collaborated closely with the Customer Experience Team, according the Agile methodology. We followed the double-diamond model: Discover, Define, Develop and Deliver. The first two steps helped us truly understand why we were creating this framework, and who our user are and what they need: a clear framework for HR and people professionals, simple to use, something the whole profession could be proud of.

Wireframing with sticky notes
Wireframing with sticky notes

Thousands of HR professionals took part in the surveys, interviews, focus groups and workshops that led to the development of the map.

The map is a key strategic asset for the CIPD, so a great amount of time was spent reseaching how to break it down into its components and how to correctly present it to its audience.
I scribed one of the internal workshops we ran – doodling the concepts discussed and highlighting the key points of the day.

Our internal research led to the development of an early prototype. This design, however, was not yet user-centered.

Early prototype
Early prototype

The Customer Experience Team captured an enormous volume of insightful data. After the implementation of personas, user stories and empathy maps, we created a customer community for user testing and discussion, to clarify what information is appropriate and the hierarchy of the message.
Among the many calls for feedback, we specifically asked about the tone of voice and perceived boldness of our designs – comments that guided us through new iterations of the design and towards a high-functionality prototype.

Diagram layout explorations
Diagram layout explorations
The map was presented at CIPD Annual Conference and Exhibition 2018
The map was presented at CIPD Annual Conference and Exhibition 2018

Material design illustrations

I designed a large set of illustrations for the CIPD Profession Map.

This project was the perfect opportunity to represent the many diversities of inclusive workplaces, while challenging common stereotypes regarding gender, ethnicity, age, physical abilities.

We went beyond the avoidance of preconceptions to appeal to a global audience – it was a conscious use of illustration as an unbiased brand language to speak for the professional values promoted by the campaign.

The people I was asked to draw are not just neutral models. They are active characters, interacting with each other, often displaying a hierarchy or relationship of power.

Procedural Circular Animations

I always found generative art mesmerizing, so I experimented with a few JavaScript rendering libraries to create something of my own.

Click on the images to launch the real-time animations

The first one is created with the impressive rendering library PIXI.js. The other three are drawn with Two.js, which defaults to a SVG output.

Six Capitals

Illustrations of the six capitals observed by Integrated Reporting: Financial, Manufactured, Intellectual, Human, Social and relationship, Natural.
The report they appear in is part of the Valuing your Talent research conducted by the CIPD and CIMA.

vyt-capitals-preview

▶ LMO – Motion Graphics

Art direction and animation of a teaser video for an upcoming survey report by the CIPD, which inspired the space observation metaphor.
Animated in After Effects with a lot of custom expressions.

▶ Health and Well-being – Motion Graphics

Art direction, illustration and animation of a motion graphics video and related engagement media for a research report by CIPD on how HR can develop organisations with well-being at their core for happier, healthier, sustainable business.

▶ Valuing your Talent – Motion Graphics

Art direction, illustration and animation of the teaser video and engagement media for Valuing your Talent – a collaborative, industry-led movement helping organizations realize the full potential of their workforce through understanding and measuring the impact and contribution of people to business performance.
Motion graphics. Part of a larger series of animated creatives. Continue reading ▶ Valuing your Talent – Motion Graphics

AXE/Lynx ads

I designed and animated a series of rich media creatives for AXE/Lynx, for digital agency AddictivePixel at BBH, London.
axe-lynx-black-2014

▶ The Making of Oranguerrilla

This archived content does not reflect my current skills

This is the Making Of video for Oranguerrilla, my student film for the Academy of Art University, San Francisco. I really wanted to make this backstage video as it brings together the countless steps I went through to make my film.
Roughly, I spent 1600 hours of work on the project from concept art to the final edit, spread over two and a half years.


Direct link: YouTube Vimeo
Italian version here: [italiano]
Continue reading ▶ The Making of Oranguerrilla