Index
Product Design
2024
App
Designing the App for one of the largest digital commerce events in Latin America
Designing the App for one of the largest digital commerce events in Latin America
Overview
Overview
Year: 2024
Year: 2024
Duration: 4 months
Duration: 4 months
My performance:
My performance:
I worked from end to end on the project. I performed benchmarking, auditing on the WA base app, designed the wireframes and prototypes, and facilitated and aligned with the WA, Fmalta, and VTEX teams.
I worked from end to end on the project. I performed benchmarking, auditing on the WA base app, designed the wireframes and prototypes, and facilitated and aligned with the WA, Fmalta, and VTEX teams.
Results:
Results:
We were able to reuse a good part of the base app, successfully apply VTEX's Brandguide, and deliver value to the client with a more modern app that is better suited to the size of the event.
We were able to reuse a good part of the base app, successfully apply VTEX's Brandguide, and deliver value to the client with a more modern app that is better suited to the size of the event.
Context
Context
VTEX DAY is one of the largest digital commerce events in the world, and it is also a dynamic meeting of the main players in technology, industry leaders, and innovative brands.
VTEX DAY is one of the largest digital commerce events in the world, and it is also a dynamic meeting of the main players in technology, industry leaders, and innovative brands.
The event had the support of hundreds of sponsors and features important figures such as Nobel Prize winner Malala Yousafzai, Neil Patel, Uri Levine, Zack Kass, Shane Parrish, Barack Obama, Lewis Hamilton among others.
The event had the support of hundreds of sponsors and features important figures such as Nobel Prize winner Malala Yousafzai, Neil Patel, Uri Levine, Zack Kass, Shane Parrish, Barack Obama, Lewis Hamilton among others.
Some numbers from 2024:
Some numbers from 2024:
The event attracted 20K people per day (40k total users in an app), 230 sponsors, 260 speakers, and 120 hours of content.
The event attracted 20K people per day (40k total users in an app), 230 sponsors, 260 speakers, and 120 hours of content.
Main challenges
Main challenges
WA already had an event app, created for a previous client (ABRINT), and it was decided that we would use the structure of the back office of this app.
WA already had an event app, created for a previous client (ABRINT), and it was decided that we would use the structure of the back office of this app.
That is to say, we would use an existing component library from another product and work to apply the visual identity of VTEX Day. We would create new components only if the context of VTEX Day required it.
That is to say, we would use an existing component library from another product and work to apply the visual identity of VTEX Day. We would create new components only if the context of VTEX Day required it.
Team
Team
Goals
What we want with this project
Goals
What we want with this project
stakeholder
stakeholder
FMALTA + VTEX
FMALTA + VTEX
VTEX's central goal for the event was the figure of the speaker, mainly because they usually bring world-renowned people.
VTEX's central goal for the event was the figure of the speaker, mainly because they usually bring world-renowned people.
At the same time, and primarily, for F/malta it was a strategic goal to obtain sponsorship revenues. And both were interested in measuring the performance of the product.
At the same time, and primarily, for F/malta it was a strategic goal to obtain sponsorship revenues. And both were interested in measuring the performance of the product.
Get funding from sponsors
Get funding from sponsors
Highlight the Speaker's figure
Highlight the Speaker's figure
Measure the performance of the event
Measure the performance of the event
stakeholder
stakeholder
WA
WA
A WA had already made an event product that was used for another client; this project was the opportunity to create improvements in the structure and interface of the product and keep it on our shelf for other clients.
A WA had already made an event product that was used for another client; this project was the opportunity to create improvements in the structure and interface of the product and keep it on our shelf for other clients.
Facelift in the model used in Event apps
Facelift in the model used in Event apps
stakeholder
stakeholder
User
User
For the user, it was important to see who the speakers of most interest were and to watch the talks of that speaker. We also discovered through feedback from other apps during the benchmarking phase that it was necessary to improve the discoverability of the product information.
For the user, it was important to see who the speakers of most interest were and to watch the talks of that speaker. We also discovered through feedback from other apps during the benchmarking phase that it was necessary to improve the discoverability of the product information.
stakeholder
stakeholder
Sponsor
Sponsor
The sponsor had only one objective: to advertise.
The sponsor had only one objective: to advertise.
User
User
See who are the speakers that interest the most
See who are the speakers that interest the most
Choose the lecture that interests you the most and attend the lecture.
Choose the lecture that interests you the most and attend the lecture.
Find the location of the event and the stands easily.
Find the location of the event and the stands easily.
Sponsor
Sponsor
Advertise in the app
Advertise in the app
Strategic product objectives
Strategic product objectives
Make suggestions for speakers and talks based on the user's interest
Make suggestions for speakers and talks based on the user's interest
Automatically and easily set up the user's agenda if they want to.
Automatically and easily set up the user's agenda if they want to.
Allow the user to interact with other users and speakers
Allow the user to interact with other users and speakers
Usability goals
Usability goals
Having a navigation path that is always evident and easy, even if redundant
Having a navigation path that is always evident and easy, even if redundant
Allow the user to easily access the schedule and add lectures to their personal calendar.
Allow the user to easily access the schedule and add lectures to their personal calendar.
Benchmark
Understanding how products of this type work
Benchmark
Understanding how products of this type work
Since it was my first events app, I did a benchmark to understand how these products were built.
The F/malta team had already listed 2 apps to use as a benchmark, and WA already had a product on the shelf as we saw earlier.
Since it was my first events app, I did a benchmark to understand how these products were built.
The F/malta team had already listed 2 apps to use as a benchmark, and WA already had a product on the shelf as we saw earlier.
What did I want to respond with the Benchmark?
What did I want to respond with the Benchmark?
Features
Features
I compared the features of each product in order to understand what was mandatory and what was optional for an app of this type.
I compared the features of each product in order to understand what was mandatory and what was optional for an app of this type.
Flows
Flows
I compared the flows of the apps in the main journeys we identified:
Registrations;
Finding a lecture;
Finding a speaker;
Managing the personal agenda;
I compared the flows of the apps in the main journeys we identified:
Registrations;
Finding a lecture;
Finding a speaker;
Managing the personal agenda;
7
Mapped apps
Mapped apps
44
Features found
Features found
Most relevant findings:
Most relevant findings:
In some apps, the search filters were robust, but:
In some apps, the search filters were robust, but:
They condensed a lot of information that took up unnecessary space in the UI, which significantly increased the execution time of a search task.
They condensed a lot of information that took up unnecessary space in the UI, which significantly increased the execution time of a search task.
The main players use recommendation engines:
The main players use recommendation engines:
We identified that the recommendation engine could be a feature that balances the use of filters and increases engagement if we can extract the information of interest during onboarding (no player currently collects this information during onboarding, so our strongest hypothesis was that the recommendations were arbitrary and configured in the back office).
We identified that the recommendation engine could be a feature that balances the use of filters and increases engagement if we can extract the information of interest during onboarding (no player currently collects this information during onboarding, so our strongest hypothesis was that the recommendations were arbitrary and configured in the back office).
Approach
Defining the design strategy
Approach
Defining the design strategy
The benchmark made more evident the type of product we wanted to build. I chose OOUX as the main approach to building the information architecture and interaction of the app.
The only change compared to the traditional scope is that I skipped the linguistic analysis stage for the discovery of objects; the benchmark had already shown what the main objects of such a product are.
The benchmark made more evident the type of product we wanted to build. I chose OOUX as the main approach to building the information architecture and interaction of the app.
The only change compared to the traditional scope is that I skipped the linguistic analysis stage for the discovery of objects; the benchmark had already shown what the main objects of such a product are.
OOUX
Object-Oriented User Experience
Experiência de usuário orientada a objetos
OOUX
Object-Oriented User Experience
Experiência de usuário orientada a objetos
The fastest phase was the discovery and requirements part, and the slowest part of the project was phase 4, the prototype went through several revisions by various stakeholders, and we had to make changes to the structure several times depending on the stakeholder who was evaluating (F/malta and VTEX).
The fastest phase was the discovery and requirements part, and the slowest part of the project was phase 4, the prototype went through several revisions by various stakeholders, and we had to make changes to the structure several times depending on the stakeholder who was evaluating (F/malta and VTEX).
ORCA Sprint
ORCA Sprint
O
Objects
Objects
R
Relationship
Relationship
C
CTA
CTA
A
Attribute
Attribute
Fase 1
Fase 1
Discovery
Discovery
Fase 2
Fase 2
Requirements
Requirements
Fase 3
Fase 3
Prioritization
Prioritization
Fase 4
Fase 4
Sketch - Concept - Prototype - Test
Sketch - Concept - Prototype - Test
Object-Structure
Building the information architecture
Object-Structure
Building the information architecture
Object Relationship Matrix
Object Relationship Matrix
Product Object Structure
Product Object Structure
Wireframes
Testing the compositions
Wireframes
Testing the compositions
The wireframes were relatively easy, as we would be using the design of another WA product; my focus was to test whether it was necessary to create new components or to refactor existing ones.
The wireframes were relatively easy, as we would be using the design of another WA product; my focus was to test whether it was necessary to create new components or to refactor existing ones.
As for the content, I used the content from the 2024 event, which helped me understand the character limits of the texts throughout the interface. Anticipating possible writing issues that could arise during the implementation of the project.
As for the content, I used the content from the 2024 event, which helped me understand the character limits of the texts throughout the interface. Anticipating possible writing issues that could arise during the implementation of the project.
Brandguides vtex
Applying the client's brand guidelines
Brandguides vtex
Applying the client's brand guidelines
All the color patterns of VTEX Day had already been defined in a previous branding project.
All the color patterns of VTEX Day had already been defined in a previous branding project.
However, to meet some specific needs for color and typography, we rely on the VTEX brand guide (vtex day and vtex are different brands, but they complement each other).
However, to meet some specific needs for color and typography, we rely on the VTEX brand guide (vtex day and vtex are different brands, but they complement each other).
Typography
Typography
VTEX trust
VTEX trust
Prototypes
Prototypes
Onboarding
Onboarding
Home
Home
Speakers
Speakers
Agenda
Agenda
Hall
Hall
Metrics
Understanding what we need to measure
Metrics
Understanding what we need to measure
sponsor
sponsor
metric
metric
How can a sponsor know if their advertising in the app is generating engagement?
How can a sponsor know if their advertising in the app is generating engagement?
KPI
Click on the advertisement banner (which banner was clicked and who clicked)
Click on the advertisement banner (which banner was clicked and who clicked)
VTEX + Fmalta
VTEX + Fmalta
metric
metric
How can we use the product to measure the performance of the event?
How can we use the product to measure the performance of the event?
KPI
KPI
Number of registrations in the app
Number of registrations in the app
Results of the searches linked to users
Results of the searches linked to users
Most added lectures in the user's schedule.
Most added lectures in the user's schedule.
Most viewed speakers
Most viewed speakers
Traffic volume of each stage.
Traffic volume of each stage.
F/malta + WA
F/malta + WA
metric
metric
How can we know if the app is converting users who have not yet purchased the ticket?
How can we know if the app is converting users who have not yet purchased the ticket?
metric
metric
Click on the "buy your ticket" card
Click on the "buy your ticket" card
Thank you very much!
For taking the time to read my work.
If you liked my work, if you want to know more about my work. Get in touch with me and let's talk!
Thank you very much!
For taking the time to read my work.
If you liked my work, if you want to know more about my work. Get in touch with me and let's talk!
Sorry for the view…
My portfolio is currently being updated to ensure proper responsiveness on mobile screens. For now, it is only accessible on desktop screens.