Projects > Sprout! Bank

Sprout! Bank
case study

UX, UI, Branding, Content Design, Prototyping, User Testing

I completed a case study for the fictional Sprout! Bank to further develop my skills, creating the branding and user interface for the website, resulting in a high-fidelity prototype.

Brief

To complete the User Interface design of the Sprout! Bank website, and build a high-fidelity prototype of a responsive website that allows the user to separate their savings into buckets and inform the user of their spending habits.

UX research had previously been conducted and it was concluded there was a market need for a banking website that allows people to create savings accounts that help them save for small, fun items, and for the big items too.

Scope

The scope of the project included a landing page with a dashboard for savings buckets and balances, payments page, profile page with the ability to manage preferences, and a contact us page.

Process

01
Moodboard

Playing off the bank's name 'sprout' I started visually with images of plants sprouting, and the greens, blues and yellows of growth and spring.

I was drawn to rounded, serif fonts that were visually clean, but playful to show the bank's fun side. Your savings are sure to 'sprout' with us!

02
UI Flow

The UI flow of the site took into account the main pages of:

Home
Transactions
Payments and
Profile

Alongside a quick links menu of:

About
Help and
Contact us

03
Component Library

Colours were developed from the mood board stage but were adapted for accessibility.

Heading and body style variations were created, and adapted for use. Icons were created with variations for hover states, as well as a creation of a toggle on and off switch for the profile preferences section.

04
Mid-Fidelity
Prototype

Mid-fidelity designs were iterated, exploring different colours, layouts and font hierarchy.

Both icons and text were used on the Help cards to offer additional visual assistance for user.

05
User Testing

Three users were tested and asked to complete two tasks. Notes were taken from each interview, then mapped to each task.

From here insights and recommendations - were developed - including the discovery that one of the key goals of the project was not met.

06
Hi-Fidelity
Prototype

The hi-fidelity final prototype featured clickable pathways for users to complete the goal tasks.

Changes implemented after user testing included adding a logout link, adding imagery to About and Help pages, and enabling the transaction page to be viewed as either a List of by Category, thus enabling users to see their spending habits by category - one of the project's key goals.