UX Design / UI Design / Design System

MBA Portal Design

MBA Portal Design

Due to the nature of this work, designs are not shown below.

FCTI operates a network of multi-bank ATMs (MBAs) that provide cardholders of small banks and credit unions access to their accounts. On these ATMs, partners also have the option to run campaigns or display advertisements. Creating these campaigns, however, was a manual and time-consuming process. Seeking a way to automate the campaign creation process, they hired me as their first UX/UI Designer to design the end-to-end user experience of the MBA Portal.

Process

  • Requirements gathering
  • Information architecture
  • Sketches
  • Wireframes
  • Prototypes
  • Design system

Requirements gathering

After interviewing stakeholders and internal team members, the objective of the portal boiled down to two tasks: 1) Provide users a self-serve platform to submit their campaigns and 2) Allow FCTI to review campaign submissions. The portal was to be simple and straightforward enough for their wide range of users.

Requirements Gathering

A picture worth too many words

User research and internal interviews revealed graphics to be the biggest pain point for both personas. To address this, I designed several reminders in the Content step of the multi-page campaign creation flow. Placeholders are thumbnail versions of the actual graphic size and orientation, providing a visual cue to partners. Size dimensions are explicitly written beneath each label. As an extra layer of prevention, I suggested the system reject graphics that don’t meet the dimension requirements and trigger an error message to users if unqualified graphics are still uploaded.

Wireframe Examples

Scalable design

As part of the project, I supplied a style guide for this new product. Using the marketing website as a base, I extended beyond its colors and components to develop a scalable style guide for the MBA Portal.

Scalable Design System

Result

After several sessions of usability tests and design iterations later, I delivered high-fidelity mockups of the MBA Portal. FCTI regains the hours previously lost to submitting campaigns on behalf of partners. In addition, users are given more control over the campaign creation process and have more insight on when their campaigns will be reviewed and published. The result is increased operational efficiency, higher ratio of correct graphics being submitted, and more satisfied partners.

Portal Design Result

Shopping Basket