Pixetic image
UX matters

Your product. With a better future.

Storytelling • Web • Illustration

About

Perfectial needed a way to educate their customers on how important User Experience is for their product. We created an interactive web page where customers could explore User Experience basics with a use of simple metaphors.

Challenge

The idea was to create an illustrated storytelling website where the user could manipulate the process using default browser scrolling.

Our solution

Metaphors

We wondered: How can we illustrate any product with one image? The answer was easier than we thought – a box! Any product could be inside of the box. The box is something abstract and can relate to anyone. We started with simple on-paper sketches.

ux process page illustration

A lot of time has passed and after plenty of sketching and brainstorming we finally had what we wanted. The box has been finished! Yay!

box illustration

Hand drawn illustrations

We created a set of hand drawn pencil illustrations – drawings of ourselves, our friends, our hands and heads. This made it easy to create the assets we had in mind to showcase the scenery for the story.

box in the hand

Animations controlled by users

Using default browser scrolling users can manipulate the state of which the animation is at. This makes the story fun to watch because you can pause at any given time by just simply stopping scrolling.

ux process page creation
ux process page
contact us illustration

Don't forget mobile. We haven't.

Of course it had to be simplified according to mobile tech specs and all that... But it came along real nice in the end. And we’ve also added easy-to-use navigation.

about ux process ux process app ux process app design

Check out the result.

View other projects
×
Pixetic Image