CLIENT

PayFlex

PayFlex helps you make the right decisions for your health and financial well-being, by giving you control and flexibility to manage your money.

DISCIPLINE


Digital, Product

TEAM

Work Produced at
Deloitt Digital

UX Lead, Visual Design Lead, Engagement Manager, iOS Developer,
Android Developer, Technical Architect, QA

Agile Process

TEAM

Work Produced at Deloitt Digital

UX Lead, Visual Design Lead, Engagement Manager, iOS Developer, Android Developer, Technical Architect, QA

Agile Process

PCover@2x

THE CHALLENGE

To Make Financial Wellness Simple

To produce an app that allows you to manage all your HSA, FSA, COBRA accounts all in one spot. Parallel to this, the company had just launched their new website and was looking to upgrade their app. At that time the client had an out of the box solution which was not visually appealing and lacked much of the features the new site contained. The client wanted to cover capabilities in the app, which would help with onboarding, transactions and payments, goals and education, shopping and support.

P-Mock

MY ROLE

Collaboration

I was the visual lead on this project. I worked closely with the CX and UX teams to look at research and create initial lo-fidelity whiteboard wires. After discovery and user testing I created a robust UI design system that enables the product to scale.  Accessibility was also a major consideration when designing this particular product. As a designer it was my responsibility from a visual design standpoint that the app was ADA compliant including requirements such as color contrast, information hierarchy, size.

MY ROLE

Collaboration

I was the visual lead on this project. I worked closely with the CX and UX teams to look at research and create initial lo-fidelity whiteboard wires. After discovery and user testing I created a robust UI design system that enables the product to scale.  Accessibility was also a major consideration when designing this particular product. As a designer it was my responsibility from a visual design standpoint that the app was ADA compliant including requirements such as color contrast, information hierarchy, size.

Splash, Onboarding, Login

Members are guided through an efficient onboarding experience that helps them begin their journey with PayFlex as frictionless as possible. When first opening the app, members see a brief overview of key features, and can easily login.

Dashboard / Transactions

Navigation was very useful, however, participants in the initial user testing suggested they wanted a Home page where they could see all the account types. A To Do’s section keeping the user in track with their financial tasks

APPROACH

Insights and User Testing

The project came in two phases:

1. Visioning and prototyping
2. Designing and building out the product
 
During the first engagement, I worked closely with CX and UX exploring what the client currently had, looking at the landscape at what competitors were doing, what could be improved and what future state features could be implemented.

APPROACH

Insights and User Testing

The project came in two phases:

1. Visioning and prototyping
2. Designing and building out the product
 
During the first engagement, I worked closely with CX and UX exploring what the client currently had, looking at the landscape at what competitors were doing, what could be improved and what future state features could be implemented.

During the ideation workshop session with the client, a readout from the research discovered from the stakeholder and customer interviews provided a high level recap of opportunity areas and determining painpoints. By bucketing themes the team was able to see gaps in the member’s experience and thus start to create a customer journey. The workshop asked the client questions around features through the lens of different personas. Which were then prioritized, this ultimately informed the design of the initial prototype. From these insights we were able to create wireframes and working closely with UX to think out different design patterns suitable for different user flows and interactions. Key features were built out and mocked up on Invision which were user tested with a focus group to see what could be improved. From the initial desig feedback we were able to see what was working and what wasn’t.  Statement from participants such as “we would like to see all our account balances surfaced and not behind a carosel” or the fact that some call to actions were being missed. This lead to a second engagement of 8 sprints to produce the actual product. Being part of the process of workshopping user stories with the agile team, I was able to undertake what was needed to be designed.

During the ideation workshop session with the client, a readout from the research discovered from the stakeholder and customer interviews provided a high level recap of opportunity areas and determining painpoints. By bucketing themes uncovered the team was able to see gaps in the member’s experience and thus start to create a customer journey. The workshop asked the client questions around features through the lens of different personas. Which were then prioritized, this ultimately informed the design of the initial prototype.

From these insights we were able to create wireframes and working closely with UX to think out different design patterns suitable for different user flows and interactions. Key features were built out and mocked up on Invision which were user tested with a focus group to see what could be improved. From the initial design,  feedback what was working and what wasn’t.  Statement from participants such as “we would like to see all their account balances surfaced and now behind a carosel” or “Call to action were being missed”. This lead to a second engagement of 8 sprints to produce the actual product. Being part of the process of workshopping user stories with the agile team, I was able to undertake what was needed to be designed.

P-Workshop
P-Background
P-Capabilities2
P-Background5

Shopping

The app helps members save money and better understand how to use the funds in their accounts. Location-based notifications let the member know when they are near a location where they can use account funds. They can see a list of eligible items, scan barcodes to determine eligibility and get coupons for their purchases.

Education

Educating the user to set goals was a way of helping engage the user to continually come back and use the app.

SOLUTION

Create a Visual Engaging Design System

For any design project, determining the proper visual language is crucial. By looking at the existing brand guidelines, I was able to push the boundaries with the Product owner and make conscious changes that better advance user experience. Onboarding the user to the app became friendly and easily understood by the user, through the guided screens. The navigation was very useful for the user with a dashboard type homepage overview. From the initial user test filing a claim and verifying transaction flows were extremely complicated, so simplifying steps or adding tooltips to aid the user was implemented. The app was produced in both iOS and Android, so understanding both HIG and Material design was something that was of utmost importance.

 

SOLUTION

Create a Visual Engaging Design System

For any design project, determining the proper visual language is crucial. By looking at the existing brand guidelines, I was able to push the boundaries with the Product owner and make conscious changes that better advance user experience. Onboarding the user to the app became friendly and easily understood by the user, through the guided screens. The navigation was very useful for the user with a dashboard type homepage overview. From the initial user test filing a claim and verifying transaction flows were extremely complicated, so simplifying steps or adding tooltips to aid the user was implemented. The app was produced in both iOS and Android, so understanding both HIG and Material design was something that was of utmost importance.

 

P-Design-System

 

Accessibility

ADA compliant including requirements such as color contrast, information hierarchy and size.

 

Accessibility

ADA compliant including requirements such as color contrast, information hierarchy and size.

P-Access
P-Watches
P-Watches-Mock

Corpus.

Experience Designer | Art Director | UI UX

Email  cesar@cesarcorpus.com

Follow him on Instagram, Linkedin, Dribble

 


© 2018 – Cesar Corpus