Leading the redesign of a legacy B2B2C platform that manages corporate cards and expenses.
My role
Senior UX/UI Designer
Teammates
Our overall team consists of over 40 people across three scrum teams spanning three timezones 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
The Product
I undertook the challenge of redesigning a consumer-facing legacy finance SaaS platform that reaches over 100,000 end users. The solution's most basic functions allow users to manage corporate credit cards, request new cards, and view expenses.
My Contributions
I have used Figma to design over 50 screens to date and regularly demo them to clients. This directly resulted in my department winning a $20 million dollar contract with one of Canada's largest banks while convincing current clients, totalling more than $5 million, to not leave our platform.
Step 1
I conducted new user research in the form of surveys, user interviews, and client roundtables in order to begin building a thorough understanding of our users and their needs since we had no preexisting user data to use. This resulted in:
Ten personas which I used to drive the project forward. Two examples are below.
A detailed understanding of our user's pain points which served as the foundations of almost all design decisions.
Yeah, the product was pretty awful in its original state.
Mark Jacobs
Corporate Cardholder
Mark is a traveling salesman that uses our application to keep track of his corporate expenses and cards.
Demographics
Male.
Aged 40.
Works as a traveling salesman for a large appliance store.
Usage Habits
Uses our product infrequently, usually at the end of a business trip when he needs to submit expense reports for approval.
Uses our application only when he has to. Wants to get in and out as quickly as possible.
Uses mobile for quick actions, desktop for complex ones.
Usage Reasons
Submit transactions & expense reports for approval.
View available credit on his card(s).
View urgent alerts and updates.
Request additional credit or a new card.
Pain points
"I hate how long it takes to do something so simple! I want to get in, file my expenses, and get out as quickly as possible."
"My card isn't working and I can't pay for my client's dinner! This is so embarassing!"
"Why does support never pick up when I call? And what does this error message me?? I'm so frustrated!"
My Vision for Mark
Allow Mark to complete his tasks up to five times faster than he currently does.
Achieve this goal by simplying the experience as much as possible.
Advocate for the development of new, competitive features that would vastly speed up Mark's experience while keeping us up to date with current industry standards.
Provide guidance to ensure that Mark is never lost.
Sheryll Landrey
Program Administrator
Sheryll is the administrator that approves Mark's expenses. She also oversees all of the spend within her company.
Demographics
Female.
Aged 45.
Works in the Procurement Department at a large appliance store.
Usage Habits
Uses our product on her desktop computer for roughly 4 - 8 hours a day.
Wants to use our mobile solution for urgent requests however it is currently incapable of meeting her needs due to an absence of critical features.
Usage Reasons
Approve, or decline, submitted expense reports from Cardholders such as Mark.
Grant, or remove, user access to the solution.
Utilize data in order to track company spend over periods of time.
Pain points
"Why do I have to keep going between a UI that looks like it was made in 2000, and one that was made in 2010, just to do basic tasks? It's so jarring, annoying, and difficult."
"I don't want to have to keep picking up Mark's phone calls at 8pm just because he got in trouble again. It's disrupting my work life balance!"
"It's such a headache having to find the buttons that I'm looking for. Why are they hidden within window panes and tiny icons?"
"Management needs to see quarterly updates on our company'y spend but gathering the right data, and then exporting it in the right format, takes hours!"
My Vision for Sheryll
Consolidate the experience into a singular UI.
Overhaul the experience with an emphasis upon intuitivity and simplicity.
Advocate for the development of new, competitive features that could make Sheryll's experience much smoother, faster, and less stressful.
Rework how data is categorized, filtered, and displayed. Ensure that all common export file types are supported.
My goal for both personas was to reduce task completion time by 80%. Achieving this goal would motivate our clients to stay with our platform.
Step 2
The user research data that I gathered served as the foundation for a series of discussions that I held with our Product team consisting of a Product Manager and three SMEs. I have been collaborating with them since day one by joining their daily standup calls and facilitating design brainstorming sessions. They had never worked with a UX Designer before so it was an opportunity for me to educate them on design best practices and learn the following:
An in-depth understanding of all of the technical nuances of the application.
The Product Manager's vision for how the redesign of the application could help clients.
I encouraged Product to focus on ideas that would streamlines tasks to achieve our goal of reducing task completion time by 80%.
Asking unbiased, non-leading questions is critical.
Step 3
I used the aforementioned collaboration with Product to begin building out a thorough Information Architecture in order to document all requirements. This was crucial for a project of our scale and served the following benefits:
It's our project's singular Source of Truth for keeping track of all requirements.
It was very easy to make update and organize as requirements kept changing.
It made starting designs much easier since I had clear guidelines to work off of.
It depicted a clear scope that Tech and Project Management could use to estimate the amount of hours that our project would consume.
Always outline projects before designing!
Step 4
By this point I knew who my users were, what their pain points were, and what Product's vision for the rewrite was. On top of this, I had a clear outline of what my wireframes needed to consist of. This prep work allowed me to make almost all of the wireframes needed for our mobile application in just a few months. I shared my progress with Product every other day to consistently source their feedback and ensure that collaboration never ceased.
Two examples of how I used my personas in order to begin making wireframes are below.
Usability tests confirmed that users were able to complete tasks at least 80% faster with these designs.
Step 5
I was ready to begin showing my wireframes to clients once all of the requirements were satisfied. Thus I proactively took them to Product, clients, and end users to conduct 20 more usability studies to get the following feedback
Users were not a fan of the aesthetic.
Step 6
It became clear that clients were not a fan of the aesthetic of the previous design. I took to the Internet and used inspiration from many different sources to overhaul the look and feel. After some time I eventually became confident that I had nailed that "modern corporate" aesthetic that my clients wanted from the redesign. I took my designs back to them, and to our end users, for yet another round of feedback.
Endlessly seeking feedback is the best way to improve.
Finalized designs after an extra round of usability studies.
I amazed one of Canada's largest banks in a sales call with these designs and secured our department a contract worth $20 million.
Step 7
One of the greatest challenges I face at Fiserv is that no one on my team has any prior experience working with a UX Designer. Thus it is imperative for me to actively involve myself in sprint planning sessions, requirements gathering calls, daily standups, and leadership "Three Amigos" calls to ensure that all team members are informed on what UX Design is and how it is integrated into the agile process.
I also took it upon myself to teach a recent college graduate on our team UX Design in order to double the rate at which we could make designs. Additionally, I lead a two-day long design workshop with our entire team in order to educate others on UX design best practices.
I collaborate with many disciplines on a daily basis.
Summary
I lead the complete redesign of a legacy enterprise application by using our users as my foundation. This began with conducting user research, understanding the vision of the product, outlining it in text, wireframing, then iteratively improving. I enabled our department to secure over $20 million dollars in revenue, and have helped prevent more than $5 million dollars worth of contracts from leaving our project, with my designs. Additionally, I streamlined my department's practices by integrating design into workflows thus saving teammates over 10 hours of extra work a week.
Some key takeaways from my work at Fiserv include:
Learning how to lead in an environment of ambiguity. I have the real world experience that it takes to rework products, or start them, from scratch.
Using user research as a tool that guides long-term success.
Becoming a master at Figma that can rapidly build pixel-perfect designs.
Establishng myself as a “Design Evangelist” that educates teammates on Design practices in order to integrate design into more archaic workflows.
Work in an agile fashion in a large corporate structure.
Tutor junior designers and lead design sessions.
Navigate complex corporate environments.
You can reach me at cemallatifozgur@gmail.com with any inquiries :)