I'm a London based product designer who code. Currently working in Soldo.

Transcription

1 Gianluca Gini Senior UI/ UX Designer I'm a London based product designer who code. Currently working in Soldo. PORTFOLIO 2018

2 Soldo product Since 2015 I m in charge of defining the visual design rules and the design system for the Soldo product as a whole. This includes the mobile app, web console, the debit card production and other various assets. Especially for what concerns the web console I dedicated particular attention in building a design system that includes general rules for a modular typography scale and a grid based on a few constant numbers. By doing so whoever needs to create a new page or component always knows what's the correct size and style for an element and how to position it. Once I identified the basic elements and rules I was able to start building primitive components such as input field, dropdowns menu and common items we needed in our templates. All of those are Sketch symbols easy to customise and shared among the team in our common library. As last but not least, with the support of our engineers, I wanted to translate this system in our development environment so to empower anyone to code a specific page without any trouble styling it. This is possible because the rules on which every design element is made are the same across the visual tools we use and the CSS framework.

3

4 Mobile app Soldo uses a mobile app (both for Android and IOS) to allow every family to have a set of cards for each member who needed one and control each one s spending. And since we pivoted to serve businesses each employee can access use a similar app to access his account at any time and add the information required by his company accounting department. Most of the times we used standard components because the users are more familiar with them. However there is still space for innovation wherever necessary. For instance when we wanted to improve the transfer of funds made in the app I wanted to avoid the usage of confirmation dialogs since this was a clear example of a routine action. Like in Aesop s fable, if you cry wolf too many times, people will stop paying attention to the question, and the confirmation dialog will lose its power to prevent errors. Instead it was much more powerful (and fun) to create a pattern where a gesture like dragging a Soldo coin is used to give time to who is making a transfer to double check that the information provided is actually correct.in other parts where we knew that the loading time could be particularly long I created animations that help to make a boring page more interesting.

5

6 User Flows I have found User Flows very effective when it comes to the communication with developers. Especially when it comes to build a very complex path a well done user flow can make the developer independent in understanding the whole journey and user experience. So to give more time to focus on refining details of the single views. Manage users This is probably one of the most complex flow I ever built.in this portion is shown the part where an Administrator can create/edit or remove other users. The business logic behind is very similar to adding items in a cart and proceed to the checkout at last. Furthermore each new card ordered can be customised in the delivery address and even choosing its PIN Particularly challenging was allowing the user to perform the same actions (like setting the access permissions or the security settings) both in the creation and editing phase. The optimum was to reach the goal without having to create different components but somewhat recycle pretty much the same view.

7 Advanced card settings One of my goal has always been to factorise as much as possible the possible states in which a view can be. That s why instead of showing many screen with different permutations of input and messages I always try to reduce them as much as possible. This keep things clear without overwhelming the viewer. I experienced that creating, wherever possible, small linear flows is much more clear to the end user. No matter how complex the navigation is, as long as it s clear and the user never feels lost.

8 Reduced complexity With time our design teams tried to reduce the complexity of business requirements. We started to give less and better articulated possibilities to the user for each story. In this process we started the review of some of the most important journey on different platform as well. Above, on the web app targeting desktop screens, we have the order of a new card, customisable in type, delivery address colors and card name. Having much more space available compared to the mobile app we started to use the paradigm of stackable lateral panels. So to keep the user aware of the overall path even if the interaction is in a modal view.

9 Prototyping I believe that prototyping is not only a great way to test an idea before it gets developed, (hence saving company money and time.) but also another tool to use when designing a feature. In some occasions it is worth to spend time creating a working example of the idea to have a better understanding of its logic and interactions. Even without finalising the visual style the example below allowed the entire design team to test and validate the user experience for setting up some advanced card rules. The project is backed up by a fully working logic (written in javascript) and the iterations of adding new parts that come out during the test was very quick. Also once the developers actually started to work on it having a working reference was incredibly efficient.

10 Further selection of my work Illustrations Various usage among the Soldo Family products Newartt Mockups and Implementation of an MVP on wordpress for a platform dedicated to art collectors Framer test This project on framer dynamically adapts the layout colors according to the background color selected Microsoft Fluent design system Fluent speaks in light and shadow, in spatial dimensions and materials. It was fun to apply these principles on some existing views. Transaction details This principle prototype was used to refine the interactions in this view and as reference for the developers Tees illustration I don t consider myself an illustrator but sometime is good to give it a try

11 Further selection of my work Fendi Baguette One of the many projects during my experience in Milan Cinquecento (500) One of my favorite books. I really loved working on it especially because of the typography research I did on it Real fun games A series of social games like Bingo and Backgammon, my first working experience in London Gianluca Gini Senior UI/ UX Designer gigig987@gmail.com Gianluca Gini. All rights reserved.