Globo's new checkout 

Designing a payment experience

Design team

Antonio Duarte (Senior UX Designer)

Carlos Eduardo (Lead UX Designer)

My role

Product Discovery, Information Architecture; User Research; Visual Design

Client

Globo

Year

2020

The challenge

Globo is a MediaTech company in Brazil focused on streaming services. In order to improve the business model and create new offers to customers, it was needed to fix the current payment experience.

The Sales Platform used Sales Force as back-end and Vlocity as a front-end framework. For this project, the engineers have already planned to build another architecture without Vlocity. 

Captura de Tela 2021-10-25 às 12.19.42.png

Problems

• Low performance (loading time  around 18 seconds)
• Current platform couldn’t escalate  the business model and create bundles
• Many hard coded components, difficult to test and make UI improvements
• No user behavior tracking on Google Analytics 

Captura de Tela 2021-10-25 às 14.14.08.png
old-interface.png

The redesign should consider different case scenarios for offers and devices (desktop, in-app, TvOS)

Captura de Tela 2021-10-25 às 12.21.48.png

How I planned the design process:

• interview with business stakeholders and the Product Owner to understand the problems and align expectations

• desk research of previous findings and benchmark 

• product definition workshop 

• design critique

• prototype

• usability test

A Miro board was created as a "workgroup" room with the stakeholders and project's documentation

Captura de Tela 2021-10-25 às 17.08.09.png

Design process

• full remote teams

• interview with business stakeholders and the Product Owner to understand the problems and align expectations

• desk research of previous findings and benchmark 

• co-creation workshop with engineers to understand the back-end architecture

• workgroup with stakeholders to create the platform’s framework 

• prototype and test

Understanding the Sales Platform back-end architecture

I created a visual map based on the original tech documentation to better explain the architecture and facilitate the communication with the team

ORIGINAL

NEW VISUAL MAP

Captura de Tela 2021-10-25 às 17.16.00.png
Captura de Tela 2021-10-25 às 17.16.52.png

The new interface

new-interface.png

• I designed a whitelabel interface solution, that could be painted according to each product’s brand identity in the future. 


• Although for the MVP launch I couldn’t use product’s logos because the marketing team was still negotiating  with other partners to understand how to sell bundles with Disney+, Deezer and others.


•                                  was the default brand, that represented all Globo’s D2C digital products


• Each product should choose the best  payment option and the interface would always show it at first with an open form 


• Very simple visual components  focusing more on parameter's hierarchy and responsivity

Captura de Tela 2021-10-26 às 19.05.07.png

Visual design

Captura de Tela 2021-10-26 às 19.16.27.png
Captura de Tela 2021-10-26 às 19.07.39.png

Desktop

Smartphone

Captura de Tela 2021-10-26 às 19.07.49.png

Wanna know more about the usability test and further results? Check it out here.