Wander'n

UI/UX - Front end

Description

Wander'n is a personal idea and project. It's a mobile application that I like to qualify as an unsocial messaging app. The user has two possibilities : to write and send a message, and to get one. But he has no control over who he send it to nor when it arrives to its destination. He just writes the message and let it wander. Someone, somewhere on our planet, will get it, one day.

My Role & Goals

We were two people working on the project, me and my friend and collaborator Yassine Arare. I defined the specifications of the app and its main features. Then I worked on all the graphic and front end aspect of the app. And finally I worked on the UI and UX design and implemented most of the front end side.

I wanted Wander'n to be halfway between a game and a simple mailing or messaging app. What mattered for me was to create an original and fun experience. When I say "game", I don't mean it in the gamification theory sense, but more in the fact that the app has a clearly defined set of rules and constraints that the user has to comply to. Wander'n's purpose isn't to make the user's life easier but to make him experience messaging in a different way.

Challenges & Solutions

Wander'n is a hybrid app made with Apache Cordova. We quickly ran into the main problem of this technology which are display inconsistencies on different devices and performance issues. As I mentionned it earlier, I wanted the app to have some fun elements. Animations were therefore important for this fun factor. To achieve fluid animations, I tried to see how different animation engines behaved with Cordova. Velocity.js and GSAP didn't give me convincing results on the 4.x Android phones. After trying many solutions, the one that gave me the most convincing results was Bounce.js. It generates CSS keyframe animations based on Matrix3D() transform.

UI Overview

earth
earth
earth
earth
earth
earth
earth
Let it Flow
Discover

Two Main Options

Let it Flow

Let it flow is where the user can write and send a message. He can also choose to let his message wander worldwide or choose a specific destination. When the message is sent, it will start to wander until someone opens it and decides what to do with it. The sender can also turn the Echo option on or off. If it's on, one and only one user will be able to give one and only one answer. If it's off, the message will never be answerable and keep on wandering. The sending animation conveys this idea that the message is now somewhere on the planet.

Discover

Discover is what allows you to get and open a wandering message sent by someone else. The user gets first the information of where the message is coming from and since when it wandered. He then gets the full message and some options that allows him to decide what to do with this message. The animation tries to convey the idea that the message comes from somewhere on the planet. There is a slight suspens in the beginning as the name of the origin of the message is not readable at first.

Keep - Throw Back - Echo

Keep

Keep

After getting a message, the user can decide about its faith. If he feels that the messages talk to him in some way, he can decide to keep it. Keeping a message prevents it from wandering. Therefore it's an action to be taken very carefully. To make it feel important and crucial, we limited the number of messages he can keep to 2 per day.

The Keep icon and animation convey the idea of keeping the message. The icon shows in a certain way that the message is going to be blocked, and the animation shows that the message goes to the Inbox.

Throw Back

Throw Back

The other decision that the user can make is to throw back the message. It allows the message to keep on wandering and other users might happen to get it as well. This action might occur in the case where the message is not interesting enough for the user or if he thinks that it deserves to be read by other people.

The Throw Back icon and animation are metaphors of the throwing action. It might be thought of as if someone was holding the message in his hands and tried to throw it as far as possible.

Echo

Echo

Wander'n isn't meant to be a chatting app. But at the same time, I thought that it might be frustrating not to be able to give an answer at all. The middle way between these two case is the Echo option. When writing a message, the user can choose if he wants it to be "Echoable" or not. If Echo is enabled, then the user who gets the message can give only one answer. The sender can't answer back anymore. This option's aim is to add a bit of thrill and suspens.

The Echo icon and animation try to convey the idea of giving an answer back.