"Designing the first e-commerce platform for Citroën in Latin America!"
Context
Citroën Brazil needed to launch its first eCommerce platform. Leveraging eCommerce insights from other Stellantis brands, our task was to design user journeys and create wireframes tailored to this new initiative.
Challenge
The organization requested a new website to facilitate car purchases. Our task involved mapping all touchpoints and ensuring alignment with financial, legal, and compliance requirements, including Brazil's new internet data protection laws.
Project Goal
-
User Flow;
-
Wireframe of the entire experience;
-
Website development schedule.
My role
Senior UX/UI Designer
Time of project
6 weeks.
The discovery
Understanding the problem
An eCommerce platform for cars was unprecedented in Brazil. Purchasing a car online could raise concerns among Brazilian customers due to the high value involved and fears about the security of their financial and personal data, especially in light of recent data leak scandals in the country.
Meeting all business, financial, and data security regulations was crucial to addressing the demands of the stakeholders involved in the process.
The user
That year, Brazilian citizens were dealing with a major data leak scandal, raising significant concerns about cybersecurity. Our website needed to request a substantial amount of documents and sensitive user information, which heightened these concerns. As designers, we asked ourselves: how could we instil a sense of security in our users? We began by interviewing our target audience to understand how the scandal impacted their confidence in online purchases—especially for a high-value product like a car.
Conclusion
After conducting several interviews and extensive research on the subject, we discovered that offering users an alternative to completing this part of the process offline would address their concerns. We incorporated this option into the website, allowing users to choose the approach that suited them best.
Benchmark
Analyzing e-commerce platforms from other Stellantis brands in Europe was crucial for understanding the functionality of similar sites, user interactions, and the process flow involved in purchasing a car online.
An unexpected problem
The problem with the bureaucracy
One of the stakeholders involved in the process was the bank, responsible for providing financing.
Given the high-value nature of the product, the bank required extensive user information, which had to be verified with financial institutions and public agencies. This process was lengthy and bureaucratic, involving long forms and waiting for bank approval, which could potentially increase user churn, especially among customers accustomed to simpler online purchases.
Solution
We conducted a series of tests to identify the flow that would be least frustrating for users.
Our findings revealed that the optimal approach to enhance the user experience was to divide the process into smaller steps and obtain necessary information through alternative means.
By collecting basic information from users at the beginning of their journey, we synced our site with government financial institutions' databases to retrieve additional non-confidential yet essential data, eliminating the need for users to input this information later in the process manually.
As a result, we significantly streamlined the user journey, improving its usability and reducing friction.
Crafting the Experience
User Flow
Creating the user flow proved to be highly challenging, as the client frequently revised their expectations and introduced new features during the process.
In every meeting, beyond addressing the client's evolving requirements, we collaborated with other stakeholders to evaluate development possibilities, business rules, and legal constraints for the website. These discussions involved developers, lawyers, bank representatives, and a Stellantis director.
Each adjustment prompted further modifications, requiring us to simplify the flow continually to ensure we met the project deadline.
Due to a confidentiality agreement, I had to apply a blur to the image.
"Wireflow"
The "wireflow," as we called it, combined wireframes with User flows. Instead of employing simple boxes as we do on User flows, we incorporated the wireframes, providing stakeholders with a more immediate visualization of how the user would interact with the system before proceeding to the prototype.
This method proved invaluable during meetings, demonstrating the interplay between new features and the existing website's functionality
Due to a confidentiality agreement, I had to apply a blur to the image.
Becoming visual
Learnings
Working closely with the client, especially when their understanding of the design process was limited, presented significant challenges. It was difficult to explain the importance of the design process, as they were eager to see visual outputs immediately. Through this project, I learned to negotiate and effectively communicate the value of the design process to stakeholders with diverse backgrounds, fostering teamwork and alignment toward a common goal.
Wireframe
After the user flow was approved, we commenced designing the wireframe. The wireframe was created in prototype format, incorporating interactions between pages.
The major challenge was simplifying a vast amount of necessary information to ensure users did not get lost during their journey and completed their purchases.
Deliverable
After the wireframe was approved, we forwarded it to the UI team, of which I was also a member. However, due to concurrent projects I was handling at the time, I did not actively participate in this phase.
I monitored the entire design process of the high-fidelity prototype, ensuring consistency with our initial design concepts.