top of page

Home / Projects / Smart Teller Machine

Lightbank.png

SMART TELLER MACHINE

STM is a modern transaction machine, to replace traditional ATM. This industry-leading technology allows consumers to complete up to 80% of banking transactions without teller assistance. 

Role: UX/UI Designer

Process: Scrum model

Responsibilities: Stakeholders interviews, research, information architecture, site map, wireframes, lo-hi fi prototype, interaction design.

WIX.jpg

1. Functional design

Stakeholders interviews

I set up interviews with stakeholders and used technique represents answers to the questions Who? What? When? Why? And How?

After conducting research and surveys, I defined that we have to build a website that can satisfy the following 2 types of users:

Banker needs

  • A dashboard to manage history transactions

  • Customized UI in machine

  • Brand identify

Bank's Client needs

  • Simple to use step by step

  • Great interface

ACB - 3.png
ACB - 4.png
ACB - 5.png
ACB - 6.png

Activity Diagram

I coordinate with Business Analyst to get requirements and build Activity Diagram 

Sitemap

Wireframe

2. Interaction design

UI layout design

cung cấp atm.png
khóa thẻ.png
nhập sđt.png
đọc thông tin đầy đủ.png
Lỗi Email.png
ĐẾM TIỀN.png
Báo tiền.png

Dashboard

Hi-fi Prototype

Build Design System

Apply Atomic design to build design system.

3. Visual Design

Color definition

Base color has to be the color #7448F2 chosen by AIONbank brand guidelines. Lay on the base color we can create a color variation and combine with neutral color variation we can make a well-looking interface as well as matching brand color either.

Typography

As I mentioned above, the visual of this application must be stick to the Brand guidelines of AIONbank. So PoppinsVN typeface was used for all.

Illustration asset

Mockup design

After finish the project, i began to design mockup to support Marketing department.

Animation

To increase the user experience. I would like to implement some animation to guide user how to right action that makes the applicaton become more vivid. 

Final design

It's all the steps I've made to complete this project. Although it's not the most perfect, but it's a project to digital transformation the banking industry in Vietnam.

Anyway, thanks for taking your time and welcome to the next project.

bottom of page