Turbo Livelo: designing a new experience to help users accelerate point gaining.
Turbo Livelo: designing a new experience to help users accelerate point gaining.
Turbo Livelo: designing a new experience to help users accelerate point gaining.
My role
My role
My role
Analyze the problem
Analyze the problem
Analyze the problem
UX research: investigate pain points
UX research: investigate pain points
UX research: investigate pain points
Conduct workshop with stakeholders
Conduct workshop with stakeholders
Conduct workshop with stakeholders
Ideation/wireframing
Ideation/wireframing
Ideation/wireframing
Prototyping
Prototyping
Prototyping
Handoff
Handoff
Handoff
Analyze the results
Analyze the results
Analyze the results
Collaboration with stakeholdersduring the process
Collaboration with stakeholders during the process
Collaboration with stakeholders during the process
Summary
Summary
Summary
Turbo Livelo is a product that helps users accelerate point accumulation across various transactions, including purchases with Livelo’s partners and partner bank credit cards, acting as a 'boost.' It offers a way to buy points at a lower cost than usual.
Since its launch in June 2024 through October 2024, Turbo has achieved more than 149,000 orders and boosted 1.13 billion points, making it a highly significant product for the company.
Turbo Livelo is a product that helps users accelerate point accumulation across various transactions, including purchases with Livelo’s partners and partner bank credit cards, acting as a 'boost.' It offers a way to buy points at a lower cost than usual.
Turbo Livelo is a product that helps users accelerate point accumulation across various transactions, including purchases with Livelo’s partners and partner bank credit cards, acting as a 'boost.' It offers a way to buy points at a lower cost than usual.
Turbo lacked a dedicated experience, leading to pain points for users. The challenge was to design a new, user-centered experience for the Livelo mobile app.
Turbo lacked a dedicated experience, leading to pain points for users. The challenge was to design a new, user-centered experience for the Livelo mobile app.
Turbo lacked a dedicated experience, leading to pain points for users. The challenge was to design a new, user-centered experience for the Livelo mobile app.
Key results
Key results
Key results
76.5%
76.5%
76.5%
increase in the average points boosted per transaction.
55.8%
55.8%
55.8%
rise in the average value of transactions in Brazilian reais
Project Workflow
Project Workflow
Project Workflow
Discovery
Discovery
Study the journey and seek user opinions to identify pain points
Study the journey and seek user opinions to identify pain points
Ideation
Ideation
Collaborate with stakeholders, design ideas, leading and guiding other designers
Collaborate with stakeholders, design ideas, leading and guiding other designers
Validation
Validation
Testing the solution
with users, conducting usability testing sessions
Testing the solution
with users, conducting usability testing sessions
Delivery
Delivery
Final delivery screens, focused on accessibility and adhering to good design practices.
Final delivery screens, focused on accessibility and adhering to good design practices.
Results
Results
Measure delivery results, checking whether business objectives have been achieved
Measure delivery results, checking whether business objectives have been achieved
Discovery
Study the journey and seek user opinions to identify pain points.
Ideation
Collaborate with stakeholders lead and guide other designers
Validation
Testing the solution with users, conducting usability testing sessions.
Delivery
Final delivery screens, focus on accessibility and good design practices.
Results
Measure delivery results, checking if business objectives have been achieved.
Context
Context
Context
How was the experience by the time the project started?
How was the experience by the time the project started?
How was the experience by the time the project started?
Turbo Livelo was initially located within the statement screen on both the web and mobile app.
Users had to navigate to the statement and identify eligible transactions for boosting—since not all accumulation transactions qualify. The statement displayed all transactions, not just the accumulation ones. To help, users could apply a filter to find eligible transactions.
Next to eligible transactions, there was a button to boost them, along with a link to open a modal containing explanations about Turbo’s rules and usage.
Next is a screen where the user selects the multiplier to boost their points. The multiplier goes from 2 to 15.
Turbo Livelo was initially located within the statement screen on both the web and mobile app.
Users had to navigate to the statement and identify eligible transactions for boosting—since not all accumulation transactions qualify. The statement displayed all transactions, not just the accumulation ones. To help, users could apply a filter to find eligible transactions.
Next to eligible transactions, there was a button to boost them, along with a link to open a modal containing explanations about Turbo’s rules and usage.
Next is a screen where the user selects the multiplier to boost their points. The multiplier goes from 2 to 15.
Turbo Livelo was initially located within the statement screen on both the web and mobile app.
Users had to navigate to the statement and identify eligible transactions for boosting—since not all accumulation transactions qualify. The statement displayed all transactions, not just the accumulation ones. To help, users could apply a filter to find eligible transactions.
Next to eligible transactions, there was a button to boost them, along with a link to open a modal containing explanations about Turbo’s rules and usage.
Next is a screen where the user selects the multiplier to boost their points. The multiplier goes from 2 to 15.
Discovery
Discovery
Discovery
Identifying user pain points
Identifying user pain points
Identifying user pain points
I used tools like UX Cam and Hotjar, reviewed research such as the Turbo NPS, and undertook desk research to identify user pain points in the experience.Some players analyzed were:
I used tools like UX Cam and Hotjar, reviewed research such as the Turbo NPS, and undertook desk research to identify user pain points in the experience.Some players analyzed were:
I used tools like UX Cam and Hotjar, reviewed research such as the Turbo NPS, and undertook desk research to identify user pain points in the experience.Some players analyzed were:
1
1
1
It wasn't clear which transactions had already been boosted
It wasn't clear which transactions had already been boosted
It wasn't clear which transactions had already been boosted
In the statement, users could find multiple transactions with the same name, such as from the same partner. They had to click the button “boost points” to check if a transaction had already been boosted. If the transaction had been boosted, an error occurred.
This could be very frustrating, as I observed in Hotjar session recordings. You can watch the video below.
In the statement, users could find multiple transactions with the same name, such as from the same partner. They had to click the button “boost points” to check if a transaction had already been boosted. If the transaction had been boosted, an error occurred.
This could be very frustrating, as I observed in Hotjar session recordings. You can watch the video below.
In the statement, users could find multiple transactions with the same name, such as from the same partner. They had to click the button “boost points” to check if a transaction had already been boosted. If the transaction had been boosted, an error occurred.
This could be very frustrating, as I observed in Hotjar session recordings. You can watch the video below.
2
2
2
Users were struggling to understand
how to use it
Users were struggling to understand how to use it
Users were struggling to understand how to use it
To gather more data, I spoke with the customer service center team, who provided a list of the main topics users were calling about regarding Turbo. I discovered that a significant number of users were struggling to understand and use the product.
To gather more data, I spoke with the customer service center team, who provided a list of the main topics users were calling about regarding Turbo. I discovered that a significant number of users were struggling to understand and use the product.
To gather more data, I spoke with the customer service center team, who provided a list of the main topics users were calling about regarding Turbo. I discovered that a significant number of users were struggling to understand and use the product.
44%
44%
44%
asked about product
information and rules
asked about product information and rules
asked about product
information and rules
40%
40%
40%
needed assistance with
the purchase
needed assistance with the purchase
needed assistance with
the purchase
This highlighted the need for clearer information to
help users understand the new product and feel confident using it.
This highlighted the need for clearer information to help users understand the new product and feel confident using it.
This highlighted the need for clearer information to help users understand the new product and feel confident using it.
3
3
Users couldn’t select multiple transactions at once to boost
Users couldn’t select multiple transactions at once to boost
Users had to click the button and boost transactions one by one, which created a poor experience for those wanting to boost multiple transactions. From a business perspective, this also prevented higher-point transactions from occurring, which could have been beneficial for achieving business goals.
This was a clear pain point for users, as I found them saying it in different places:
Users had to click the button and boost transactions one by one, which created a poor experience for those wanting to boost multiple transactions. From a business perspective, this also prevented higher-point transactions from occurring, which could have been beneficial for achieving business goals.
This was a clear pain point for users, as I found them saying it in different places:
It was only a hassle because I had to purchase each item one by one. If in the future it’s possible to add everything to the cart and make a single purchase, that would be great.
It was only a hassle because I had to purchase each item one by one. If in the future it’s possible to add everything to the cart and make a single purchase, that would be great.
Turbo NPS Research
3
Users couldn’t select multiple transactions at once to boost
Users had to click the button and boost transactions one by one, which created a poor experience for those wanting to boost multiple transactions. From a business perspective, this also prevented higher-point transactions from occurring, which could have been beneficial for achieving business goals.
This was a clear pain point for users, as I found them saying it in different places:
It was only a hassle because I had to purchase each item one by one. If in the future it’s possible to add everything to the cart and make a single purchase, that would be great.
Turbo NPS Research
Ideation
Ideation
Ideation
Collaboration workshop
Collaboration workshop
Collaboration workshop
After identifying the problems, I conducted a workshop with the PM and invited stakeholders from various teams who had interacted with Turbo Livelo. Together, we brainstormed hypotheses for improving the experience.
Using Miro, we gathered participants’ perceptions and ideas to broaden our understanding and identify gaps. The workshop confirmed my initial hypotheses and uncovered new insights.
It became clear that Turbo needed an exclusive experience, including:
After identifying the problems, I conducted a workshop with the PM and invited stakeholders from various teams who had interacted with Turbo Livelo. Together, we brainstormed hypotheses for improving the experience.
Using Miro, we gathered participants’ perceptions and ideas to broaden our understanding and identify gaps. The workshop confirmed my initial hypotheses and uncovered new insights.
It became clear that Turbo needed an exclusive experience, including:
After identifying the problems, I conducted a workshop with the PM and invited stakeholders from various teams who had interacted with Turbo Livelo. Together, we brainstormed hypotheses for improving the experience.
Using Miro, we gathered participants’ perceptions and ideas to broaden our understanding and identify gaps. The workshop confirmed my initial hypotheses and uncovered new insights.
It became clear that Turbo needed an exclusive experience, including:
The ability to select multiple transactions to boost.
The ability to select multiple transactions to boost.
The ability to select multiple transactions to boost.
Concise information about the product and its rules.
Concise information about the product and its rules.
Concise information about the product and its rules.
An easy way for users to view the available balance for boosting.
An easy way for users to view the available balance for boosting.
An easy way for users to view the available balance for boosting.
First version of the screens
First version of the screens
First version of the screens
E-mails reference
E-mails reference
Although the journey wasn’t exactly the same, I drew inspiration from email platforms, where users can select one, multiple, or all elements from a list at once.
The goal was to introduce a familiar interaction to the new 'Transaction List' screen, the main screen of the updated experience.
Although the journey wasn’t exactly the same, I drew inspiration from email platforms, where users can select one, multiple, or all elements from a list at once.
The goal was to introduce a familiar interaction to the new 'Transaction List' screen, the main screen of the updated experience.
Although the journey wasn’t exactly the same, I drew inspiration from email platforms, where users can select one, multiple, or all elements from a list at once.
The goal was to introduce a familiar interaction to the new 'Transaction List' screen, the main screen of the updated experience.
I began sketching a few ideas on paper to create a wireframe.
I began sketching a few ideas on paper to create a wireframe.
I began sketching a few ideas on paper to create a wireframe.
Next, I began refining the design, starting with an opening screen that would introduce users to the basics of Turbo and offer options such as viewing the list of eligible transactions or boosting all eligible transactions at once.
Next, I began refining the design, starting with an opening screen that would introduce users to the basics of Turbo and offer options such as viewing the list of eligible transactions or boosting all eligible transactions at once.
Next, I began refining the design, starting with an opening screen that would introduce users to the basics of Turbo and offer options such as viewing the list of eligible transactions or boosting all eligible transactions at once.
For the screen displaying the transaction list, I initially focused on designing a header that would show the total points eligible for boosting and provide the option to boost them all. I then evolved the design to consider how to present the list as a whole, including options for filtering and sorting transactions.
For the screen displaying the transaction list, I initially focused on designing a header that would show the total points eligible for boosting and provide the option to boost them all. I then evolved the design to consider how to present the list as a whole, including options for filtering and sorting transactions.
For the screen displaying the transaction list, I initially focused on designing a header that would show the total points eligible for boosting and provide the option to boost them all. I then evolved the design to consider how to present the list as a whole, including options for filtering and sorting transactions.
Validation
Validation
Validation
Usability test
Usability test
Usability test
After finalizing the screen designs, it was time to test them with real users.I collaborated with a UX Researcher to write the script and conduct the tests.
After finalizing the screen designs, it was time to test them with real users. I collaborated with a UX Researcher to write the script and conduct the tests.
After finalizing the screen designs, it was time to test them with real users. I collaborated with a UX Researcher to write the script and conduct the tests.
10 users
10 users
10 users
5 that never used Turbo
5 that already had used it
5 that never used Turbo
5 that already had used it
5 that never used Turbo
5 that already had used it
12 missions
12 missions
12 missions
remote-moderated test
using Maze
remote-moderated test
using Maze
remote-moderated test
using Maze
I invited the PM and Tech Lead to join the sessions as observers, allowing them to gain firsthand insight into users' perceptions and align with me on design decisions. This was the main screens used in the test:
I invited the PM and Tech Lead to join the sessions as observers, allowing them to gain firsthand insight into users' perceptions and align with me on design decisions. This was the main screens used in the test:
I invited the PM and Tech Lead to join the sessions as observers, allowing them to gain firsthand insight into users' perceptions and align with me on design decisions. This was the main screens used in the test:
Positive feedback:
Positive feedback:
Positive feedback:
The satisfaction rating for the experience was 4.5 out of 5. We asked participants to provide a rating at the end of each session.
The satisfaction rating for the experience was 4.5 out of 5. We asked participants to provide a rating at the end of each session.
The satisfaction rating for the experience was 4.5 out of 5. We asked participants to provide a rating at the end of each session.
The new features were well received, especially the 'select all transactions' option.
The new features were well received, especially the 'select all transactions' option.
The new features were well received, especially the 'select all transactions' option.
Users who were unfamiliar with Turbo were able to understand the product and the experience, indicating that the information was clear.
Users who were unfamiliar with Turbo were able to understand the product and the experience, indicating that the information was clear.
Users who were unfamiliar with Turbo were able to understand the product and the experience, indicating that the information was clear.
Areas for improvement:
Areas for improvement:
Areas for improvement:
Only transactions made within the past year are eligible for boosting, so I added a filter to display only those transactions. However, participants had difficulty understanding the filter.
Only transactions made within the past year are eligible for boosting, so I added a filter to display only those transactions. However, participants had difficulty understanding the filter.
Only transactions made within the past year are eligible for boosting, so I added a filter to display only those transactions. However, participants had difficulty understanding the filter.
On the multiplier selection screen, I suggested adding a feature to edit the transactions selected on the previous screen, but many users overlooked this button, preferring to return to the transaction list screen when asked to edit their selection.
On the multiplier selection screen, I suggested adding a feature to edit the transactions selected on the previous screen, but many users overlooked this button, preferring to return to the transaction list screen when asked to edit their selection.
On the multiplier selection screen, I suggested adding a feature to edit the transactions selected on the previous screen, but many users overlooked this button, preferring to return to the transaction list screen when asked to edit their selection.
Test report
Test report
Test report
After the sessions, I analyzed the results on Maze and wrote a report summarizing the findings, then made a few adjustments to the prototype before finalizing the version and came with the final version.
After the sessions, I analyzed the results on Maze and wrote a report summarizing the findings, then made a few adjustments to the prototype before finalizing the version and came with the final version.
After the sessions, I analyzed the results on Maze and wrote a report summarizing the findings, then made a few adjustments to the prototype before finalizing the version and came with the final version.
Delivery
Delivery
Delivery
How did the delivery turn out?
How did the delivery turn out?
How did the delivery turn out?
After analyzing the usability test results, I made several adjustments to the prototype. Using the Livelo Design System and guaranteeing good UX design practices I came up with the final delivery.
Below, you can review the main screens and the rationale behind the design decisions. If you'd prefer, you can explore the full interactive prototype.
After analyzing the usability test results, I made several adjustments to the prototype. Using the Livelo Design System and guaranteeing good UX design practices I came up with the final delivery.
Below, you can review the main screens and the rationale behind the design decisions. If you'd prefer, you can explore the full interactive prototype.
After analyzing the usability test results, I made several adjustments to the prototype. Using the Livelo Design System and guaranteeing good UX design practices I came up with the final delivery.
Below, you can review the main screens and the rationale behind the design decisions. If you'd prefer, you can explore the full interactive prototype.
Onboarding
Transactions list
Filters
Last days to boost
How it works
Multiplier
To help users get to know Turbo Livelo, I designed an onboarding section for first-time access. It includes key information about the product, instructions on how to use it, and a few helpful tips.
Onboarding
Transactions list
Filters
Last days to boost
How it works
Multiplier
To help users get to know Turbo Livelo, I designed an onboarding section for first-time access. It includes key information about the product, instructions on how to use it, and a few helpful tips.
Onboarding
Transactions list
Filters
Last days to boost
How it works
Multiplier
To help users get to know Turbo Livelo, I designed an onboarding section for first-time access. It includes key information about the product, instructions on how to use it, and a few helpful tips.
Handoff Documentation
Handoff Documentation
Handoff Documentation
An essential part of the delivery is the handoff documentation. To ensure the engineering team builds the experience as designed, I specified screen behaviors and flows, and documented key aspects, including:
An essential part of the delivery is the handoff documentation. To ensure the engineering team builds the experience as designed, I specified screen behaviors and flows, and documented key aspects, including:
An essential part of the delivery is the handoff documentation. To ensure the engineering team builds the experience as designed, I specified screen behaviors and flows, and documented key aspects, including:
Accessibility
Accessibility
Accessibility
I defined aria-labels, tested color contrasts, specified component roles, and outlined the reading order for screen reader navigation. This documentation ensures the experience is developed in line with high accessibility standards.
I defined aria-labels, tested color contrasts, specified component roles, and outlined the reading order for screen reader navigation. This documentation ensures the experience is developed in line with high accessibility standards.
I defined aria-labels, tested color contrasts, specified component roles, and outlined the reading order for screen reader navigation. This documentation ensures the experience is developed in line with high accessibility standards.
Spacing
Spacing
Spacing
I defined margins and spacing using Livelo’s Design System tokens, based on the 8-point grid, ensuring correct information hierarchy.
I defined margins and spacing using Livelo’s Design System tokens, based on the 8-point grid, ensuring correct information hierarchy.
I defined margins and spacing using Livelo’s Design System tokens, based on the 8-point grid, ensuring correct information hierarchy.
Results
Results
Results
What were the results obtained with this new journey?
What were the results obtained with this new journey?
What were the results obtained with this new journey?
Comparing some data between July and September (3 months before the new experience was launched) and October and December (3 months after), Turbo achieved great results:
Comparing some data between July and September (3 months before the new experience was launched) and October and December (3 months after), Turbo achieved great results:
Comparing some data between July and September (3 months before the new experience was launched) and October and December (3 months after), Turbo achieved great results:
Average points boosted
Average points boosted
Average points boosted
There was a significant increase in the points boosted per transaction, which was one of the goals we aimed to achieve with the new experience.
There was a significant increase in the points boosted per transaction, which was one of the goals we aimed to achieve with the new experience.
There was a significant increase in the points boosted per transaction, which was one of the goals we aimed to achieve with the new experience.
76.5%
76.5%
increase in the average points boosted per transaction
increase in the average points boosted per transaction
8,643 points vs 15,253 points
8,643 points vs 15,253 points
Average points boosted
Average points boosted
Average points boosted
This led to a significant increase in the average money spent per transaction, resulting in a substantial revenue boost for the company.
This led to a significant increase in the average money spent per transaction, resulting in a substantial revenue boost for the company.
This led to a significant increase in the average money spent per transaction, resulting in a substantial revenue boost for the company.
55.8%
55.8%
rise in the average value of transactions in Brazilian reais
rise in the average value of transactions in Brazilian reais
R$ 297.62 vs R$ 463.62
R$ 297.62 vs R$ 463.62