Fiserv

Fiserv

Leading the redesign of a legacy B2B2C platform that manages corporate cards and expenses.

My role

Lead UX/UI Designer

Teammates roles

Our team consists of over 40 people across 3 scrum teams within the following roles.

  • Junior UX Designer

  • Technology Manager

  • Delivery Manager

  • Frontend Developers

  • Backend Developers

  • Database Maintenance

  • Product Manager

  • Product Owners

  • Scrum Masters

  • Agile Coach

  • QA Testers

  • SME's

Programs used

Figma

Jira

Confluence

Project Summary

Project Summary

The Product

Our team undertook the challenge of rebuilding, redesigning, and rewriting a massive, 20+ year old consumer-facing legacy platform from scratch. The solution manages corporate credit cards and allows users to keep track of their expenses.

My Contributions

I’m responsible for establishing UX Design in a team that had no prior exposure to UX. Additionally, I design roughly 90% of our wireframes, mentor our junior designer, build our design system and provide up-to-date documentation, detail out Information Architecture, explain designs to developers and testers, and deliver in an Agile fashion.

I'm responsible for leading the redesign of a legacy B2B2C enterprise web and mobile application.

Research and personas

Research and personas

Rewriting our application from scratch required us to revisit all of our user data. The following preliminary research was utilized to guide the rewrite;

  • Usability studies on previous high fidelity designs that were done by a 3rd-party design agency.

  • Data gathered from client interviews and a feedback “roundtable”.

  • Establish Information Architecture as a result of thorough conversations with SME’s and Product in order to thoroughly outline requirements.

Our product has over 5 personas. We built these personas out in great detail so that we had a thorough understanding of our users. Below are summaries of two of these personas.

Extensive usability studies were conducted in order to verify that new designs exceeded user expectations.

Persona #1

Persona #1

Mark Jacobs

Corporate Cardholder

Mark has a corporate credit card issued to him by the company that he works for. He uses the application to keep track of how much money he has spent, file expense reports, and open new cards.

Habits
  • Uses the product in an infrequent, need-based manner.

  • Uses mobile for quick actions, desktop for complex ones.

Pain points
  • Current version of the app is very frustrating to use and wastes his time.

  • Hates filing expense reports and making cardholder requests.

  • Struggles to get a hold of support when he needs help.

Goals
  • Submit transactions & expense reports for approval.

  • View available credit on card.

  • View urgent alerts and updates.

Our goal with the rewrite for Mark was to provide a seamless experience that allows him to get in and out of the application.

Persona #2

Persona #2

Sheryll Landrey

Program Administrator

Sheryll is responsible for managing her company’s spend, approving requests from cardholders, and managing all of the users in her program.

Habits
  • Uses the product on her desktop computer for roughly 4 - 8 hours a day as a core part of her job.

  • Uses its mobile solution for urgent requests.

Pain points
  • Has to navigate between two UI’s in order to use the application properly.

  • Current mobile experience is extremely difficult to use. Cannot easily do tasks while on the go.

  • Managing users and their cards is needlessly convoluted and cumbersome.

  • Cannot easily view, and export, large data sets.

Goals
  • Approve requests submitted by cardholders.

  • Grant or restrict cardholder access to the platform.

  • Manage and stay on top of company spend.

  • Notify cardholders en masse of important updates.

Our goal with the rewrite for Sheryll was to modernize mundane, cumbersome, and time-consuming tasks.

How we used our personas

How we used our personas

Mark Jacobs

Corporate Cardholder

We improved our "Transactions" module by

implementing the ability for Cardholders to take pictures of their receipts

because

attaching a receipt to a transaction is a top priority for cardholders and is currently very cumbersome.

We improved our "Users & Cards" module by

enabling Cardholders to request credit increases inside the application

because

cardholders previously would have to externally call or email their Program Administrators to get make the request.

We improved our "Expense Reports" module by

making it possible for Cardholders to easily attach multiple transactions to an expense report before they submit one

because

cardholders currently have to add each transaction one at a time to an expense report. This gets really difficult when an expense report has a large amount of transactions.

Sheryll Landrey

Program Administrator

We improved our "Transactions" module by

making it easier for Program Administrators to see a transaction’s attached images and cost coding

because

these finer details were getting lost in the UI and are often very important.

We improved our "Users & Cards" module by

allowing Program Administrators to see a history of actions made to a card

because

Administrators had a very difficult time seeing who made changes to a card and when.

We improved our "Expense Reports" module by

making it easier to view summaries of all of the transactions within an expense report

because

Administrators did not previously have an easy way to view summaries of spend at a glance.

Personas are more than just a buzzword. They serve as the compass for exceptionally usable and intuitive designs.

High fidelity designs

High fidelity designs

We used all of the aforementioned research and persona datsa to make the following designs.

We used all of the aforementioned research and persona data to make the following designs.

Summary

Summary

The past year and a half at Fiserv has been extremely educational for me. I learned how to;

  • Revamp convoluted and massive enterprise products from the ground up.

  • Become a master at Figma and build designs, and design systems, that can scale.

  • Be a “Design Evangelist” that advocates for design in settings that don’t fully understand UX Design.

  • Work in an agile fashion in a large corporate structure.

  • Tutor junior designers and lead design sessions.

  • Navigate complex corporate environments.

Let’s get in touch!

You can reach me at cemallatifozgur@gmail.com with any inquiries :)