RYVYL

RYVYL is a blockchain-based payment solutions company based in San Diego. They are a fully-integrated, secure, Blockchain-based system that includes compliance, financial audit prep, expense tracking, tax payments, register-specific features, and data fidelity controls.

Details
Role: UI/UX Designer
Duration: August 2023 – May 2024
Tools: Figma

Due to confidentiality reasons, I'm unable to showcase most of my work from my time at RYVYL. However, I played a pivotal role as a UI/UX Designer, spearheading the design for several internal products. My focus primarily involved redesigning and developing products that haven’t been released yet. While this is not everything that I worked on, here are some key highlights of my contributions during my time there.

  • Designed and created prototype concepts to continue showcasing our technology to the Territorial Bank of American Samoa (TBAS), the only remaining bank in the country.

    • The partnership with the Territorial Bank of American Samoa aims to launch a fully customized financial solution to support the entire island of American Samoa.

  • Product owner of RYVYL Block— Led the design and development of the product, from wireframes to high-fidelity designs, and prepared assets for development.

  • NanoKard eCommerce checkout flow for web and mobile as well as a checkout flow for an mPOS app (iOS)— designed wireframes, high-fidelity designs, and prototypes. (See the process below)

  • Developed and presented homepage website concepts for RYVYL Block in addition to conducting competitor research.

  • Migrated hi-fidelity designs from Adobe XD to Figma while also refining the user experience and visual presentation on the designs.

  • Created and designed email templates for our internal products.

  • Collaborated with a UX Writer to strategize and implement a user-centric flow for a new feature announcement. (See the process below)

  • Password protected projects here

NanoKard eCommerce Checkout Feature

One of the projects I worked on was designing the eCommerce checkout flow for NanoKard. NanoKard uses blockchain technology to provide a secure and efficient checkout system for both online and in-store transactions. Its goal is to offer a platform where businesses can build trust with their customers while also protecting themselves from fraudulent chargebacks and transactions.

As the UI/UX Designer leading this project, I was tasked with designing the eCommerce checkout flow for both web and mobile platforms, in addition to an mPOS (mobile Point of Sale) checkout flow. I created wireframes, high-fidelity designs, and prototypes for all the user experiences. During my research, I discovered a significant statistic: the global average cart abandonment rate over the past 14 years is 70.19%. There are many reasons why users abandon their carts—companies may require users to create an account before purchasing, or shipping costs may be too high. While several factors contribute to cart abandonment, I prioritized the data and developed a design that addressed these concerns while also aligning with our business goals.

My focus was on creating a simple and clean checkout experience, incorporating thoughtful micro-interactions such as validating users' credit card information when entered correctly and indicating which step of the process the user was on.

The goal was clear—reduce the cart abandonment rate and ensure users complete their purchases.

How it works (web & mobile eCommerce)

Integrate NanoKard into your eCommerce checkout

Your customers will then choose to pay with NanoKard at checkout

They’ll finish their payment & place their order on NanoKard

How it works (mPOS eCommerce)

Store employees will generate a QR code at checkout with the app

Customers will scan the QR code with their NanoKard App

Store employees and customers will get a payment confirmation

QuickCard New Feature

One of the projects I worked on was the QuickCard new feature announcement. QuickCard provides a blockchain-secure checkout experience with an effective batch settlement solution for businesses. QuickCard has released a new feature in partnership with NanoKard to process in-store contactless payments using the NanoKard mPOS app. Businesses can use the NanoKard app to generate a new QR code for transactions with their customers. The QuickCard platform allows users to track their sales and manage their business efficiently. I collaborated with our UX Writer, Jessica, to devise ways to effectively announce this new feature to our users. While Jessica and I both collaborated on the user flow, I primarily focused on the formatting of each banner along with the banner images. Jessica concentrated on the content of each banner.

Results

There were three new features that we needed to introduce in this announcement. Initially, Jessica and I considered creating just one banner because we felt that having three separate banners would be overwhelming for the user. However, after designing both experiences, we realized that having three banners wouldn’t be as overwhelming as we initially thought. We just needed to be careful with how the content was presented and how much information was given to the user.

Here are the three features we announced:

  1. A general announcement of the new feature we were releasing: contactless payments with the NanoKard mPOS app.

  2. The ability for businesses to add mPOS terminals to their account and use them through the mPOS app.

  3. The option for businesses to give access to employees and managers, allowing them to easily make sales through the app.

In our flow, we considered how the user would navigate through the website. The first banner features a “Show me how” button that leads to the Terminal Locations page. Once on the Terminal Locations page, the user will see the second new feature banner and be able to read more about the feature and quickly add a new terminal after reviewing the instructions.

The “Add Terminal” and “mPOS Clerks” pages work together, so it is pretty intuitive that the user would proceed to the “mPOS Clerks” page afterward. We incorporated the third banner on the “mPOS Clerks” page, applying the same reasoning as on the previous page. Our goal was to allow users to easily add employees to the page right after reading the instructions.