Pepper is a digital bank operated by Bank Leumi that offers an innovative, user-friendly and fully digital banking experience, without physical branches. The application allows customers to independently manage all their banking activities, such as opening accounts, transferring funds and foreign currency, using a credit card, receiving loans, opening savings plans and managing personal budgets.
Edit mode
Default Mode
The home screen is customizable with widgets that provide a concise overview of key information and allow for swift action. Users have complete control, easily adding or removing widgets to tailor the experience to their specific needs.
Goal:
Show the progress of loan repayment over time.
Solution:
Using a timeline to see how many payments have been made out of the total. Each completed payment fills more of the timeline. Key information, like the next payment date, remaining balance, interest rate, and loan end date, is clearly displayed. Users can also view recent transactions and repayment history.
Goal:
Enable users to exchange a foreign currency.
Solution:
A foreign exchange feature that allows users to hold and manage multiple currencies. This feature supports receiving and depositing foreign currencies and converting between common currencies such as the US dollar, euro, and British pound.
Foundations:
Design components and principles that form the foundation of the brand's visual language.
Colors
Typography
Grid & Layout
Spacings & Padding
Effects
Icons
Logos
Illustrations
Photos
General Components:
Frequently used components across the entire app.
Navigation Bars
Text fields & input
Grid & Layout
Headlines
Buttons
Cards
Status Tags
Sliders
Slide-ups
Popups
Snack bar
Date Picker
Golden Number
Flags (Notifications)
Model Carousel
Accordion (FAQ)
Summary Screens
Intro screens
Uniq Components:
Custom-designed components used only for specific screens.
Widgets (Homepage)
Osh
Payments
Credit & Debit Cards
Savings
Loans
Pepper Global
Hub (Pepper +)
Chat
Animation:
Components with animation and transition movement.
Loader Osh
Empty State
Skeletons
Transitions
I restructured the design system using the Atomic Design methodology, organizing components into three hierarchical levels to enhance scalability, consistency, and efficiency. This structured approach allowed for the seamless assembly of all UI elements, including tabs, buttons, text fields, cards, trackers, and more
Atoms - Firs Level
The smallest UI elements, such as the circular progress indicator, the profile image, and individual graphical elements that exist independently.
Molecules - Second Level
A combination of atoms forming a functional component, such as the circular progress indicator integrated with the profile image.
Organisms - Third Level
A more complex component composed of molecules and atoms, such as the full tracker card, which includes the progress indicator, profile image, text, and financial data.
₪105,204.12
ריבית שנצברה ₪3,400
חסכון WOW