Kaval professional frontend UX/ UI Engineers

Problems at a Glance

Secure Checkout has revolutionized merchant integration by offering greater transparency, security, and decentralization. It allows integrators to seamlessly incorporate it into their web applications, facilitating access to and use of the product.

Objectives

The primary goal of this project is to design, develop, and integrate the Secure Checkout. It aims to address the challenges mentioned by delivering a comprehensive solution that empowers integrators to build more powerful, WCAG support and responsive web applications while effectively using our products.

Scope

1. Feature Design: Define the specifications and user interface for Secure Checkout, ensuring it integrates seamlessly with existing merchant functionalities.

2. Development: Construct the necessary infrastructure and software components to support efficient historical data retrieval and real-time synchronization with various integrators.

3. Testing: Conduct thorough testing of Secure Checkout to ensure data accuracy, reliability, and scalability.

4. Integration: Integrate Secure Checkout into the Astra product, guaranteeing a smooth user experience.

5. Documentation and Training: Provide detailed documentation and training materials to support developers in effectively utilizing Secure Checkout.

Business Challenges

Exploring New Frontiers: Without an established roadmap, the business had to forge its own path, frequently venturing into uncharted territory.
Establishing Industry Norms: As pioneers, there was a duty to define standards and best practices in a field where few existed.
Payment Gateway Security: Add secure checkout integrates with reliable payment gateways that comply with industry security standards.
Authentication and Verification: Secure checkout systems may include measures for user authentication, such as requiring a password or two-factor authentication (2FA) to verify the user's identity.

For me as a UX/ UI Engineer

Comprehending Real-world Implications: It was essential not only to understand the theoretical concepts but also to recognize their practical applications, particularly for developers.
Innovative Thinking Under Pressure: After acquiring the knowledge, the focus shifted to generating solutions to ensure a smooth experience for developers.

Primary Persona

Milestone requirements

Users should be able to access the profile with login to the account based on the JWT.
User can update and delete the primary or secondary card from his profile.
User should be navigate to profile as soon as login or cookies available.
User can create a new profile, delete or update the existing profile.
Guest checkout option for users who prefer not to register or create an account on the web application.

Usability Testing

Given the project timeline, I conducted usability testing. The aim was to validate concepts and identify potential issues. I held 45-minute sessions with employees from various departments, utilizing interactive prototypes. Based on the feedback gathered during these sessions and subsequent design reviews and updated the designs accordingly.

One full-stack developer specialized in building online shopping apps (dApps).
A platform engineer dedicated to integrating websites, with a primary focus on wallets and transactions.
A stakeholder that understand the product and its features.
A data builder specialized in data architecture and optimization, focusing on designing efficient data systems.
An app developer with expertise in creating applications across multiple platforms, including Android, iOS, desktop, and web.

WCAG Checks:

Ensure the product remains web content accessibility guidelines (WCAG) standards.

A/B Testing:

Includes conduct experiments to test different design variations and understand which works best for users.

Based on user feedback and analytics, make iterative improvements to the design to enhance usability and overall experience.

Development

I used HTML and SCSS to create web pages and reusable components. I created interactive prototypes for the screens to help the development teams better understand the app's interactions. Having the user journeys clearly mapped out provided a strong foundation for wireframing the app. Each prototype was crafted to reveal which features were most appealing and to determine the most intuitive information hierarchy. Incorporated the design into UI framwork (Vue.js, Angular, React, and StencilJS) UX design process

Launch and Support:

Offer ongoing support to address user questions and issues.
Communicate changes and updates clearly to users, so they are aware of improvements and new features.
Provide updated documentation and guides to help users navigate any new features or changes.
Introduce new features or design updates to keep the product fresh and relevant.
Ensure your team is trained on new features and updates so they can effectively support users.

Secure checkout