JBX > Payola > Product Design

Payola - Product Design

Payola - Eletronic Payment Services Case Study
Figma, Mural, Adobe CC, User Zoom

Product Design • Cobranding • Theme • Accessibility • Responsive

Payola prototype is based on projects designed for FIS. For promotional use only.

Product Design

Product design is the process designers use to blend user needs with business goals to help brands make consistently successful products. Product designers work to optimize the user experience in the solutions they make for their users—and help their brands by making products sustainable for longer-term business needs. (Source: Interaction Design Foundation)

Our team was tasked with designing several Payola products from conception to market, including a digital wallet, cross border payments and a consumer website.

Consumer Website

A good website is one that drives web traffic and creates a positive experience for the users by giving visitors the information they came to the site to see. We made sure that the branding encapsulates everything about Payola. Tone of voice in the copy, customer interaction, and even the layout of the site is consistent with how we wanted Payola to be perceived. We wanted a site that instantly told comsumers everything about Payola’s story, values, and what sets them apart from competitors. (Source: Fit Small Business)

Business to Business Payments

Business-to-business payments or B2B payments is the transfer of value denominated in currency from buyer to supplier for good or services supplied. B2B payments can be a one time or recurring transaction depending on the contractual agreement made between the buyer and supplier. Payola’s B2B app focused on domestic and international payments. (Source: Stampli.com)

Since B2B payments often involve large payment amounts across different countries, our research indicated that emphasizing security would a priority for Payola to alleviate clients concerns of fraud and theft.

Payola Checkout (Digital Wallet)

A digital wallet is a secure money management app or online platform that allows you to make purchases with retailers on-site, transfer or send money and track rewards programs. You can link the digital wallet to your bank account or pay as you go with a prepay option. (Source: Summit Credit Union)

With more customers ditching their real wallets for a digital one Payola needed their own payment app to give users a reliable resource for online retail shopping. Payola Checkout was created as an alternative to digital services such as PayPal and Shopify. Since Payola Checkout was a new app in a crowded digital wallet market, UX research determined that marketing needed to emphasis online security in order to gain customer trust.

Cobranding

Cobranding is a marketing strategy that utilizes multiple brand names on a good or service as part of a strategic alliance. Also known as a brand partnership, cobranding encompasses several different types of branding collaborations, typically involving the brands of at least two companies. Each brand in such a strategic alliance contributes its own identity to create a melded brand with the help of unique logos, brand identifiers, and color schemes. (Source: Investopedia)

Dark / Light Theme

Light Mode is a feature where black text on white background is used for user interaction. Light mode isn’t just restricted to black on white, it also generally refers darker elements layered onto lighter backgrounds. These lighter or darker elements can both be in color, as long as the overall feel is light and open. (Source: Lithios Apps)

Dark Mode is a feature where lighter elements are displayed on a darker background. These lighter elements can be white, but can also be anything that is generally on the lighter end of the spectrum and contrasts with darker backgrounds. (Source: Lithios Apps)

Giving users light and dark theme options were integral in creating a user experience that catered to the customer’s individual viewing preference. Our UX team collaborated with developers to create a design system with brand colours that passed accessibility standards whether on a light or dark background. Planning out this experience in this manner allowed for customization that was easy to code and scale up without adding unnecessary development time to the project.

Accessibility

Accessible design is a design process in which the needs of people with disabilities are specifically considered. Accessibility sometimes refers to the characteristic that products, services, and facilities can be independently used by people with a variety of disabilities. Accessibility as a design concern has a long history, but public awareness about accessibility increased with the passage of legislation such as the Americans with Disabilities Act (ADA), which mandated that public facilities and services be fully accessible to people with disabilities. (Source: Washington EDU / DO•IT)

Responsive

Responsive design is a graphic user interface (GUI) design approach used to create content that adjusts smoothly to various screen sizes. Designers size elements in relative units (%) and apply media queries, so their designs can automatically adapt to the browser space to ensure content consistency across devices. (Source: Interaction Design Foundation)

From the outset our UX team wanted all of Payola products to be adaptive to whatever device it is being viewed on. Every element was designed seamlessly on a grid to fit desktop, tablet and mobile views of various sizes, orientation and platforms.