Heather Moore

PCI Pilot

Web app design for complex credit card compliance reporting.

UX/UI

Web Design

Overview

Control Gap wanted to create a simplified process for filing PCI compliance reports with the added benefit of merchant to acquirer communication.

Problem

Compliance reporting is a complicated and frustrating time for many small businesses, so a friendly and welcoming, yet professional, trustworthy, and secure design was important. Merchant banks were a potential customer, which meant the web app also needed to adhere to WCAG 2.0 AA standards.

Outcome

A WCAG 2.0 AA+ accessible web app that simplified the process of filing PCI compliance reports, making it more intuitive and less intimidating.

Info

Role

UX/UI Designer

Activities

Workshops, Information Architecture, Wireframes, Art Direction, Visual Design

Tools

Axure, Sketch

Deliverables

Marketing Website

Status

Shipped

Design Process

Before jumping into design, we ran several in-depth workshops with the client team to determine the users, scope, wants and needs, and desired creative direction of the web app. These workshops helped us wrap our heads around the complicated topic which we hadn’t had experience with and would prove to be essential to the success of the project.

Image: Workshop artifacts and process photos.

We organized the information architecture of the web app to help merchants complete the SAQ that was appropriate for them, and provide a way for acquirers to keep track of their clients progress.

Image: Collaborative sketches to map out the simplified flow for merchants.

Image: Information architecture diagram displaying the app organization for merchants.

We created a low-fidelity prototype using Axure to show interactions and flows. This helped the client team visualize how the product would function, and also ensured everything was accounted for before moving into visual design.

Image: Wireframes for introduction, questionnaire, wizard, and review pages.

I created two visual design concepts based on the client’s input from the previous workshops. The visual design was kept clean and simple to not distract from the complex task of compliance reporting. A successful visual design workshop and strategy meant not a single revision from the client was made to the visual design mockups.

Image: Creative concept exploration, and visual design mockups for review, help, edit account, and expert questionnaire pages.

Image: Visual design mockups for company information form, help, assessment intro, user dashboard, and admin dashboard pages. 

With one of the potential customers being merchant banks, the accessibility of the web app was extremely important. For the development and content team, this was a new topic and guidance was needed. Along with guidance throughout the design process, one of the final deliverables I included was a pattern library with accessibility tips to ensure the end product was as accessible as the design.

Image: Select style guide elements displaying accessibility tips.

Project Outcomes

The resulting web app was accessible above WCAG 2.0 AA, increasing the appeal of the product to merchant banks. The client team found value and passion for accessibility and made it top of mind on future projects.

Reflection

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

New Technology

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Quick

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Limited User Research

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Back to all work

Let's work together.

Contact me