FlexPay product work

Designed a full flow for a set of "administrator" screens, leveraging the SAP design system. Worked on an onboarding sequence for our mobile experience.


UX/UI Design

FlexPay Onboarding

- Problem

Building a new product required a well-thought out onboarding experience. After multiple user tests, we learned that certain parts of our flow were confusing and led to a negative user experience and low adoption rate. This informed our decision to create an onboarding experience that helped guide our users through key elements of FlexPay during their first usage of the app.

Original flow without onboarding

- Inspiration

To get started, I looked at various applications in the financial space and examined how their approach to onboarding. I looked specifically at personal finance applications because the industry has a very unique set of use cases and users. When someone downloads a finance application, there is a level of trust that is inherently required and many subconscious biases that they enter with. Through our onboarding experience, my goal was to create a sense of security and privacy for our users.

Creative inspiration from competitors in the same space

- Style and content updates

It was clear that we needed some introductory "Welcome" screens prior to logging in or creating an account. The goal of these screens was to introduce FlexPay and help provide more context for the user.

FlexPay Welcome screens

- active onboarding

As I did research on the various types of onboarding for mobile applications, I began thinking about passive vs. active onboarding for FlexPay. I defined passive onboarding as just simply showing helped text within 2 to 3 introductory screens after a user creates an account. Active onboarding however, takes the user directly into the system and calls out various elements on different screens and has them perform basic, common tasks on the app to help them get familiarized. I began some early iterations for active onboarding for FlexPay.

FlexPay active onboarding

- Ideation

I wanted to play around with different visual elements to help capture and maintain our users' attention during onboarding. I went through multiple rounds of iterations and user testing to determine which design was the most concise and helpful. I also worked with the UX copy to make sure that each individual sentence made sense and had a clear connection to the value proposition of FlexPay.

Early stage iterations and design directions

Our onboarding flow was finalized as seen below.

Some of the final design choices

FlexPay Admin Screens

- Problem

As we built out our product roadmap and spoke to potential customers, we found the need for there to be a system administrator. I began building out screens to support this need. The first thing I did was create user stories for our persona to get a better understanding of their end goals, limitations, and priorities when engaging with our screens.

Admin user stories

- Fiori design system

When I joined the team, we already had a couple basic first drafts of screens built out for the admin persona. However, they were designed in our custom FlexPay design system. In preparation for our general release, we needed to revert these screens to our internal SAP design system, Fiori. I spent some time going through each of these screens and mapping them to our user stories while also rebuilding them from the ground up using our SAP approved design system.

Example of rebuilding the Transfers screens

- Finalized design

Given the fact that we were pushing to launch our product soon, these screens went through a few quick iterations and rounds of user testing before being determined ready for development. Our finalized design included user management screens, reporting capabilities, and screens to manage transfers and errors.

Admin Dashboard after Fiori-ization

See more...

Product Work
Designed an entire set of screens for an "administrator" persona, leveraging the SAP design system. Worked on an onboarding sequence for our mobile experience.
View
Website Redesign
Redesigned the FlexPay external facing website to update the look and feel and adapt more SAP brand assets.
View
Branding Efforts
Created a flyer to address FlexPay's response to Covid, worked on a one-pager for FlexPay's launch plan to be shared with stakeholders, and iterated on designs for an email campaign.
View