Product Design

Design Challenge Overview

Your company has built a mobile SDK that can be embedded into banks' mobile applications, enabling users to make payments by scanning a quick-response (QR) code shown on-screen on a merchant's point of sale (POS) system. The solution necessitates that there be limited customization of the product for any banks that integrate.

PayCode is looking to differentiate from more traditional players in the field and is passionate about innovative solutions, the power of data and insights, and wants to build a human-oriented fintech.

The primary goal is to:

1. educate prospects about the value and ubiquity of QR codes and
2. demonstrate how seamlessly QR payment technology fits into the payments world.

Specs & Deliverables:

• 1 Mockup of a webpage (screen size: 1920px wide) ready to hand off to a developer.
• File formats: AI/Sketch/Figma (pick one) and a PDF copy.
• Visuals: Create a logo and make any brand-related decisions you see fit based on the audience, such as color, fonts, and patterns.
• Create visuals, icons, screens, and any lifestyle photography as you see fit to better explain the content.

Target Audience

The target audience is large Financial Institutions, in particular, employees with job titles such as “Director of Emerging Payments” or “VP of Digital Innovation”. This infographic will be distributed as a standalone page on the company’s website and should be accessible for indexing and SEO performance as well as be visually and aesthetically engaging.

Competitive Research

Being naive to the Fintech world I knew that I was going to have to do a deep dive into the space to get a better idea of design trends. I looked at companies specifically using QR code technology for payments and more broadly at top Fintech companies throughout North America. Companies I researched include Plooto, Koho, Plaid, Moneylion, Robinhood, Chime, Nubank, and Stripe. I paid special attention to page structure, branding elements, technology visuals, and general look and feel.

Key Takeaways 💡:

• Clean modern designs with heavy use of gradients and drop shadows
• App visuals show UI mockups outside of the device structure
• Heavy use of 3D illustrated elements
• Only two companies focused on showcasing a diverse range of users

Sketching & Wireframes

In order to understand how I could format the webpage structure, I needed to sketch out the wireframes. Using the content provided and my design inspiration I focused on separating the content into sections with corresponding space for illustrations and visuals. I came up with two solid layout options. It was important to keep in mind the page length, user flow, and also design lift, and time limitations. I decided on an amalgamation of these two wireframes for my final mockup.

Design Rationale

Visuals

Visuals include app UI, background visuals, and icons. Overall I wanted the content to help drive my design decisions. During this process, the term “around the globe” was stated multiple times within the content so I decided to play on that. I mocked up spherical planetary clusters using SplineTool and arranged them with arrows indicating direction eluding to the scope at which QR codes are being used around the world (and beyond). I then used these spheres throughout the page to bring all sections together. Because Paycode is looking to have a more friendly and approachable feel, I used images of a diverse range of users actually adopting the technology in their day-to-day lives. The UI visuals were created by looking up similar apps and recreating designs in Figma. I wanted these to look a bit otherworldly so I laid the UI on Skueomorphic mobile devices.

Logo

As stated in the project overview I wanted the logo to feel modern and to elude to the barcode as a key component of Paycode’s tech. After sketching and playing around I landed on a logomark that shows two shapes colliding signifying the transformation of data as it’s being collected. I paired this with a wide-set sans serif font (Prompt Semibold) in lower-case to evoke a more friendly, balanced, and approachable feel.

Fonts and Colours

In order to appeal to Fintech leadership, I wanted the fonts and colors to be deep, contrasting, and complimentary. I chose a deep navy contrasted by two primary spot colors purple - indigo and fiery orange to evoke excitement. Inter was used as the primary font throughout - Inter regular for Body Copy and Inter Bold for headings. All design system elements were created and organized in Figma for the developer.

Final Design