​​Trat.to App 
​​
​​

​​Team:

​​Molly Nguyen: Project manager/UI Designer…
​​Hoang Tran: UI Designer, Prototype creator
​​Duc Nguyen: UI Designer, Illustrator, Prototype
​​

​​Overview

​​Design Goal and scope

  • ​​Redesign UI iOS & Android app base on wireframe from Tratto Team.
  • ​​Strong brand identity: make Tratto visual design different from the other fintech services and relevant to Brazilian.
  • ​​Language: Portugese
  • ​​Industry: Finance
  • ​​App type: Native Android and IOS
  • ​​Time: 3 weeks

​​Design Process

​​Mood board and preference UI
​​Competitor preference
​​
 
User-uploaded image: Screen+Shot+2017-07-19+at+9.25.04+AM.png
​​
User-uploaded image: Screen+Shot+2017-07-19+at+9.25.16+AM.png
​​
​​
 
User-uploaded image: Screen+Shot+2017-07-19+at+9.25.31+AM.png
​​
User-uploaded image: Screen+Shot+2017-07-19+at+9.25.38+AM.png
​​
​​
 
User-uploaded image: Screen+Shot+2017-07-19+at+9.53.51+AM.png
​​
User-uploaded image: Screen+Shot+2017-07-19+at+9.53.59+AM.png
​​
​​
 
User-uploaded image: file.jpeg
​​
User-uploaded image: file.jpeg
​​
User-uploaded image: file.jpeg
​​
​​
 
User-uploaded image: screen696x696+1.jpeg
​​
User-uploaded image: screen696x696+2.jpeg
​​
User-uploaded image: screen696x696.jpeg
​​
​​

​​Style guide

​​The rationale:
​​The style of Tratto will be different from the other competitor. The main feeling of the brand will be trusted, confident but friendly. This direction will make it less Teenager ( Picpay ), more modern than Colecoin and more premium than Q.que.ez. The main theme will be confident business blue but inside the app, user will perceive other tones.
​​
​​The color is Inspired from Brazilian culture
​​
 
User-uploaded image: image.png
​​
​​
 
User-uploaded image: image.png
​​
​​
 
User-uploaded image: image.png
​​
User-uploaded image: image.png
​​
​​
​​Type face: Roboto ( Android )
​​Chosen colors and styles
​​
​​
 
User-uploaded image: Screen+Shot+2017-07-20+at+9.27.36+AM.png
​​
​​

​​Option 1

​​
 
User-uploaded image: Screen+Shot+2017-07-19+at+4.45.41+PM.png
​​
​​Option 2
​​
 
User-uploaded image: Screen+Shot+2017-07-19+at+4.45.52+PM.png
​​
​​Option 3
​​
 
User-uploaded image: Slice.png
​​
​​
​​Approved style
​​
 
User-uploaded image: Screenshot+2018-03-14+11.25.21.png
​​

​​iOS UI Design

​​Molly and Hoang designed Android UI with #Material design language and 8px grid system. I convert all screens to iOS style.