How to improve security at Conta Stone with Account Activities

Desk research, user flows and interface.

Overview

Stone payments was the company that completely changed Brazil's Acquisition market, creating an excellent service beyond any comparison. Besides providing a high quality product, it also invested in support and technology to do so. It was one of the first Brazilian's unicorns, it's IPO on NASDAQ was sponsored by names like Jack Ma and Warren Buffet.

Since Stone is a financial company, it's always worried about customer security. With that in mind, our team felt the responsability to create solutions to make our customer's banking account safer. From that necessity begun the Account Activities project.

My Role

In this project I was the main product designer. I worked alongside a UX writer and a research professional. Our time frame was a little short, so we needed an outcome soon to start testing and understand the limitations of developing the feature. In May 2020 this project was in development.

Since this case is sensitive, I obfuscated some screen information and confidential content.

Understanding personas and their needs

First, we needed to understand our users motivations and needs, so we analysed our personas (based on our clients). Most of our users today are small and medium business owners, with few employees. Some of them are struggling on a daily basis to sell products or services and don't have time to keep track of what is happening to their bank account, so we used this as the main pillar of our design:

Since our user doesn't have a lot of time to spare, we need to create a fast and simple way for them to keep track of their bank account.

First steps

Research and definition

Analysing similar experiences from other platforms and define what kind of information was necessary to make sure our customer had what they need

We started this phase with discovery. Analysed some services that offer activity records such as google (gmail and youtube), and social networks (for example, facebook and instagram) and other platforms with similar interactions. As a result, we understood that social networks are more familiar to our users, and decided to have a similar visual approach in our layouts.

Our benchmarks also showed that simple information is key. So we decided to use information hierarchy to simplify the understanding of the information we were showing. For example, a simple and direct headline and a more detailed text at a second level would help our user to identify any suspects activities and then understand exactly what happened.

Also, timeframe was crucial. Our customers needed to know exactly at what time each activity took place to seek help in case of a security problem. So, we decided that every entry would show exactly the time and date as the first information.

Precise information and timeframe were crucial to achieve our goal: to give our users full control of their bank account.

After analysing what kind information we wanted our customer to know, we divided into 4 groups:

Messages
Security
Transactions
Actions

Since this is a sensitive mater, I'm not going more deeply into these groups, but they contain all information that our needs to know about their account activities.

These 4 groups needed to appear differently, so our user would understand the priority of the message in each one of them. For example, security is a sensitive entry, so it needed to be a little bit more outstanding. We used visual resources to make sure Security would always stand out.

Timeline layout and small entries

With these last definitions, we began flow and screen testing. It was not hard to define where this feature would be, neither the architecture inside it, because we would only have an events list and the details of each event. So we went straight to understand how to show these to our users.

We tested some interfaces, but a timeline seemed more clear and simple to understand. According to our definitions in the research part, we used small entries in each event, so our users could look for some key words more easily. The tags also help to easily scan the page in search for specific information.

Testing for color blindness

One interesting thing that we did was testing the tags for color blindness. The most common types of color blindness should not have problems reading it, especially the Security tag, that is the most important item on this screen.

Image showing the outcomes of color blindness testing.

Search screen with global search, search suggestions, tag filter and date or period filter and custom date picker.

Making search more personalized and fast.

To have even more control over the content, we also added a smart search and filter. This gives the opportunity for our customer to find an event quickly, without having to scroll the timeline. The user can combine filters, searching for a tag and a specific date or period, for example.

We also added search history, so our customers can go back easily to a previous search. This will be useful when someone finds a discrepancy. They can go back to it fast to show our customer relations, for instance.

With our desk research, testing and development, we achieved a simple and easy way to search and find events on the user's account. We believe that this control over the account's events will give the security we were looking for, giving our customers the ability to find any discrepancies with their account and quickly take actions to solve any kind of problems.

Conclusion

Next steps

After the rollout to our customers, we will continuously analyse metrics for this feature and keep track of any feedback on our platform to understand if our users are adapting to this new section inside our app.

For our roadmap we will add new layers of information and communication channels.