Setiadyanwar.
HomePortfolioExperience
Home
Portfolio
Experience

Setiady Ibrahim Anwar

Frontend Developer & UI/UX Designer creating modern, user-friendly web experiences.

GitHubLinkedInInstagramBehanceDribbbleMediumWhatsAppEmail

Quick Links

  • Experience
  • Portfolio

Contact

Tangerang, Indonesia

setiadyanwar@gmail.com

+6289662007938

© 2026 Setiady Ibrahim Anwar. All rights reserved.

FRONTEND

HomePortfolioNiobank Smart Finance and Green Future

Jan 2026

Niobank Smart Finance and Green Future

AI-powered digital banking experience that improves financial literacy while encouraging sustainable behavior

FigmaFigjamMaze
Niobank Smart Finance and Green Future
Niobank Smart Finance and Green Future screenshot 1
Niobank Smart Finance and Green Future screenshot 2
Niobank Smart Finance and Green Future screenshot 3

Overview

Overview

Niobank is a conceptual mobile banking application designed to help users manage personal finances through AI-driven insights while encouraging sustainable behavior. The project was developed for the T-ArtS 3.0 UI/UX Design Competition (UAJAY, 2026) and aligns with multiple UN Sustainable Development Goals (SDGs) by integrating financial inclusion, economic growth, and environmental responsibility into everyday banking activities.

Rather than positioning sustainability as a separate feature, Niobank embeds SDG principles directly into core financial flows transforming routine transactions into opportunities for long-term financial health and positive environmental impact.

Role

UI/UX Designer

Timeline

Jan 2026

Tools

Figma, Figjam, Maze

Links

Key Responsibilities

  • Defined problem statements and product goals based on competition brief and fintech user behavior
  • Conducted competitor analysis of existing digital banking platforms to identify feature gaps and UX opportunities
  • Designed user personas and user journey maps to model financial behavior and decision-making patterns
  • Structured information architecture to reduce cognitive load in financial tasks

Impact & Results

  • Achieved 85–90% task success rate during Maze usability testing for key flows such as money transfer, pocket creation, and AI financial guidance
  • Reduced average task completion steps by ~30% compared to initial wireframes through IA and flow refinement
  • <2-minute average setup time for budgeting features
  • High first-time feature comprehension for AI Advisor

Challenges

Design Challenges

The main challenge of this project was designing a digital banking experience that simplifies complex financial behaviors while maintaining user trust and autonomy. Niobank needed to translate abstract concepts such as budgeting, AI-driven financial guidance, and sustainability into intuitive interactions without overwhelming users. At the same time, the product had to embed green initiatives seamlessly into core banking flows ensuring sustainability felt like a natural extension of daily financial activities rather than an added burden while conveying credibility and security within the constraints of a conceptual, competition-based product.

Problem Illustration

Problem Issue

Many digital banking applications focus heavily on transactions, yet fail to support users in developing healthy financial habits. Users particularly young professionals often struggle with budgeting, saving consistency, and long-term financial planning due to complex interfaces, fragmented features, and limited financial guidance. Additionally, sustainability initiatives in banking are commonly presented as optional or disconnected features, resulting in low engagement and minimal behavioral impact. This creates a gap where users manage money digitally, but without clarity, motivation, or meaningful alignment with sustainable values.

Lack of Financial Awareness

Users struggle to understand their financial health, cash flow, and spending patterns, making it difficult to plan or make informed financial decisions.

Inconsistent Saving Behavior

Many users want to save but fail to do so consistently due to the absence of structured systems and automation in daily financial activities.

Overwhelming Financial Features

Existing digital banking apps often present complex financial tools without proper guidance, causing users to feel anxious or disengaged rather than empowered.

Low Engagement with Sustainability Initiatives

Green banking features are commonly treated as optional add-ons, resulting in low adoption and minimal real behavioral impact.

How I solve the problem

Niobank was designed as a smart digital banking experience that combines AI-powered financial guidance with intuitive budgeting and sustainability-driven interactions. The solution introduces an AI Financial Advisor to help users understand their financial health, plan expenses, and automate saving decisions without removing user control. Through features like Smart Pockets and integrated Green Action rewards, sustainability is embedded directly into everyday financial activities rather than treated as a separate initiative. This approach enables users to build better financial habits while contributing to environmental impact through frictionless, behavior-driven design.

AI Financial Advisor

An AI-powered assistant that helps users analyze financial health, plan budgets, and receive actionable insights while maintaining transparency and user control.

Smart Pockets (Goal-Based Budgeting)

A structured budgeting system that allows users to create saving goals, automate allocations, and manage expenses with minimal manual effort.

Automated Financial Actions

Smart automation enables users to apply financial strategies—such as auto-saving and spending limits without continuous decision-making or monitoring.

Integrated Green Action & Rewards

Sustainability is embedded into everyday banking activities through automated contributions and reward mechanisms, encouraging long-term eco-friendly behavior without added friction.

Solution Illustration

Process

Project Process (User-Centered Design Framework)

Specify the Context of Use

Specify the Context of Use

This step focused on understanding the context in which Niobank would be used, including user characteristics, usage scenarios, and environmental constraints. The goal was to clearly define who the users are, what problems they face in managing finances, and under what conditions the product would be used.

User Context Identification

I identified the primary target users as young adults and professionals who are digitally literate, earn a regular income, and actively use mobile banking applications. Although comfortable with digital tools, these users often struggle with financial planning, saving consistency, and long-term decision-making due to a lack of structured guidance.

User Context Identification - Image 1
View Image

Usage Scenario Analysis

I analyzed everyday financial scenarios such as receiving monthly income, managing daily expenses, setting saving goals, and making spontaneous spending decisions. This helped establish how Niobank should support users not only during transactions, but also during reflective moments when financial decisions are made.

Usage Scenario Analysis - Image 1
View Image

Specify User & Organizational Requirements

Specify User & Organizational Requirements

After defining the context of use, this step translated observations and insights into concrete user and system requirements. The focus was to ensure that both user needs and competition objectives were clearly addressed.

User Requirement Definition

Based on behavioral insights, I defined key user requirements such as the need for simple financial overviews, guidance-driven budgeting, automated saving mechanisms, and transparency in financial recommendations. Users required support without feeling controlled, which shaped how AI assistance was positioned within the product.

User Requirement Definition - Image 1
View Image
User Requirement Definition - Image 2
View Image

Functional Requirement Identification

Functional requirements were established to support user needs, including AI-powered financial analysis, goal-based budgeting systems, and automated financial actions. Each function was defined to directly respond to a specific pain point identified during context analysis.

Sustainability & SDG Alignment

Organizational and thematic requirements from the competition brief were incorporated by aligning the product with relevant Sustainable Development Goals. Sustainability requirements emphasized that environmental contributions should be embedded into financial behavior rather than added as separate donation features.

Sustainability & SDG Alignment - Image 1
View Image

Produce Design Solutions

Produce Design Solutions

This step translated requirements into tangible design solutions through iterative design and prototyping.

Information Architecture & UX Strategy

I structured the information architecture to prioritize user intent over traditional banking terminology. Features were grouped to reduce cognitive load and allow users to access financial insights, budgeting tools, and sustainability actions intuitively.

Information Architecture & UX Strategy - Image 1
View Image

Wireframing & Interaction Design

Low-fidelity wireframes were created to explore layout structures and interaction flows. The focus was on ensuring that complex financial actions—such as planning budgets or consulting the AI advisor could be completed efficiently with minimal steps.

Wireframing & Interaction Design - Image 1
View Image
Wireframing & Interaction Design - Image 2
View Image

High-Fidelity UI Design

The wireframes were refined into high-fidelity UI designs that emphasized trust, clarity, and accessibility. Visual decisions were carefully balanced to reflect both financial credibility and sustainability values without compromising usability.

High-Fidelity UI Design - Image 1
View Image
High-Fidelity UI Design - Image 2
View Image
High-Fidelity UI Design - Image 3
View Image
High-Fidelity UI Design - Image 4
View Image
High-Fidelity UI Design - Image 5
View Image
High-Fidelity UI Design - Image 6
View Image
High-Fidelity UI Design - Image 7
View Image

Interactive Prototyping

An interactive prototype was developed using Figma to simulate real user interactions. This allowed realistic testing of financial planning, AI guidance, and sustainability-related features before final evaluation.

Interactive Prototyping - Image 1
View Image

Evaluate Design Against User Requirements

The final step focused on validating whether the design met the previously defined user and system requirements.

Usability Testing & Task Evaluation

Usability testing was conducted through task-based scenarios such as setting up budgets, interacting with the AI advisor, and engaging with green action features. This evaluation assessed task success, clarity, and efficiency.

Usability Testing & Task Evaluation - Image 1
View Image
Usability Testing & Task Evaluation - Image 2
View Image
Usability Testing & Task Evaluation - Image 3
View Image
Usability Testing & Task Evaluation - Image 4
View Image
Usability Testing & Task Evaluation - Image 5
View Image
Usability Testing & Task Evaluation - Image 6
View Image

Outcomes

100%Clear Financial Decision Support

Through the application of a User-Centered Design framework, Niobank successfully translated complex financial concepts into clear, actionable user interactions. Users were able to understand their financial overview, budgeting options, and AI-generated recommendations without external assistance, indicating improved clarity and reduced cognitive load in financial decision-making.

98%Improved Usability and Task Efficiency

Usability evaluation showed that core financial tasks such as setting up budgets, managing Smart Pockets, and interacting with the AI Financial Advisor could be completed efficiently with minimal steps. Task-based testing indicated a high task completion rate and reduced friction compared to early design iterations.

80%Higher Engagement with Sustainable Features

By embedding sustainability directly into core financial flows, Green Action features achieved higher perceived relevance and engagement during usability testing. Users viewed sustainability as part of everyday financial behavior rather than an optional add-on, supporting long-term engagement and alignment with SDG-driven goals.

90%Balanced AI Assistance and User Control

The AI Financial Advisor was perceived as supportive rather than intrusive. Users retained control over financial decisions while benefiting from data-driven insights and automation, validating the design approach of transparent and assistive AI interaction.

30%Scalable and Consistent UX Foundation

The final design produced a cohesive and scalable UX system that can be expanded with additional financial services or sustainability programs. The structured information architecture and modular UI components support future feature growth without compromising usability.

Next