Lottomaticard

Official App

Lottomaticard is the Home Banking management service belonging to CartaLIS Istituto di Moneta Elettronica. Yes indeed Lottomaticard services supply clients of CartaLis with useful, endless and detailed financial features such as money transfer, charging prepaid cards and phone cards, bank account check and many other features accessible by a wide variety of prepaid cards (Paypal, Italo Più, AS Roma, US Lecce, PokerStars, Reggina, Lottomaticard Easy and Limited edition).

Study, experimentation, design and code of components for User Interface Design implementation purposes on behalf of the CartaLis customer. Specifically, animation of data visual used within the Lottomaticard app to indicate the current account balance. Produced some prototypes along the way with Framer and they tend to be either long or short flows with many different or few states. Doing so, I often come up with different ideas while building Ui blocks all over the interface like the one I'm sharing down below under this project Lottomaticard I was committed to. It's a sample animation as a way of how you can handle an hypothetical cirlce graphics inside an app prototype.

I dedicated an article on the technique and method adopted, while in another article I tell how the drawing is the starting point of every design. I even talk more about framer animation at spinning ring article

3D Production & User interface Design

The design of the components began with the first step in 3D modeling, in order to think about the composition that such an object should assume. In fact, a reasoned structure is crucial to define the code process in the next step. The 3D production went hand in hand with the drawing, in order to understand what was the best logic to animate the value of this Donut component

Front End Development

In this phase the design is translated into the code process, to give life to the Donut component and test the Motion Design at the command of a button. Based on the experiments obtained, the component was then used into the prototype of the Lottomaticard app and thus covering the need for the balance movement function of prepaid cards.

Check out the Lottomaticard app version 2016 I designed so far including this ring animation

Prototyping

The goal was to visualize the money balance of prepaid cards in the form of a pie-graph — eureka! spinning rings like spinning wheels, bro! They're spinning'!!!