SmartRede has been Rede's main innovation in payment products since 2017. With it, customers can make payments, control their receipts, their products in stock and even advance receivables.

In this Project I was in person in the war room being responsible for the UX and Design of the Payments App, the main application of SmartRede for customers to make their payments and manage their establishments.

During the project, all transaction flows and sales reports were conceived and designed for the product launch in 2017.

Context

In the two years before the project, Rede, as a company, had been losing a considerable portion of its clientele to the competition that was growing in the market. This was happening because the company hadn't launched an updated and innovative product on the market for a few years. To be more precise, the machines that dominated the market were POS, with operating systems and physical formats present on the market for the last 20 years.

Solution

As a response to the current situation, the company decided to create a strategic partnership with Poynt, a startup that manufactured digital payment machines in the US, to together revolutionize the payment machines market in Brazil and thus position itself at the forefront of the digital revolution in the sector.

In order to operate the machines manufactured by Poynt, the company decided to create a war room to develop a payments app to be the flagship of the product's operation.

Project's goal

– Establish a framework for innovation in the means of payment in the sector;
– Create a WOW experience in the Smart Rede payment flow;
– Create UX and Design patterns for all future Smart Rede apps;
– Discover new uses for technology, on demand from clients.

My roles

Product Design (at the beginning)
Product Design Lead (at the end)

The Detailed Process

Discovery & Brainstorming

In the war room we did several dynamics with brainstorming to design the possibilities of flows for the payments app based on the current flows already existing in the POS.

In this process, several new functions for the machine were inferred. Many areas of the company presented ideas to improve the use of the equipment with apps and new functionalities that would go beyond the use for payments.

Curiosity: There are many possibilities for financial products to be offered in a payment transaction, such as credit modalities, types of cards, as well as the possibility of cancellations, payment reversals, reprinting of receipts and even credit approval through the machine itself. 🙂

Designing the Experience

After many drafts on blackboards and sheets of paper, mapping flows and user journeys with the business team, we started to design the flow screens to apply tests with real users. For that, we used Axure as a tool.

Usability testing

In this project, we created a culture of partnership with beta testers of the product and initially we had seven establishments that orbited the company's offices to carry out tests and to pilot the solution:

– A Café Cultura and a restaurant on the ground floor of the Rede’s building in Alphaville;
– Two coffee shops, a bookstore, a manicurist and a seamstress inside the set of buildings that make up the CEIC in the Consolacao neighborhood.

In these establishments, we invite customers and employees to conduct usability tests using the navigable prototypes created in a UX version with wireframes.

With the results obtained with the tests, we refined the usability, the initial flows and the size and positioning of the elements on the screen.

The Design Process

After carrying out the refinements with the usability tests, we started to create the visual identity uniting the brand identity with design standards and experience based on material design.

Guidelines for Development

Like any development process, achieving excellence and obtaining an app that conforms to what was designed and idealized would be a challenge. And to ensure that everything would be in compliance, we made some process adjustments that at the time were not a market standard following the model below:

1. After the design, the flows are designed with indications of interaction and navigation;
2. Assets are delivered for development, with detailed specifications + navigable prototype;
3. A design and ux review is carried out to ensure that the specified standards were being followed, with flows, colors, alignment, spacing, element size and fonts;
4. After approval in the design review, the production version of the app is released.

This process guaranteed the fidelity and quality of the design and experience.

Launching the MVP and the Lessons learned

When the development of the first version of the app was 100% validated, we installed it on Poynts and distributed it for the use of partners.

First learning by observing customers using

Context

Every day during the project I would have coffee and lunch at the beta tester restaurant and cafes, just to observe the usage of the customers and what they were talking about naturally. One thing I noticed was that the queues at establishments when they were using Smart Rede began to increase. So we went on a discovery to understand why this was happening.

Discovery

In the investigation, we observed that the lack of delimitation between the numbers on the digital keyboard made the user accidentally touch the wrong number. As the password display was done using asterisks (****), they did not notice the error and this increased the number of typing errors, slowing down the payment process and resulting in an increase in the queue in front of the cashier.

Solution

Solving this problem was a challenge, as we couldn't put in visual cues like keyboard tapping, which made the passcode visible to people in the queue.
We tested several design models for the keyboard, measuring the average transaction time in each version, and came up with a solution. By delimiting the keyboard with 4dps borders we reduced type mistakes by 80% compared to the first version of the keyboard. This made the experience fluid and avoided the formation of lines at the checkout.

Second learning from watching customers

Context

In the observations we were making, another change in behavior caught our attention. At peak times in the restaurant and cafeterias, the attendants left the Smart Rede aside and used the POs. So we went on a discovery to understand why this was happening.

Discovery

In the investigation, we observed that at times of intense movement, each attendant used two to three machines at the same time to speed up payments and avoid the formation of large queues. In this scenario, Smart Rede hindered the process, because at the POS the process of typing and selecting the payment method was done in a very agile and automated way, they practically didn't even look at the keyboard, quickly typed everything and already delivered the machine for the customer to type the password, while they went to the next customer with another machine.

Solution

As a solution, our challenge was to modify the flow and leave the choice of payment method and typing of amounts on a single screen, instead of having cards for selecting payment methods and only at the end typing the amount and password.

1. The previous flow had 6 screens + selection for printing the receipt;
2. The new flow had 3 screens and automatic receipt printing.

By making this modification, we made the collection process 25% faster than at the POS, because with Smart Rede, the attendant did not need to manipulate the machine to deliver to the customer. And the customer after typing the password chose not to print the receipt. Then he would leave without waiting for the attendant to turn his attention to him to choose whether or not to print the receipt.

Launch

In 2017, at the end of this process and after the validation of the MVP, the Smart Rede was launched for the entire Brazilian market.

After the launch, the war room became a squad and we also started to develop complementary apps for Smart Rede that emerged as ideas during the initial discovery and brainstorming process.

Accelera is a tool that comes to bring speed, mobility and access to real-time opportunities for Rede consultants.

Acelera facilitates the consultants' day by day in targeted prospecting with online registration, daily route planning and point-of-sale status monitoring.

Context

Many Redecard consultants, when they are making visits, identify clients to prospect. Before, they had to make contact with the Network's central and make a customer referral, so that the commercial representative in the region could be notified. What usually happened was the loss of the prospect due to failures in the process, in communication and in the availability of commercial representatives for service.

Solution

The solution was to create an app that any company consultant could install on their smartphone to perform the first service, register and request a POS terminal for the prospected customer.

Project's goal

– Targeted prospecting with online registration;
– Planned route of the day;
– Monitoring the status of the point of sale.

My role

Product Design

The Detailed Process

Inception

We brought together the main stakeholders to carry out dynamics and prepare the project board. In this process, we discovered that the project would become a broad and long-term product.

Discovery, Brainstormings and Collaborative Blueprints

We called in person some consultants and commercial representatives to participate in workshops with collaborative brainstorming and blueprints. The objective was to map out what would be the ideal workflow and begin to sketch together with them a solution that could be used by both in a fluid way.

Design of Experience and Design

With the material generated in the dynamics in hand, it was time to put everything together and start designing the final app experience and design. We unite all the stages of the process in a single flow, with all the necessary information being registered by the consultants, the visit being scheduled and the visit being made available in the itinerary for the commercial representatives in an automated way.

Usability Tests and Lessons learned

We developed navigable prototypes in marvel and brought together consultants and sales representatives again to apply usability tests and collect feedback.

Context

In a first round of testing, we put consultants and sales representatives in a single room to run a dynamic and carry out the process together. It worked well, but we identified a difficulty among professionals. Consultants were afraid to speak their opinions and problems. This messed up the process and we weren't able to collect true feedback from them.

Discovery

Discovery is a multifaceted discipline and now we needed to use the technique to find out why the behavior in the test dynamics was not as collaborative as it was the first time during brainstorms.

We investigated and found that the consultants were afraid of being exposed later, in their day-to-day work. Because after the first dynamic, there were conflicts between the areas, caused precisely by the problems that motivated the creation of the solution. Problem in the flow of information and non-fluid communication between them.

Solution

We did two more rounds of dynamics on different days with workshops to show how the dynamics were carried out and why, to get engagement and make professionals more comfortable, safe and relaxed.

In the second round, in the morning, we separated two groups into different rooms and floors. In one only the consultants and in the other only the commercial representatives. In the first two hours we did the workshops.

In the rest of the morning, we ran tests with the prototypes and collected feedback for improvements in the whole process with both groups, drawing sketches of what they identified as improvements in screens and functionality.

In the afternoon we brought the two groups together to make a convergence between the solutions that they separately outlined with us.

It was a success, and we ended up discovering that the solution should have one more step in the consultants' hands. Where they could, in addition to pre-registering the establishment, already place the order for the product, choosing through a table which is the best product to hook the customer up to a deeper evaluation of the commercial representative.

In the third round, we gathered the professionals on another day, again in a single room and reapplied the test with the collected improvements of what had been designed for the first test, now adding the tests of the sketched features in the second round.

Launch

At the end of this process, we developed and launched the app. Adherence was 100% of the consultants. They now had a tool in their hands that also routed their visits automatically and was also a place for easy consultation of establishments for opening and enabling new accounts for the company, without having to go through the call center.

In the future, we would design another solution for commercial representatives where we would take advantage of all this information to compose portfolios and visit routes to offer new products to clients activated by the consultants.

Cycles of Development and Continuous Improvement

After the first delivery and availability of the app for use in the company, we continue to monitor usage and collect feedback via the suggestion channel in the app, interviews with some consultants and commercial representatives, in addition to collecting data and metrics through the app itself. This gathered information provided us with insights and feedback to improve the features and flows already developed, to evolve the app with new features.