UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
Portfolio Karen Sátiro
1. VISUAL & USER
INTERFACE DESIGNER
portfolio
KEEP IN TOUCH karensatiro@gmail.com +34 651345118@karensatiro
2. Its focused to transform the financial
transactions in a friendly interface for
customers using modern visuals, clean
interfaces and simple interactions.
Appverse Pay is a
natural interface
application created
for transfer money
between friends.
client
GFT IT Consulting
Design Thinking, Conceptualization, UI/UX Design,
and Brand Identity.
services
Tap, swipe, nudge, flip.
We worked on the best interface for your business.
3. SIMPLICITY
The navigation is centered in the principal interaction, send and request money.
EASILY
Gestures is thinking for strengthen the perception when you interacts with the application.
WELCOME
PAGE
MANAGE
FRIENDS
CONFIGURE
WALLET
SETTING
PROFILE
FINDING
PEOPLE
CONSULT
MONEY
TRANSFER
MONEY
12:34 PM
HOME
ADD CONTACT
USER 1
USER 2
USER 3
USER 4
USER 5
USER 6
...
...
...
...
...
...
...
12:34 PM
HOME
ADD CONTACT
USER 1
USER 2
USER 3
USER 4
USER 5
SEND REQUEST
...
...
...
...
...
...
X
12:34 PM
WELCOME
12:34 PM
HOME
ADD CONTACT
USER 1
USER 2
contact since 01/01/2000
from Google Contacts
DELETE USER
USER 5
USER 6
...
...
...
...
...
12:34 PM
HOME
ADD CONTACT
USER 1
USER 3
USER 4
USER 5
USER 6
...
...
...
...
...
...
12:34 PM
HOME
ADD CONTACT
USER 1
USER 2
NOTIFICATION ABOUT
DELETING USER
USER 5
USER 6
...
...
...
...
...
Display
with
vertical
accordion
from top
to bottom
Display
with
a blink in
red color Delete
with a
fade out
and
deleting
Go to
with a
sweep
from the
Tap
location
Display
with
horizontal
accordion
from left
to right
YES
X
HELLO
USER,
WHAT DO YOU WANT
TO DO TODAY?
0,00 €
SEND
SEND 0,00€ TO FRIEND
REQUEST
Remaining balance
nearby contact friend friend
INTERACTION FLOW contacts screen - delete and transfer money actions
NAVIGATION Action Screens in the first level
4. READLY
Visual hierarchy guaranteeing a positive reading experience for the end-user.
NATURAL AREA
STRETCH AREA
OW AREA
The primary tasks are concentrated in the natural area helping the user
memorize the interaction with the interface easily and automatically.
SCANNING PATTERNS welcome screen - transfer money
This application is especially concerned with the use of typography and colors,
especially because we use it as a visual means of navigation, helping to mark
the route to follow and sections available for used.
TYPEFACE WEIGHT AND PAIRING raleway
Raleway
size
orientation
weight color
it is a display face
and the download features both old style and lining numerals,
standard and discretionary ligatures, a pretty complete set of
diacritics, as well as a stylistic alternate inspired by more geome-
tric sans-serif typefaces than its neo-grotesque inspired default
character set.
5. LAYOUT
Every screen is important, homogeneity helps users understand how to use it.
NAVIGATION FLOW brances screen
6.
7. BRIGHT AND
CREATIVE IDEAS
IS ARRISING.
MULTIPLATFORM,
MULTIDEVICE,
MULTI-ENVIROMENTS.
MAY THE FOR BE WITH
YOU. BECAUSE YOUR
CODE THE FUTURE.
TESTING
AND SURVIVE TO
INNOVATION.
ONE BUILD TO
RULE THEM ALL
client
adaptive.me
Creative Thinking, Design Thinking, Co-Creation,
Software GUI, UI Design and Brand Identity.
services
MADE FOR EVERY
ONE OF US, BY
EVERYBODY.
PIXEL PERFECT
SIMULATION EVERYWHERE
Fun and useful
interfaces
created with
Flat Design
8. COMMUNICATION
Adaptive.me is a suite created to cover the entire process of a digital application creation.
MockupLatte CodeWok
BugBBQ EarlyPie
DashBar
BRANDING IDENTITY Visual communication for every part of the proce
PANTONE ®
152
ERASE
>_
</>
08:00
SmartTV
0001
1100
1011
0001
1100
1011
0001
1100
1011
9. INTERFACES Work Screen for CodeWok and Dashboard Screen for MockupLatte.
SOFTWARE
Creating new experiences for users, and testing the quality of the tools.
Testing the
interface
with real
users to
improve the
interactions
and visuals.
Graphic
User
Interface
13. RE-THINKING
Understanding the needs and design the best option for the customer.
mm
NAVIGATION FLOW brances screen
Deutsche Bank - CERDANYOLA DEL VALLESDeutsche Bank - CERDANYOLA DEL VALLES
CATALUNYA AVENUE, 38, 08228
CERDANYOLA DEL VALLÉS
CATALUNYA AVENUE, 38, 08228
CERDANYOLA DEL VALLÉS
5.9 Km5.9 Km
Telephones 93 785165693 7851656 93 785186593 7851865
Others Available ATMAvailable ATM
Deutsche Bank
Office Hours Mon: 8:20-13:20 - 14:45 15:45
Tue: 8:20-13:20 - 14:45-15:45
Wed: 8:20-13:20 - 14:45-15:45
Thu: 8:20-13:20 - 14:45-15:45
Fri: 8:20-13:20 - 14:45-15:45
Sa:
DirectionsCall
Branches
CancelStart: Current Location
Itinerary
Branches
Search All
Post Office - TERRASA SUC 01Post Office - TERRASA SUC 01
ITALIA STREET, 2
TERRASSA
ITALIA STREET, 2
TERRASSA
Deutsche Bank - CERDANYOLA DE...Deutsche Bank - CERDANYOLA DE...
CATALUNYA AVENUE, 38
CERDANYOLA DEL VALLÉS
CATALUNYA AVENUE, 38
CERDANYOLA DEL VALLÉS
ATMATM
5.9 Km5.9 Km
5 Km5 Km
Post Office - CASTELLBISBALPost Office - CASTELLBISBAL
FRANCESC MACIÁ, 9
CASTELL BISBAL
FRANCESC MACIÁ, 9
CASTELL BISBAL
FRANCESC MACIÁ, 9
CERDANYOLA DEL VALLÉS
FRANCESC MACIÁ, 9
CERDANYOLA DEL VALLÉS
FRANCESC MACIÁ, 9FRANCESC MACIÁ, 9
6.1 Km6.1 Km
Post Office - SABADELL SUDPost Office - SABADELL SUD
FONTANELLA STREET, 39-41
SABADELL
FONTANELLA STREET, 39-41
SABADELL
6.4 Km6.4 Km
Deutsche Bank - BARBERA DEL V...Deutsche Bank - BARBERA DEL V...
BARCELONA ROAD, 175
BARBERÁ DEL VALLÉS
BARCELONA ROAD, 175
BARBERÁ DEL VALLÉS
ATMATM
6.5 Km6.5 Km
Deutsche Bank - UNIVERSITAT A...Deutsche Bank - UNIVERSITAT A... 7.1 Km7.1 Km
Post Office - UNIVERSITAT A...Post Office - UNIVERSITAT A... 7.1 Km7.1 Km
Branches
OLD VERSION
RE-THINKING THE USER INTERFACE
14. RE-DESIGN
From mobile templates to a customize interface for mobile design.
NAVIGATION FLOW transfers screen
Transfers
NextNext
Step 1
Origin AccountOrigin Account
ACCOUNT DEUTSCHE BANK**0870**0870
Available Balance: 27.669,45 €Available Balance: 27.669,45 €
ACCOUNT DEUTSCHE BANK**0870**0870
Available Balance: 27.669,45 €Available Balance: 27.669,45 €
ACCOUNT DEUTSCHE BANK**0870**0870
Available Balance: 27.669,45 €Available Balance: 27.669,45 €
Deutsche Bank
Transfers
Step 2
Add Amount
Purpose (Optional)
Deutsche Bank
Previous Next
Send ToSend To
ACCOUNT DEUTSCHE BANK**0870**0870
Available Balance: 27.669,45 €Available Balance: 27.669,45 €
ACCOUNT DEUTSCHE BANK**0870**0870
Available Balance: 27.669,45 €Available Balance: 27.669,45 €
ACCOUNT DEUTSCHE BANK**0870**0870
Available Balance: 27.669,45 €Available Balance: 27.669,45 €
Own Account Domestic SEPA
Please note that transfers to "your own accounts in DB"
completed after 7:45 pm will not be immediate and will
be processed in the following working day.
Please note that transfers to "your own accounts in DB"
completed after 7:45 pm will not be immediate and will
be processed in the following working day.
0,0 EUR
4242J09Enter coordinate
to confirm operation
Transfers
Step 3
OriginOrigin
**4010 - CHECKING ACCOUNT**4010 - CHECKING ACCOUNT
2025-4444-45-12345678902025-4444-45-1234567890
Send ToSend To
50 EUR (no aditional fees)50 EUR (no aditional fees)
AmountAmount
Teresa TrepatTeresa Trepat
Av. Generalitat, 163-167Av. Generalitat, 163-167
Cab to AirportCab to Airport
DetailsDetails
Confirm TransferConfirm Transfer
99
44
55
88
66
33
77
11
22
00 DeleteDelete
XX
CancelCancel ConfirmConfirm
Deutsche Bank
0019.0333.05.40100208700019.0333.05.4010020870
BalanceBalance
0019.3333.62.40100845120019.3333.62.40100845120019.3333.62.40100845120019.3333.62.4010084512
BalanceBalance
0019.3333.64.40520097330019.3333.64.40520097330019.3333.64.40520097330019.3333.64.4052009733
BalanceBalance
0019.0030.67.08200327120019.0030.67.08200327120019.0030.67.08200327120019.0030.67.0820032712
33.245,91€33.245,91€
27.669,45 €27.669,45 €
3.475,80 €3.475,80 €
2.100,66 €2.100,66 €
- 99.309,92 €- 99.309,92 €
Personal Accounts
Cards
Transfers
Distribution
Global Position
Personal AccountsPersonal Accounts
ACCOUNT DEUTSCHE BANKACCOUNT DEUTSCHE BANK
ACCOUNT DEUTSCHE BANK 2ACCOUNT DEUTSCHE BANK 2ACCOUNT DEUTSCHE BANK 2ACCOUNT DEUTSCHE BANK 2
CURRENCY ACCOUNTCURRENCY ACCOUNTCURRENCY ACCOUNTCURRENCY ACCOUNT
Mortgages & LoansMortgages & Loans
REFINANCING MORTGAGESREFINANCING MORTGAGESREFINANCING MORTGAGESREFINANCING MORTGAGES
Welcome,
to get started
use the menu to the left.
Global Position
iPad 12:20 PM
MORE SCREEN, MORE UI
Be responsive, resize.
15.
16. Code
of the new
Digital transformation is happening, now!
client
code_n UI & Visual Design, Icon Design, Pattern Deisgn and Brand Identity.
services
PARTNERSPARTNERS
ABOUTABOUT
NEWSTREAMNEWSTREAM
AGENDAAGENDA
HALL MAPHALL MAP
PARTNERSPARTNERS
EXHIBITORSEXHIBITORS
AT&T 12:34 PM
17. FROM WIREFRAMES
The strategy that all customers need is a good UX, to represent a good UI.
Axure
prototypes
are the
essential
guide to
create a
beautiful
interface
HOME EXHIBITOR ATTENDING
AGENDA NAVIGATION NAVIGATION
18. TO USER INTERFACE DESIGN
The elegance is the best way to get a eye shinning.
HOME EXHIBITOR ATTENDING
NAVIGATION NEWSTREAM ABOUT
Interaction is the
consequence
of our acts.
The user needs
feedback to
understand the
application.
19.
20. Make it simple the technology
with digital branding.
client
GFT CX Lab
UI Design, Visual Design, Mobile Design,
Brand Identity, Design Thinking.
services
21. STYLE GUIDE
Every graphical element has the same look to integrate the brand.
ICONS
COLORS
Ok, Roboto!TYPE
IMAGES
Appverse Pay Appverse Capture
LOGOS
24. client
GFT Group & code_n
UI Design, Visual Design, Experience Design,
Brand Identity, Design Thinking.
services
The exprience of the originality,
touch and feel the emotion.
XTable
25. This a table where every place is touchable, dragable, swipable.
CREATING EXPERIENCE
Initiated by
DigitalPOWERHOUSE
Initiatedby
DigitalPOWERHOUSE
MOBILE
SOLUTIONS
USER
ECNEIREPXE
CORPORATE
INNOVATION
RICHINTERNET
APPLICATIONS
HUMANCOMPUTERINTERACTION
PDF
BACK
This Visual Design
was inspired in the works
of Antoni Gaudí at Barcelona.
THE MENU THE OPTIONS
PDF
BAX &
WILLEMS
FIABEE IDEAKNOW
TELEFONICA
DEUTSCH
LLEIDA.NET
DIGALIX IESE UNIVERSITAT
LLEIDA
THE SUBMENU
26. How the user related to with the product is the result of a good UI.
THE PRODUCT