FlexPay product work

Project 1: Worked on an onboarding sequence for our mobile experience.

Project 2: Designed a full flow for a set of "administrator" screens, leveraging the SAP design system.

UX/UI Design

1. 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.

Below you can see what the screens looked like prior to implementing an onboarding flow. A new user would simply be dropped directly into the application with no understanding of key product features or navigation. This led to poor engagement rates and confusion across users we tested with.

Original flow without onboarding

- Inspiration -

As a team, we identified a need to build out a comprehensive onboarding flow to aid new users. 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. Below are some initial screens that I created as a temporary onboarding flow while I built out the full experience. 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.

Below is an example of one flow I mocked up for active onboarding.

FlexPay active onboarding

After testing this flow out with users and speaking to our dev team, we decided to move forward with passive onboarding for our initial product release and include active onboarding in a future release. To improve on the current Welcome screens, I decided to integrate actual screenshots from various parts of our product to help the user create a mental model of FlexPay during their first few times using the app.

- passive 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

These flows went through a few rounds of user testing and iterations, as seen above. We were able to narrow down our top choices and A/B test this with users. We found that certain designs were too distracting or didn't explain the app's purpose clearly enough. After iterating on the copy and visuals, our onboarding flow was finalized as seen below, in both light and dark mode.

Some of the final design choices

The onboarding flow was one of the two main UX flows I worked on during my time with FlexPay. Through this project, I learned how large of a role onboarding plays in financial applications. It was our responsibility as designers to ensure that we built a sense of trust with our users and helped them feel comfortable providing sensitive financial information. It was also valuable for our product because it gave users a clear walkthrough of potential features in an informative, but not overbearing way.

The next project I worked on was redesigning our admin screens using an SAP-approved design system.

2. 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

Reflecting on this overall design exercise, I learned how to work successfully within a large corporate design system and navigate grid structures, layouts, and components. This was extremely valuable information that followed me into future rotations as well.

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.
Website Redesign
Redesigned the FlexPay external facing website to update the look and feel and adapt more SAP brand assets.
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.