Revamping BIONS App and Website

Time Frame

Aug 2023 - Present

Role

UI/UX Designer

Platform

Mobile Apps (Android & IOS) and Website

Time Frame

Aug 2023 - Present

Role

UI/UX Designer

Platform

Mobile Apps (Android & IOS) and Website

Introduction

BNI Sekuritas is a subsidiary of Bank Negara Indonesia (BNI), offering securities trading, investment banking, and asset management services. Established in 1995, it serves retail and institutional investors through innovative financial solutions, including the BIONS trading app.

Background Story

When I tried old BIONS, the app was outdated and confusing. Even checking your balance was difficult. I started as the sole UI designer, maintaining the legacy system and collecting user feedback. Later, I worked with another designer to revamp the app, simplifying flows and creating a cleaner, more intuitive experience for new investors.

Team

I initially worked as the sole designer. Currently working with product design lead, collaborating with the product manager, business analyst, and other divisions as needed.

Findings

  • Outdated user interface
    The previous BIONS UI used outdated components that felt behind competitors. This made it harder to attract younger users and stay relevant in a modern trading landscape.

  • Long registration journey
    he sign-up process is long, unclear, and inconsistent. It asks for too much upfront without explaining why, which can frustrate users and lead to drop-offs. A shorter, clearer flow is crucial for better conversion.

  • Confusing journey in some cases
    Inconsistent flows and similar-looking buttons confuse users. It is hard to know where they are or how to go back, which leads to frustration and drop-offs.

  • Poor app performance
    Beyond usability, performance is a major pain point. The app suffers from slow loading times, unresponsive touch elements, and occasional crashes. These issues break the flow of interaction and make the app feel unreliable.

Defining the Problem

How might we increase the revenue while improving the user experience and journey?

How might we improve the user experience and journey while increasing the revenue?

Goals

Business goals: to enhance the revenue and users while aligning with the stakeholders requests.

User goals: enhance the user experience and journey, both transactional and non transactional features.

Process

Understand the Problem ➝ User & Market Research ➝ Define Goals ➝ Ideation & Wireframing ➝ Design & Prototyping ➝ Design Critique ➝ Handoff

Research and Ideation

Contributed to qualitative market research efforts as part of a broader design thinking initiative led by a third-party consultant.

Responsibilities included:

  1. Conducted competitor analysis of local and international trading apps to identify UX patterns and industry benchmarks

  2. Gathered insights from customer reviews and support tickets to understand common user frustrations and needs

  3. Synthesized findings into actionable design recommendations focused on simplifying the onboarding flow and enhancing feature discoverability for new investors

Solution

Here are some of the solutions and decisions that were made during the BIONS Revamp.

Navigation Bar

To accommodate user needs, we redesign the navbar and adding a quick buy/sell button.

More Menu Page

We updated the “More” menu by reorganizing features into clear groups and assigning each group a distinct color. This makes it easier for users to distinguish between sections and navigate more efficiently.

Order Page

The Order page now includes a Buy/Sell tab, Change Stock button, and fixed action button with checklist to simplify and speed up trading.

Home Page

The Home page was redesigned with a clearer layout and new sections like a Total Assets card, eIPO access, and quick buy from Trading Ideas—making it easier for users to track and take action.

Solution

Here are some of the solutions and decisions that were made during the BIONS Revamp.

Navigation Bar

To accommodate user needs, we redesign the navbar and adding a quick buy/sell button.

More Menu Page

We updated the “More” menu by reorganizing features into clear groups and assigning each group a distinct color. This makes it easier for users to distinguish between sections and navigate more efficiently.

Order Page

The Order page now includes a Buy/Sell tab, Change Stock button, and fixed action button with checklist to simplify and speed up trading.

Home Page

The Home page was redesigned with a clearer layout and new sections like a Total Assets card, eIPO access, and quick buy from Trading Ideas—making it easier for users to track and take action.

Results

As part of the design team behind the BIONS app revamp, I contributed to improving the overall user experience across mobile and web platforms:

  • Positive Feedback
    The redesign received positive feedback, highlighting improved usability, cleaner interface, and better user experience. Here's some of what they said about the app.

“Easier to do transactions with New BIONS”

Suci Puspita Galih

“Useful app”

Tati Sumiati

"A big improvement over the old app, much better for investing. UI is easier to understand. Great job!"

Andre Delta

“Not much different, more simple, and easy to use”

Yadi Maulana

  • App Rating Growth
    The app rating increased from 3.7 to 4.1 within just a few months after launch, reflecting improved usability and overall satisfaction.

Login Page Comparison

Home Page Comparison

Order Page Comparison

Key Takeaways

  • Clarity over clutter
    Simplified layouts and reduced friction so users can focus on what matters.

  • Faster access, smarter flow
    Key actions and features were made easier to reach, improving overall usability.

  • Guided by users
    Real feedback shaped every improvement, from navigation to performance.

  • Modern experience
    A refreshed look and feel built trust and confidence for both new and seasoned investors.

Create a free website with Framer, the website builder loved by startups, designers and agencies.