Project 3

Background

After the revision of the Hua Nan Online Banking App, some features have been added, so the bank needs to revise the backstage management system. Since the system hasn't been revised for over a decade, the bank also wants to improve the past user experience and interface as well.

Objective

Since the backstage management system has not been revised for a long time, the focus of this project is to redesign the user experience, visual and structure of the system. Create a system that is more suitable for bank employees.

My roles and responsibilities

Define the overall visual direction.

Redesign the backstage management system’s flow.

Communicate with customers, our front-end engineer, and our system analysts.

My Team

Working with a front-end engineer, and system analysts.

Before

After

What is a backstage management system?

The backstage management system can upload app information, monitor function usage rate, set the bank employee's access, etc. The employee can control the "Hua Nan online bank app" in the backstage management system. This backstage management system is one of the main backstages of the bank. The main operating users are the bank employees and bank supervisors.

Challenge

Build a brand new banking backstage management system from scratch.
I am independently responsible for the backstage management system, redefining the vision, architecture, and process.

As users are bank employees, I need to spend some time understanding their usage habits and pain points.
Unlike customer-facing products that are oriented towards general users, in this project, it is the bank employees who need to use it. I need to understand the usage habits of employees, and it is more complicated and difficult to define problems and processes.

Lots of features, but little time.
This banking backstage management system has over 20 features. I only have five months to complete the design and I still have another project to support.

Schedule and preliminary research

The system analysts met with the clients to discuss the timeline for each stage of the backstage management system. Then the system analysts confirm the design schedule with my design manager and me, letting me know when each function will be delivered.

Function delivery schedule

Identify problems from previous design screens

Identify problems from previous screens. Take stock of past banking processes and interfaces to identify potential issues and assumptions.

Past backstage management system interface

User

According to the backstage management system interface in the past and meetings with clients, I can find that users can be divided into two types: bank employees and bank supervisors.

Bank employee

I submit the form to the backstage management system, confirm that the information is correct, and click to Submit to review by the supervisor

Bank supervisor

I review pending cases every day and check the case information. If there is no problem with the case, I will click to submit it and the information will be displayed on the app.

User journey

According to the flow of the past system and discussions with clients, I propose the user journeys and pain points that different users will encounter.

Bank employee user journey

Bank supervisor user journey

Problems

These user problems can be summarized based on past page flow and user journey assumptions:

Poor readability

The font size and word spacing of the previous interface were difficult to read, and lacked visual hierarchy, resulting in poor readability.

High information error rate

When bank employees upload multiple cases at once, because they can easily cause information errors, because they cannot double-check the information

Submit status is unclear

After the case is submitted, the user cannot know whether it was successfully submitted.

The information is incorrect but cannot be edited

After the information is submitted, if there is a little error in the information, such as a typo, all the information needs to be re-entered and re-submitted.

Users cannot know how the case information is displayed in the app

When entering or checking the information to determine whether it can be released, bank employees and supervisors don’t know how it will be displayed on the App, causing them to sometimes make wrong judgments.

Goal

Through meetings with the client, the past pages, and problems discovery, three revision goals were summarized:

Improve information accuracy

How might we improve the information accuracy rate after the case is released?

Optimize the flow

How can we make the user interface operate more smoothly?

Create the new UI

How might we make users read information more clearly and reduce operational learning?

Design

According to the design principles, I made three main adjustments:

Improve accuracy

For a long time, people couldn't confirm what they filled out, because people clicked Confirm and immediately submitted, which caused a lot of errors. As one of the primary changes in the redesign, I want to design a more careful way to complete the submitting of information, so that people can double-check the information they enter before submitting it.

The user can click Confirm to check the information just entered, and then click Preview to see how the information is displayed in the app. Help people check information and reduce the incidence of errors.

Adjust the information structure to make information easier to find

The function of case search is very important for users. Since there are so many cases in the system, it is necessary to quickly find the required information through a search. In the past, the information structure of the interface was relatively messy. I rearranged the information, I wanted to extract the key information from cases, then displayed them on the system information in a meaningful and structured way to help users quickly browse these cases and find them faster.

Adjust the menu position to make the case fields see more

The original menu is on the left so that the case information fields had to be swiped right to see them, so I moved it to the top so that the case fields can display more.

Inconsistent search styles lead to confusion for users

Previously, there were different search styles in the system, which caused users to be confused and unpredictable. After the redesign, it was adjusted to a consistent search style, which is convenient for users to immediately search cases as soon as they enter the search page.

Users need to slide to the bottom to see the case status, which is inconvenient for operate

When a case is submitted, users can know the status of a specific case by searching the case. However, in the past, the search results with system announcements would be at the top, so users had to slide to the bottom to see the result status of the case. After the redesign, users can directly switch tabs to find the case status, which is convenient for users to find.

Design system - redefine product vision

There are many visual problems in the previous product interface such as small font size, the space between the field and the word is too close, etc. These problems lead to poor readability. This revision redefines the visual interface, so that users can input fields and find information more efficiently and easily.

Communication and cooperation

We meet with the clients to discuss the design process and interface

Ｍeeting with clients

We had a meeting with the clients to discuss the design process and interface of the system because the users are bank employees and bank supervisors, so they provided us with their and behaviors and past problems through the meeting.

Meeting minutes and list of questions

After the meeting, we write the minutes of the meeting. We had a list of questions that clients had difficulties answering during the meeting. This made sure that the overall communication is effective and helped us move forward.

Discussion with system analysts

Quick communication with system analysts

The system analysts and I used commends on Figma to check the necessary items or issues and updated the status after resolving them. This way of working greatly improves our communication efficiency.

Impact

This product was launched in 2022. It took me five months to complete this backstage project independently. I designed more than 20 functional processes, and also had some impact in this project:

Create a new backstage to make it more user-friendly.

Information is easier to read.

Excellent feedback from bank employees and supervisors.

Lesson Learnt

Designing enterprise portal VS customer-facing product

User goal

When designing enterprise products, the main goal for users is to complete their tasks quickly and accurately. User's efficiency and task success rate are the key metric.

Designer skill required

In this type of project, the designer's quality requirements mainly focus on how to understand business requirements and logic and then convert them into UX flows. The best way is to talk directly with the operators to understand their workflows and needs.

HNCB’s Backstage Management System