Explaining app mechanics with animations
Animations got the power to explain particularities of custom app mechanics. This is how its made in yep! app.
What is Yep!
A year ago I started to work with Yep! founders Roman and Alexander who wanted to change the way people meet. Simple service that should allow people meet each other and spend time together doing what they both want to do right now.
Lets say you want to drink coffee with someone interesting. You see people around who are ready to do the same thing within next hour. Choose anyone, discuss details and go to drink coffee with someone interesting.
App mechanics feature lots of peculiarities that we are going to test on strength within next months. That will become a matter of future posts about yep!
yep! is currently available on the Appstore for free.
Meaningful Animations
Since iOS came out I was impressed with a power of meaningful animations. Animations can build beautiful non-computer paradigms inside users mind. No long text explanations but with showing. Most simple example is an item that jumps inside the trash bucket when its deleted. Computer programs became just apps, as they no longer feel “computer” and non-human. Today as skeuomorphism goes away meaningful animations remain, they are just no longer so much connected to real life objects.
Check Meaningful Transitions site for simple yet understandable transitions.
As we worked on yep! UX building first wireframes and prototypes we came to a conclusion that app should be visually very clean with interactions showing the mechanics which is not a standard one for meeting or dating app. This approach has two positive sides: 1. Animations explain whats happening right now 2. It brings more life and emotions to the app usage (which is important for a leisure app like yep!). From the development perspective that means code custom animations that are additional time and money. Still we added basic animations to MVP.
In yep! we got linear flow: choose activity > post request > wait until search ends > see results (matches) or get message that no one is around (search will continue for 1 hour). All stages are different screens but with animations we can show transitions that will make them feel one screen transforming from stage to stage and make user understand what is happening. Its Apple approach that perfectly works for native iOS. But as we have linear scenario we can go with more customised gamification.
Choose Activity
In yep! activities are shown as coloured circles with icons. Each activity type has its own colour. Regarding to activity colour all action colours (links, buttons) within activity corresponds to this colour.
As app starts activities appear clockwise. Sport and Events got list of sub activities. Sub activities appear the same way. In this case these animations are more “candy” looking additions to make user feel that app “lives”. Bringing emotions to a minimal look is essential.
In this animation you see activities appear, than Sport is tapped and sub activities appear.
Post Request
This is where we start transforming screens to make user flow feel smoother and explain whats happening.
These are the stages from the animation below:
- Choose activity (meal, coffee, running, movies etc.);
- See your request ready for posting. Optionally add venue and additional description;
- Post request;
- Wait while yep! searches within 50 km radius;
- Get results (not presented in this animation)
On video above user choose Meal activity and activity circle goes up transforming into a map pin. That gives an understanding of location based mechanics and clearly connects activity type with location (ready to have a meal here).
Next after you tap OK map pin drops into the center of radar, map zooms out to 50 km radius showing user location is in the center of search.
As a conclusion user see activity element is “traveling” from stage to stage.
UX improvements and mistakes.
On a previous version of app we got other design for request screen (second stage after you choose activity). Our first approach was to show the request screen with name and photo. Same as how other people requsets look when you browse through matches. Main idea was to show your request as others will see it.
Still the screen did not work well. Mixpanel showed people where distracted with their photos, names and profiles. We were loosing to many users on this stage as they did not posted their requests.
So we cleaned up everything that was not related to request, everything that distracted people.
Main things here is to review location, optionally choose venue and write additional description. We also added sharing (not yet released).
That worked and we raised pass-through rate from 67% to 83%. We still work on the flow to raise this index.
Send Requests
Every match got a yep! button below his or her request. Tapping this button means send a request to meet. If user accepts the request the chat starts. Users can both send and get requests.
I decided to make an animation where yep! bubble appears from bottom and disappears on the top of the screen. This “push” direction clearly shows “sending” movement FROM user. Bubble stops in the center with a message that request was sent (this is where you can also withdraw your request), tapping the screen proceeds the movement of bubble.
Get Requests
Getting request (getting yep!) animation is close to how you get chat messages in Facebook app. Its in up right corner with avatar. Users can both tap these notifications or continue browse matches and see these requests within stack of matches.
Work continues as we have a bunch of improvements coming this summer and fall. There will be an Android version as well. I will keep writing on yep! design and UX evolution and challenges. Please leave your comments and notes.
yep! team: Founders: Roman Sidorenko & Alexander Kukhtenko,
Frontend: Polecat
Design & UX: Keepa (Eugene Rudyy)
Check out the app on the Appstore . We will be glad to receive a feedback from you. You can also check the promo site http://letsyep.com.
