New Internal Feature for a Corporate Bank

During my time at Handelsbanken, the largest bank in the Nordics, I designed a registration process for case managers to enter company groups in the bank's system. A key challenge was the creation of a search function that could accommodate a range of variables and interaction points. The final interaction design was modern, understandable, and easy to use.

Duration

3 months, 2021

Assignment

Find and profile needs and concerns for homeowners regarding security and sense of neighborhood community. Then ideate and validate a digital solution that addresses those needs and concerns. Design the solution and test with users.

Engineering

Alexander Abramsson Developer

Einar Edberg Developer

Design & Research

Sebastian Beverloo Lead UX Designer

Jonas Möckelström UX Designer

Skills at Work

SAFe
UX DESIGN
USABILITY TESTING
USER RESEARCH
UX COPY

Project Title

Corporate Group Registry & Search

01 Introduction

Insight work

To address the challenge, I first formulated the following research question:

”How could the requirements be met by a solution that also puts the user's needs, goals and conditions in focus?"

Based on the research question, I posited the following solution hypothesis:

”My proposed solution makes it easy for administrators to register, search for, edit and close entries for company groups in the bank's system.”

This hypothesis served as a guiding light throughout my design process, ensuring that I was able to answer the research question satisfactorily. It was also tested during the final quality control phase of the project.

The first step in my design process was to conduct stakeholder interviews, which provided me with valuable insights about the task and the users. Based on these interviews, I organized my findings into a flowchart (Fig. 1) that described how the product would need to function in order to meet the requirements. The flowchart showed me how the interaction flow would branch out, what choices the user would be presented with, and at which points errors could occur and error messages would be needed. This flowchart served as the foundation for the rest of the design process.

Figure 1. My initial flowchart, describing how the product would need to function in order to meet the requirements.

02 Product Ideation Phase

Solution work

In designing my solution, I worked on a testable design prototype in four iterations. Throughout the design iterations, my work progressed from exploration to concretization with increasingly higher fidelity designs for each iteration.

For the first two iterations, I started by presenting a flowchart to stakeholders and validating it against the requirements specification. With the flowchart as a guide, I then created simple lo-fi wireframes (fig. 2) that translated the identified points for user choices into buttons and prompts or messages into confirmation dialogs or pop-ups.

This allowed me to estimate the number of pages the user would need to navigate and kept the functionality and page count to a minimum. I could now give the model provisional content, and so I created the first clickable design prototype (fig. 3).

Figure 2. Iteration #1: Initial, lo-fi wireframes.
Figure 3. Iteration #2: Interactive design prototype.

Search Dialogue

For the third iteration, I needed to specify how I envisioned the search dialog to work. This was a key functionality of the project, through which the user would be able to look up already registered groups. After exploring different ideas, I settled on a design solution that featured a single search bar with real-time, free-text search (fig. 4a), such that search results were presented as the user entered each character in their search string (fig. 4b). To make the results list easy to sort, I made the headings clickable and highlighted the entered search characters in bold.

Figure 4a. The searchbar with real-time, free-text functionality.
Figure 4b. Live update of results per entered character.

03 Final Design Phase

The final design

For the final iteration, I followed the bank's design manual to apply the components and typography described by the design system. This involved defining specific interactions, setting micro copy, and making decisions on how the user would enter information and how each animation would appear. Overall, my design process was user-centered and aimed at creating a search function that was modern, immediately understandable, and easy to use.

The complexity of databases

Designing a user-friendly registration process for a company group proved to be more challenging than anticipated. Initially, the flow seemed straightforward and simple, but as I discussed the requirements with the developers, it became clear that the process needed to accommodate a range of variables and interaction points.

One of the biggest challenges was providing a way for users to input a company group number that was both user-friendly and in line with the system's specifications. The stakeholders’ requirements dictated that users needed to be able to enter either a new number or a previous number that would be replaced by the new system. After the number was entered, the system would automatically do a lookup to confirm its accuracy and return either a confirmation or an error message.

To tackle this challenge, I had to think creatively. I remembered seeing a component in the design system that allowed for messages to be displayed below input fields. I decided to take this component out of its usual context and use it in my design to provide users with information about the entered company group number.

Buttons lead the way

As for buttons, I wanted to avoid clutter in order to maintain its minimalist aesthetic. I asked the developers if they could utilize the real-time search functionality we had previously explored to search for information in this case as well, and then display the results in the message below the input field. After some head scratching and deliberation, they concluded that it was possible.

Resulting design

The result was a registration process that retained its minimalistic user interface while still allowing for complex database lookups and multiple variations of messages to the user (fig. 5a-c). By leveraging the message component and real-time search functionality, I was able to provide users with the information they needed without cluttering the interface.

Figure 5a. User activates text field to enter group number.
Figure 5b. A search is automatically initiated when the expected amount of characters is entered. Message component leveraged to relay information to user that a search is in progress.
Figure 5c. The search results in either a positive match, as displayed above, or a message informing the user that the entered number is available for a new database entry.

A minimalistic search bar

I designed a minimalistic search bar that provided smart search results on the fly without the need for buttons or filters. While searching, the user was presented with a list of matches in order of relevance. The search could be performed on all available data fields, from administrator name to branch office.

Once the user had found the item they were looking for, they could click the item or simply tap the enter key on their keyboard to bring up the company group profile. I placed a strong emphasis on ensuring that the entire flow from searching to editing was smooth and easy to navigate, with as few clicks as possible and clear verbal guidance. The goal was to minimize cognitive load for the user and provide helpful assistance throughout the process (fig 6a-g).

Figure 6a. Search bar user flow, step #1: User clicks the button 'Search existing group'.
Figure 6b. Search bar user flow, step #2: User is presented with empty search bar.
Figure 6c. Search bar user flow, step #3: The search process is initiated when the user enters characters, and results are presented in real-time, highlighting matches in bold.
Figure 6d. Search bar user flow, step #4: User selects one of the entries and is presented with the profile for that company group.
Figure 6e. Search bar user flow, step #5: User clicks the 'Edit' button and the profile enters edit-mode.
Figure 6f. Search bar user flow, step #6: User clicks the 'Close group' button and a modal pop-up appears, prompting the user to confirm. (N.B. the destructive outcome is set to the secondary button, with the primary button cancelling.)
Figure 6g. Search bar user flow, step #7: User opts to close the group and is presented with a confirmation window clearly informing what has happened. The button leads the user back to the start (fig. 6a).

The importance of good UX copy

I put a lot of effort into ensuring that the UX copy was both easily understood and helpful for the user. To achieve this, I applied the following guiding principles:

Whenever possible, I phrased prompts and error messages in a conversational form, providing the user with easy to understand information and then asking a binary yes/no question that the user could answer by selecting one of two buttons (fig. 7a). Additionally, I used colored text as an information carrier, but for accessibility reasons, I always provided an alternative information source such as an icon to convey the same message. For example, in the message where the user has to enter the company group number in the dialog to register a new group (fig. 7b), I used both colored text and an icon to ensure that the information was conveyed effectively.

Figure 7a. Example #1 of good UX copy practice: Error message guides user on how to achieve correct result and why. Primary button enforces the recommendation, secondary overrides it, and tertiary cancels the operation.
Figure 7b. Example #2 of good UX copy practice: Error message below an entry field, prompting user on how to achieve correct result.

03 Product Test Phase

Quality control

Quality control and usability testing were crucial steps in the development of my design solution. I requested to perform usability tests with five intended users in the target group. The test users were credit analysts and business advisors, as well as a deputy manager in charge of limits. These users had many years of experience in the bank and stated that they performed tasks related to company groups that would be affected by the solution I had designed.

Purpose and test methodology

The purpose of the tests was to determine if my design proposition would make it easy for administrators to register, search for, edit, and close entries for company groups in the bank's system. To do this, I observed whether the test users were able to successfully complete their assigned tasks in the test prototype. If the majority of the test users failed to solve any of their tasks or encountered obstacles that could not be overcome without intervention, the hypothesis was considered to be falsified. If test users expressed frustration, disapproval, or difficulty understanding the design, the hypothesis was also considered to be falsified. Only if the tests did not falsify the hypothesis would the work proceed to development.

Test tasks

The test set-up consisted of short initial interviews, followed by a usability test during which test users were asked to solve tasks while thinking out loud. I was joined by a silent observer who took notes during the test. After the tests, I held deep interviews where I explored the participants' experiences and thoughts of the prototype during the test.

The tasks tested three different user flows in the dialog, where the test users were asked to:

  1. register a new company group;
  2. search for an existing group; and
  3. edit and terminate an existing group.

For each task, there was a correct solution that the test user had to reach on their own. Participants were asked to think out loud during the test, allowing us to capture pain points and problem areas that could be discussed afterwards during the post-interviews.

Test results and conclusions

During the usability tests, all test users were able to solve the three tasks without any significant obstacles. During the post-interviews, appreciation for the search dialog was explicitly expressed. The experience of the design solution as a whole was described as fast, smooth, and attractive. Several obstacles were encountered that could be attributed to unclear or misleading text communication. Among these barriers, one particular error message stood out as especially difficult to understand. Some test users found it difficult to understand that they were done, as they received a completion confirmation.

Based on the test results, it was concluded that the design proposal could be taken forward, with the reservation of a number of copy instances that needed revision.

04 Summary

In conclusion

The goal of this project was to design a user experience that would meet the needs and goals of both the end users and the stakeholders. To achieve this, I followed a UX design process that included several key steps:

  1. Research: I conducted thorough research to understand the needs and behaviors of the target users, as well as the business goals and constraints of the stakeholders.
  2. Ideation: Based on the insights gained from the research phase, I generated and explored a range of ideas for how to best meet the needs of the users and stakeholders.
  3. Prototyping: I created high-fidelity prototypes of the design concepts that we had identified as the most promising.
  4. Testing: I conducted usability testing with representative users to validate that the design met their needs and was easy to use. Based on the feedback received, I made further refinements to the design until it was ready for final release.

Overall, this project was a successful example of my UX design process, as it showed my ability to create user-centered designs that met the needs of both users and stakeholders. I was able to effectively conduct research, generate and evaluate ideas, create and test prototypes, and make iterative improvements based on user feedback.