Elo Group

How can we improve experience and increase conversion rates?

Context

CompraOn was a pilot phase product developed by Elo Company, embodying MVP characteristics within the Vtex environment. Initially, it was only live on a federal application, targeting a user base of over 12 million individuals.

Although initially integrated into this specialized platform, the overarching business plan aimed for its swift expansion onto diverse platforms. This endeavor afforded us significant freedom to explore a range of strategies, all meticulously aligned with the company's long-term vision.

Challenges

Environmental constraints
Lack of direct user access
Design standards gap
Sparse product information

Impact

3 million hits daily from a base of ~12 million

My role

My role involved applying design processes to improve and create features for implementation in the Vtex environment, aiming to achieve business goals while enhancing user experience. To achieve this, we worked closely with the PM from the Elo Group.

I also was responsible to build a validation process. Every solution needed to be validated by our developers, then the PM, and since the application was embedded within a main app, any deliveries required approval from the main app's team to ensure alignment with their standards and integration requirements. Validation is a standard process for a UX/UI designer, but it was important to adapt proposals timming to this product validation stages.

My proposals included insights and critical points that require attention from the team to ensure the success of the solutions. Features were designed for continuous refinement based on data and evolving business and market dynamics.

Timeline

2022-2022

What I was expecting to accomplish?

Solidify Product Perspective

Gather, analyze, and synthesize evolving product information.

Establish Consistency

Identify and define consistent design patterns as the product vision becomes more defined, ensuring a unified user experience.

Surpass Limitations

Transform limitations into opportunities for innovative and unconventional design solutions, pushing boundaries to create unique and compelling user experiences.

Design
Process

UX Discovery was a key practice I applied in the context of this product, which existed as a pilot, in the early stages, within another larger product and operated in a constrained environment with governmental structures. This unique setup required a deep understanding of the product to make informed decisions that considered its context and users.

To guide this exploration, I used the Double Diamond framework, structured into four adaptable phases:

Discover: Broadly exploring the problem to uncover insights.
Define: Synthesizing findings to clarify the scope.
Develop (optional): Exploring potential solutions.
Deliver: Consolidating and refining learnings.

I selected the Double Diamond framework for its adaptability, particularly for scenarios where studies might not lead to immediate implementation or prototyping.

In addition to this approach, we were able to manage a continuous flow of design-related requests using User Story. For these tasks, I worked within the Agile UX framework, where Design Thinking was applied flexibly, fostering creative collaboration between myself, my mentee designer, team members, and the client. This framework ensured that I stayed focused on delivering user-centered solutions, while working collectively to address challenges and refine opportunities.

Research
& Competitive Analysis

We did not have direct access to our users, but we received user data through reports. Additionally, I conducted desk research to gain a general understanding of user context, market trends, and industry practices.

Both UX and business benchmarking were conducted and shared with the team. We continuously analyzed other platforms to collect data on features, interface patterns, functions, and flows, in order to gain insights.

Goal

To improve the platform's usability, while also simplifying and educating users on the purchasing process, ensuring alignment with their needs and context. This will foster a better user experience, increase trust, and drive higher conversion rates.

Audience

Target Audience: The CompraOn marketplace caters to an audience predominantly from socioeconomic classes D and E in Brazil, representing the majority of the population (approximately 12 million users on Caixa Tem and 3 million daily platform visits).

Demographic Challenges: These groups often face barriers such as limited digital literacy, educational inequalities, and socio-economic challenges, further complicating their ability to navigate complex platforms and policies.

Impact: These issues combined limit user adoption, reduce trust in the platform, and hinder the mission of providing accessible, socially-driven online shopping experiences.

Proto persona

Carried out with available public data from the federal app individuals, complemented by insights extracted from our research and app reports, we learned more about government regulations pertaining to a social program and its significant impact on our users. This facilitated a deeper understanding of their consumption habits, priorities, and language barriers.

Visual
Design

The online store operated on the Vtex Legacy platform for mobile devices (app), which had significant limitations. It did not allow full customization within its native components nor the inclusion of components from outside its ecosystem, making it necessary to create custom components from scratch to address specific needs.

Despite the technological constraints of the environment, I consistently sought creative and innovative approaches to solve problems and meet user needs. When designing new components, I adhered to best practices in UI design, such as:

Accessibility
Usability
Conventions
E-commerce standards.

A Design System was already in progress, adapted for mobile and aligned with the brand's specifications. I had the privilege of continuing the excellent work that had been established, ensuring compliance with governmental guidelines, maintaining consistency across environments, and upholding a cohesive visual style throughout the platform.

Information Architecture

I see Information Architecture as a discipline that can be applied dynamically and fluidly, adapting to the needs of each project. For this reason, I aim to apply it continuously, ensuring that the organization of information is always logical and that it would guide and educate the user, particularly in this context of e-commerce.

My process was as follows:

Understanding the audience

I analyzed data collected from desk research, proto-personas, e-commerce standards, and client-provided reports.
Content mapping

Respecting the pre-established hierarchies and structures of the Vtex environment and following the evolving Design System inventory. Any new definitions regarding the product were documented in the Design System inventory.
Defining flows and navigation

To guide decisions about hierarchy, organization, and content logic, I developed user flows, user tasks, journeys, and sitemaps that reflected intuitive experiences. These prioritized the user needs and expectations while adhering to e-commerce standards, such as strategically incorporating CTAs into the user flow.
Wireframes and validation

I created low-fidelity wireframes to test the information structure. Based on internal feedback and monitoring, I adjusted the solutions to better meet both user and business needs.

Interaction Design

By designing intuitive user flows and collaborating with the team, I aimed to create clear, accessible, and engaging interactions that align with both user needs and business goals.

Navigation & Interaction Patterns
- Applied recognized UI patterns and adapted interactions to different contexts.
- Ensured intuitive navigation and interaction to enhance user experience.
Component Design System
- Utilized and managed a component design system to maintain consistency.
- Applied best practices to adhere to pre-established standards.
Microinteractions
- Developed optimized microinteractions for mobile, providing feedback and control.
- Leveraged usability heuristics and e-commerce standards to guide user engagement.
UX Writing & System Messaging
- Collaborated on crafting clear, concise, and action-oriented system messages.
- Ensured that error messages, instructions, and prompts were intuitive and helpful.
Prototyping & Validation
- Created interactive prototypes to test interactions before development.
- Refined designs based on feedback from stakeholders.
User Flows & Decision Paths
- Designed structured user flows to guide users through tasks and decisions.
- Considered both happy paths and edge cases, such as promotion adherence and stock limitations.
Collaboration with Engineering
- Partnered with developers to ensure design viability.
- Aligned technical constraints with user experience goals for optimal implementation.
Accessibility
- Designed interactions that are accessible to users with different abilities.

Prototyping and Testing

Prototyping was applied selectively when necessary, often in high fidelity, facilitated by the existing Design System. These prototypes were primarily used to visualize behaviors and interactions, particularly for new components, ensuring clear communication and alignment with the development team. In most cases, detailed user flows replaced the need for prototyping, streamlining the process and enabling faster design refinements.

However, to validate more complex behaviors, we employed low-fidelity prototypes to test functionality and refine the experience before committing to detailed designs.

Testing was primarily conducted with volunteers to gather early feedback and make adjustments swiftly. These small-scale tests helped refine ideas, dismiss invalid hypotheses, and uncover opportunities for improvement. Since user testing with the app customers was not possible, I relied on monitoring tools and available data to collect valuable insights whenever possible.

Monitoring
and Iteration

In this project, it was necessary to iterate and refine to meet specific partners campaigns, incorporate insights from analytical data, and respond to governmental changes.

Through strategic alignments with:

Designer
Product Manager
Product Owner
CRO

User behavior was analyzed to uncover improvement opportunities and inform data-driven decisions, using tools like:

Google Analytics
Hotjar

We analyzed data, shared insights and reports, and identified actionable opportunities.

Internal workshops further helped refine ideas, discard invalid assumptions, maintain open communication with our team, and uncover additional opportunities for enhancement, ensuring a holistic approach to continuous improvement. Leveraging collaboration tools like Slack and Jira to ensure seamless communication.

Based on the need, we mapped:

Iterations
A/B tests
Follow-ups

All iterations, decisions, and results were documented in shared repositories, enabling easy reference and fostering a culture of learning. Success was measured using specific KPIs, such as conversion and engagement rates, ensuring the effectiveness of our efforts, with continuous monitoring of results and adjustments as necessary.

Design Handoff

Design handoff was documented through Figma after technical validation, adjustments, and approval from the Product Manager. The document included all the necessary information to ensure the success of the development:

Research and studies conducted
Visual specifications
Final screens
Design tools
Components
Design tokens
Checklist
Useful links

After the handoff, I ensured continuous support availability for the team, was always available to answer questions, and actively followed the implementation through daily meetings. This approach ensured that the final result met the client's expectations and aligned with the user needs.

What we accomplish?

List Title

Solidify Perspective

Solidify Perspective through continuous collaboration and the Double Diamond process. This approach enabled us to gain a holistic view of the product, aligning the design experience with the client’s needs and their partners’ expectations. The result was a highly praised design vision that resonated with the client and stakeholders.

Establish Consistency

By actively collaborating to keep the design system updated and aligned with the desired user experience, we ensured consistency across the product. This was achieved through clear design principles and supported by concepts such as the “10 Usability Heuristics for User Interface Design,” fostering a unified and cohesive design language for both designers and users.

Surpass Limitations

Strategically, we turned constraints into opportunities by innovating and modifying internal workflows. This approach allowed us to deliver improvements that yielded tangible results, pushing the boundaries of what was possible within the project's technical and operational limitations.

In retrospect

Sharing Pain Points

Acknowledging the importance of considering the entire ecosystem of a design project, including back-end readiness, business rules, and legal considerations. My experience with Elo emphasizes the value of open communication about challenges to facilitate collaborative problem-solving.

Plan and Adapt

Advocating for a dynamic approach to design in the ever-changing landscape of e-commerce. It highlights the need to continuously plan and being ready to adapt to stay ahead of evolving trends and challenges.

Embracing Non-Linearity

It encourages letting project needs guide the design process rather than rigidly adhering to predefined stages.

Data-driven Decisions

Stressing the importance of data in informing design decisions and strategies. The role of data analysis in understanding user behaviors, identifying trends, and uncovering insights that drive effective design solutions.