07. BePay

07. BePay

BePay is an app with payment and receiving money in mobile devices, it has a system that allows payment in offline mode. The first app version was built to Android, reducing the time and costs of production. I used the Material Design from Google in Angular JS as the base to build the interface.

BePay is an app with payment and receiving money in mobile devices, it has a system that allows payment in offline mode. The first app version was built to Android, reducing the time and costs of production. I used the Material Design from Google in Angular JS as the base to build the interface.

Launch date
2016

Project type
App Design, Web Design

My role
UI Design, Logo Design

1. Logo Design

1. Logo Design

The company did not have a defined visual identity, just the name of the app. Looking for good references to design, I found a way to give personality to the shape. A smile can be seen with letters B and P, presenting itself to the user in a way that no traditional bank or financial application does. After a lot of sketches, color study and tests, the logo was created.

logo

2. Wireframes

2. Wireframes

The creation process was in two steps: wireframes and prototypes. On the first one, I used Sketch App to develop the wireframes, facilitating the prototype step. This allowed the client to have an idea of how it will work and how steps in the flow need more attention and development.wireframes

Wallet
Introdução
Detalhes da Transação
Validar PIN
Informações da compra
configuracões da conta
Menu
Histórico de Status
Carteira – Cartão
Meio de pagamento
Extrato
Boleto

3. User Interface

3. User Interface

With the brand developed, I started to structure the app interface with the language, colors, and shapes defined throughout the process. I had many meetings with the BePay team to align ideas and show the results. Every part was really important to present the best result.

Tela de apresentação
Validação do Celular – Confirmação
Extrato
Tela de apresentação – segurança
Timeline – Movimentações
Pular pagamento
Extrato – Detalhes
Funcionamento – parte 02
Timeline
Carteira – lista
Mensagem de alerta – Conta criada
Menu

4. Web view

4. Web view

A web view of BePay is available to clients to access their information on the desktop experience.

BePay webview

Home
Main screen – Vazio
Main screen
Extrato – Buscar
Resgate

5. Learnings

5. Learnings

Build an app interface to this kind of market is very interesting because of the complexity of product understand from the client-side. The Brazilian people are very sensitive to money to manage app solutions and bring value to them is, in almost case, very hard.

This project helps me understand better the company's core business and bring me a new way to work as a professional. The research was very important to define some project goals before to design the interface.