WalleyBank Website

...

Welcome to my UI design journey for the WalleyBank responsive website. In this case study, we will explore the iterative steps, creative choices, and user-centred approaches that converge to shape an enriched digital experience.


Project Overview

My Role
UI Designer
Duration
August 2023
Platform
Figma

Background

Our journey started with a clear design brief and UX-designed wireframes. A rigorous process of user testing uncovered key insights.

...

Design Progress

Mood Board

Before delving into the details, let's pause to glance at our mood board —a visual compass steering our cohesive design direction.

...
Design Themes and Final Choice

Inspired by our mood board, I embarked on an exploration of diverse design themes. This journey culminated in a deliberate decision—a minimalist approach adorned with soothing blue accents. This choice amplifies readability and maintains an uncluttered design, facilitating swift information access.

...
Components

The foundation of our design rests on thoughtfully created components that promise consistency and a fluid user experience. Each element is meticulously fashioned to ensure a harmonious interaction.

...
Responsive Design Across Devices

Acknowledging diverse device usage, our interface is meticulously crafted for responsiveness across mobile, tablet, and desktop. This effort guarantees a uniform user-friendly experience.

...
UI States for Seamless Interactions

Attentiveness defines our approach to perfecting user interface states for creating savings accounts. This meticulous effort culminates in a seamless journey imbued with ease and intuition.

...
UI design prototype 1.0
...
Usability Testing Insights

Our commitment to user-centric design extends to usability testing with real participants. Extracting illuminating insights from face-to-face sessions, we refine design decisions:

1. Balances Privacy: While most effortlessly navigate transactions, a subset values private balance display.

2. Category Clarity: Simplified navigation back to the homepage is sought after.

3. Chart Clarity: Improved clarity in savings progress representation is highlighted.


Final Prototype Walkthrough

Our endeavor culminates in a living testament—the final design prototype. It embodies insights, principles, and user-driven choices:

1. Landing Page: Users access balances with a tap.

2. Creating Savings Account: A distilled process, direct input with error handling, loading, and confirmation states enhance the experience.

3. Navigation and Clarity: Intuitive indicators and clear visualization enrich navigation and interpretation of savings progress.

...

Takeaways

The WalleyBank design journey highlights the impact of user-focused design on digital interactions. Guided by insights, I embraced minimalist aesthetics, and ensured device responsiveness. Usability testing fine-tuned UI states, resulting in a prototype that exemplifies the synergy of user-driven insights and design principles, empowering users with intuitive interactions. This project underscores my commitment to creating accessible, user-centric digital experiences.