Banking · A Responsive Website UI
As part of my second UX Design Institute course, I designed a responsive banking application across desktop, tablet, and mobile, delivering nine final UI screens. The project focused on creating a playful, engaging interface that challenged the idea of banking as boring, while I explored colour, typography, spacing and layout. PCKT; Your pocked-sized bank.
Company
UX Design Institute
Year
2024
Duration
3 Months
Banking · A Responsive Website UI
As part of my second UX Design Institute course, I designed a responsive banking application across desktop, tablet, and mobile, delivering nine final UI screens. The project focused on creating a playful, engaging interface that challenged the idea of banking as boring, while I explored colour, typography, spacing and layout. PCKT; Your pocked-sized bank.
Company
UX Design Institute
Year
2024
Duration
3 Months
Banking · A Responsive Website UI
As part of my second UX Design Institute course, I designed a responsive banking application across desktop, tablet, and mobile, delivering nine final UI screens. The project focused on creating a playful, engaging interface that challenged the idea of banking as boring, while I explored colour, typography, spacing and layout. PCKT; Your pocked-sized bank.
Company
UX Design Institute
Year
2024
Duration
3 Months
Banking · A Responsive Website UI
As part of my second UX Design Institute course, I designed a responsive banking application across desktop, tablet, and mobile, delivering nine final UI screens. The project focused on creating a playful, engaging interface that challenged the idea of banking as boring, while I explored colour, typography, spacing and layout. PCKT; Your pocked-sized bank.
Company
UX Design Institute
Year
2024
Duration
3 Months
Work Breakdown
Work Breakdown
Work Breakdown
01
Brand Exploration
I created three mood boards exploring playful, clear, and trustworthy visual directions.
01
Brand Exploration
I created three mood boards exploring playful, clear, and trustworthy visual directions.
01
Brand Exploration
I created three mood boards exploring playful, clear, and trustworthy visual directions.
02
Grid System Setup
I defined responsive layout foundations using an 8pt system and 12-column grid.
02
Grid System Setup
I defined responsive layout foundations using an 8pt system and 12-column grid.
02
Grid System Setup
I defined responsive layout foundations using an 8pt system and 12-column grid.
03
Component Library
I researched UI patterns and built a reusable component system within Figma.
03
Component Library
I researched UI patterns and built a reusable component system within Figma.
03
Component Library
I researched UI patterns and built a reusable component system within Figma.
04
Typography System
I explored type references and established a clear, scalable text hierarchy.
04
Typography System
I explored type references and established a clear, scalable text hierarchy.
04
Typography System
I explored type references and established a clear, scalable text hierarchy.
05
Colour System
I developed a balanced but playful colour palette aligned to the brand qualities.
05
Colour System
I developed a balanced but playful colour palette aligned to the brand qualities.
05
Colour System
I developed a balanced but playful colour palette aligned to the brand qualities.
06
Iconography
I selected and refined a reusable icon style and set to support clarity and usability.
06
Iconography
I selected and refined a reusable icon style and set to support clarity and usability.
06
Iconography
I selected and refined a reusable icon style and set to support clarity and usability.
07
Screen Iterations
I continuously designed and explored over 30 layout variations across key banking screens.
07
Screen Iterations
I continuously designed and explored over 30 layout variations across key banking screens.
07
Screen Iterations
I continuously designed and explored over 30 layout variations across key banking screens.
Final UI Design
From the iterations, I refined selected screens into a cohesive responsive interface.
Final UI Design
From the iterations, I refined selected screens into a cohesive responsive interface.
Final UI Design
From the iterations, I refined selected screens into a cohesive responsive interface.
09
Reflection
I finalised with a document which listed learnings and evaluation of design decisions.
09
Reflection
I finalised with a document which listed learnings and evaluation of design decisions.
09
Reflection
I finalised with a document which listed learnings and evaluation of design decisions.
Project Context
Project Context
Project Context
The Problem
The Problem
Traditional banking apps often feel overly corporate and uninspiring, prioritising function over experience. The challenge was to design a responsive banking application that remained clear and trustworthy, while introducing a more playful and modern visual direction.
Traditional banking apps often feel overly corporate and uninspiring, prioritising function over experience. The challenge was to design a responsive banking application that remained clear and trustworthy, while introducing a more playful and modern visual direction.
The Process
The Process
The project followed a structured UI design process focused on visual system development. This included mood boards aligned to brand qualities, grid system creation, component library building, and exploration of typography, colour, and iconography. Multiple screen iterations were produced before refining a cohesive responsive interface across mobile, tablet, and desktop.
The project followed a structured UI design process focused on visual system development. This included mood boards aligned to brand qualities, grid system creation, component library building, and exploration of typography, colour, and iconography. Multiple screen iterations were produced before refining a cohesive responsive interface across mobile, tablet, and desktop.
The Solution
The Solution
The final outcome was a responsive banking application that balances clarity, trust, and playfulness across all breakpoints. A cohesive design system ensured consistency throughout, resulting in a polished UI solution that achieved a 90% overall grade.
The final outcome was a responsive banking application that balances clarity, trust, and playfulness across all breakpoints. A cohesive design system ensured consistency throughout, resulting in a polished UI solution that achieved a 90% overall grade.
Final Designs
Final Designs
Final Designs
Dashboard
Transactions
Insights
Dashboard
Transactions
Insights
Reflections
Reflections
Reflections
Key Takeaway
Preparation Importance
One factor I noticed throughout this project was the importance of preparing for design - rather than heading straight into it. Good preparation = great design.
Key Takeaway
Preparation Importance
One factor I noticed throughout this project was the importance of preparing for design - rather than heading straight into it. Good preparation = great design.
Do-Over
Design Consistency
Next time, I would ensure stronger consistency across breakpoints. e.g., keeping the side navigation aligned between tablet and desktop to improve brand cohesion and UX.
Do-Over
Design Consistency
Next time, I would ensure stronger consistency across breakpoints. e.g., keeping the side navigation aligned between tablet and desktop to improve brand cohesion and UX.
Do-Over
Brand Qualities
Another do-over would be ensuring equal importance and inclusion of all brand qualities, rather than more prominance for one over another.
Do-Over
Brand Qualities
Another do-over would be ensuring equal importance and inclusion of all brand qualities, rather than more prominance for one over another.
0
0
0
Interested in more?
Up next I designed a mobile-first hotel booking application which incorporated the entire UX design process, from research and design to prototyping.
Interested in more?
Up next I designed a mobile-first hotel booking application which incorporated the entire UX design process, from research and design to prototyping.
Interested in more?
Up next I designed a mobile-first hotel booking application which incorporated the entire UX design process, from research and design to prototyping.