design brief summary
A fictitious challenger bank is entering the market and needs a design for their website and mobile app. Simple wireframes have been provided for three screens (Account Overview, Account Detail, and Spending Summary) and need to be transformed by applying a comprehensive design to the set of screens for a mobile app, tablet, and desktop (9 screens in total).
​
The bank would like the design to reflect three key words:
-
Clear
-
Trustworthy
-
Playful
approach
In order to come up with a design theme, first I needed to define what the design is about. The client shared three keywords she wanted the site to reflect.
Create an uplifting and energetic experience that grabs the attention of the user, and encourages them to explore the site
EXCITING
Ensure content is clear, easily understood and readily accessible to the user
INSIGHTFUL
Create a sense of direct connection to the user and enable them to leave the experience with specific action they can take
EMPOWERING
research
As a first step, I looked at competitor bank apps and websites, and created moodboards to gather inspiration on the:
-
Design keywords (clear, trustworthy, playful)
-
UI elements and screen states
-
Typography
-
Color palettes



Image of mood boards for UI design case study project
design concept
I was inspired by the ideas of bees for this project, in what they represent, the color palette and using them as a way to bring a bit of playfulness.
3
1

2
Image of the logo designed for the project, highlighting the key elements of the design concept
1
Honey has a golden color, which pairs perfectly with a bank which protects and helps to grow money.
2
The bee and honeycomb iconography brought in an element of playfulness, and limited usage kept the overall feel of the bank to remain professional, while still standing out.
3
Bees are known as hard workers, which subtly translates to give users the idea that the Better Banking Bank would work hard for them.


color palette & typography
The primary yellow-gold color was chosen to reinforce the concept of the bee motif and gold; the purple shading is used as an accent color to illustrate charts for improved visual accessibility. As for the font, it’s functional with a hint of playful, which is exactly what is needed for a site like this.
design concept evolution
FROM WIREFRAMES...






...THROUGH DESIGN ITERATIONS...
...TO FINAL DESIGN
Clear
Plenty of padding and white space, crisp and uncluttered visual design



Trustworthy
Professional design, UI elements such as lock symbol, visa card
Playful
I developed a honeycomb and bee motif to invoke ideas of honey as liquid gold; also, the ideas of as hard workers translates to a bank that will hard for the client
prototype
I added some simple prototyping to the wireframes to give a realistic feel of how the user would navigate through the site / application
Prototype Recording: iPhone, Desktop, iPad