Econ Bank - Responsive Website & Application Showcase
Low-fidelity Prototype - Desktop/ Tablet
Low-fidelity Prototype - Mobile
Medium-fidelity Prototype - Desktop/ Tablet
Medium-fidelity Prototype - Mobile
High-fidelity Prototype - Desktop/ Tablet
High-fidelity Prototype - Mobile
Case Study - Detailed Analysis
★ ★ ★ ★ ★
Project Scope
Econ Bank: Online Banking System - Responsive website and application (Desktop/ Laptop, Tablet and Mobile Phone)
★ Designer's personal challenge:
Apart from the main user flow (critical path) (in teal colour), to integrate the following:
✦ Dual "sign-in" flows (Light in purple and Full in teal colour) for website and application (2 flows).
✦ Accessibility flows - Languages and Assistive Technologies (AT) (2 flows).
✦Build a website and application with multiple components to reduce the number of frames (lean design).
★ ★ ★ ★ ★
The problem:
★ The existing online banking system for Econ Bank (fictional banking institution) provides full access for their users only. Most users find the existing sign-in procedure to:
✦ Take a lot of time,
✦ To be unnecessary complex
✦ With a large number of security codes that are excessive for daily quick balance checks and transfers.
Hence, the customers don't use the online banking system extensively and rely on visiting the actual bank branches.
★ Econ Bank would like to enhance their online banking footprint, increase the number of online users, and to provide a more satisfactory service. This is an attempt to attract more new customers and to provide more options to the existing ones.
★ Most customers that have used the existing online system, have experienced anxiety or psychological discomfort when transfers take place. There is not any integrated notification system to prevent fraud and promote internal communication between users. They have to rely on external communication and messaging applications to check if their transfers are done successfully. This is very frustrating, as the existing system signs-out the users once they leave the website and application for security reasons. And most of them have to sign-in back (onerous task) to check if the transfer is done successfully and their latest account balance.
The goal:
★ To provide an easy to access online banking system (responsive website and application for desktop/ laptop, tablet and mobile phone devices) with the 2 different “Sign-in” Access and Account modes (Light and Full) and to enable quick account balance checks and fast money transfers (Light mode).
★ To provide a user-friendly online banking system that brings value to the users and serves for their daily fast pace requirements and more detailed/ analytical functions.
★ To promote a safe environment by preventing fraud and encouraging internal user communication.
My role:
★ UX designer
★ UX researcher
★ UX writer, and
★ UI designer
[For all Phases - “Product Development Life Cycle”: Conception (Phase 1) to Delivery (Phase 5)]
My responsibilities:
★ Defined strategic project scope
★ Conducted strategic research
★ Conducted design research
★ Prepared empathy maps
★ Prepared personas
★ Prepared user journey maps
★ Prepare problem statements
★ Accessibility considerations
✦ Languages
✦ Assistive Technologies (AT)
✦ Building and incorporating visual Accessibility Features in accordance with WCAG requirements.
★ Prepared sitemap diagrams
★ Conducted interviews
★ Conducted usability studies
★ Designed paper wireframes
★ Designed digital wireframes
★ Designed low-fidelity prototype
★ Designed medium-fidelity prototype
★ Designed components to enable compliance with sticker sheet (design system)
★ Designed sticker sheet (design system)
★ Designed mockups
★ Designed high-fidelity prototype
★ Designed connections
★ Designed triggers and interactions (component graphics, motion and animation)
★ Incorporated findings from usability studies
★ Incorporated and coordinated design iterations
★ Graphic design
★ Logo and branding design