It's been a long time and I stop working on this material.
Lottomaticard was among the first customers to want to oversee the newborn mobile world and thus find space for innovation, in search of applications useful for managing its prepaid and additional payment functions. A first approach was built for the first iOS devices in 2009 and then to follow from 2013 to 2019 for Android and iOS smartphones. A totally revamped app in action with a new fresh interface brought to life by a cool handy interaction model that allows users to view and manage their prepaid cards on the go!
During the explosion of the new mobile market, Lottomaticard offered the prepaid card management service for the first generation iPhones and thus positioning itself among the first customers who managed the innovation to all Italians citizens. The design was based on preliminary study considerations and along with their web online banking
The design involved the creation and management of a Style Guide to recreate the Lottomaticard style of those years and thus distribute it in its new application for visual consistency. Libraries of this kind were among the first intuitions that anticipated the concept of Design Syste, better known later in the next years.
The Lottomaticard app has seen over the years from 2009 to 2013 the creation of its first interface version and later on many adjustments to meet the iOS technology changes. Sidenote for having anticipated innovative concepts and techniques of interaction during those years of design
Several years after the construction of the first app in 2009, a concept was proposed to Lottomaticard to renew the app with the most recent iOS smartphones in mind, thus keep not only the service up to date in step with the technology, but also the interface as natural consequence. In fact, advanced interactive hypotheses were presented
Now it's about time to keep it cool and pixel perfect aligned, once you're done a lot of concepts properly. On the occasion of the planned restyling and on the basis of the interactive studies presented, some examples of the new and hypothetical Lottomaticard interface were produced
The second creation of the Lottomaticard app was addressed to the Android platforms and involved the Wireframing phase (in its first forms of technical study) in order to collect all Lottomaticard requests within a flow capable of rendering the service of prepaid cards usable through the mobile
A hard-working step that must be considered as a crucial approach to the next level. Easy to manage when app needs reviews. Following the first creation of the Lottomaticard app in 2009, a Style Guide was created to cover the production of the interface in the subsequent evolution of the service, within the mobile sphere but this time for the newborn Android platform
The Ui Design was very different from the first version of 2009, not only to meet the Android guidelines, but also to keep the pace with the Technology. Sidenote for having anticipated innovative interaction concepts and techniques such as the Card (even before Google published them in the Material Design), the Dashboard and much more
The design involved the Wireframing phase to study the newborn UX Design techniques. The exclusive purpose was laying the necessary foundations for the design of the Lottomaticard app, before the User Interface Design iteration. In this phase it was possible to analyze, study, experiment and share new forms of interaction to make the experience of the Lottomaticard service usable through iOS smartphones and tablets generation. A similar design was possible thanks to the Wireflow Library that I personally developed with the result of breaking down the interactive patterns to the smallest detail and thus visible in a visual map.
Lottomaticard was trained and educated to the mobile world through the correct execution of the mobile guidelines and thus finding a wide innovative breadth in a Style Guide that adapted across the years. Between 2016 and 2018, new concepts were created to provide Lottomaticard app with a more solid and performing structure, such as counters and the abstraction of prepaid cards.
The Style Guide was also an opportunity to experiment with new methodological processes in the mass production and distribution of assets
Based on the Concept and Wireframing study, the Ui production succeeded in carrying out a delicate restyling operation on the 2013 Android app. At the same time, the goal was to create the same app for iOS platforms by finding space for prototyping advanced such as to anticipate the times in terms of Interaction Design. On the occasion of the latter, the new mobile guidelines were thus introduced and a correct implementation of these with a modern interface and in step with the times. All with the result of offering customers a renewed and usable interface through Android and iOS devices, as well as competing with competitors in the prepaid market.
In 2019 the interface was revised in light of new additions, such as biometric access with Touch iD.
The design of lottomaticard included the innovation of Interaction Design techniques; I thus produced an interactive and navigable online prototyping. A similar demo was the union of code and design and therefore positioning itself among the most advanced and accurate prototyping of those years.
I designed and developed a very simple prototype in order to give a very quick idea of what this service could be in the shape of an ios application — Navigate demo here otherwise go full screen. At this point the goal was completing an interactive demo, exploring and comparing possible animations at different levels. Yes indeed, I had to communicate my vision to the rest of my team and whenever a banking app comes in, it's better be as more accurate as possible. For instance, the section operation shows an animation on money balance in the style of a pie-graph — I posted an article on these specific step at spinning ring article.
La progettazione ha incluso la produzione video con ritocchi del marchio nel percorso degli anni ed alcune applicazioni concept iconografiche, entrambi a sostegno del Motion System dell'applicativo
During the implementation of the prototype and on the basis of my experience in Motion Design, the Lottomaticard brand was animated and thus anticipating concepts of components choreography better known later in the years (such as for example with Material Design)
Over the years the first Android version was revisioned according to the new additions, such as biometric access with Touch iD in 2019. Thanks to the Wireflow technique it was possible to carry out a preliminary study phase to the iterative Ui and thus anticipating any errors or interactive misunderstandings
At the same time it was also necessary to perform a visual restyling of the interface in order to review the look & feel away from the old style of the year 2013
