Designed a full flow for a set of "administrator" screens, leveraging the SAP design system. Worked on an onboarding sequence for our mobile experience.
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.
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.
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.
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.
Our onboarding flow was finalized as seen below.
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.
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.
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.