Fiserv
Leading the 0 - 1 redesign of a complex B2B2C enterprise-grade finance platform.
My Role
Senior UX/UI Designer
Our Team
40+ people across 3 scrum teams including Tech Manager, Senior Designer, Junior Designer, Backend & Frontend Developers, Product Manager, Product Owners, SME’s, Security, QA, and Agile Coaches.
The problem
Our SME noticed that many students around the world, especially in rural and impoverished areas, cannot easily gain access to high quality tutors to learn the Qur’an. We sought to build a platform that connects these tutors to these students for free or at a very low cost.
The solution
A platform that allows business owners to publically raise money
Step 1
User Research
I integrated clients and end users directly into the rewrite from the getgo by conducting new user research in the form of surveys, user interviews, and client roundtables. I first gained a thorough understanding of our user's thoughts on our product from a top-down level in order to understand the broad sentiments surrounding our product.
Understanding our users
I simultaneously conducted user interviews, usability studies, and gathered quantitative data to make the following personas and user journeys that guided our discussions.
Step 2
Collaborating with Product
I joined our Product team’s daily calls to gradually begin learning about the application and their vision for the product. These meetings allowed us to move the bar inch-by-inch every day. Product had never worked with a UX Designer before so these meetings also served as an opportunity for me to educate them on design best practices.
Building Information Architecture
I maintained Information Architecture to serve as the single source of truth for all requirements-gathering discussions. This allowed us to be on the same page for our vision and served as the springboard for future designs.
Step 3
Wireframing in Figma
By this point I knew who my users were, what their pain points were, and what Product's vision for the rewrite was. I also had a clear outline of what my wireframes needed to consist of. I thus began wireframing and shared my progress with Product in our daily calls to consistently source their feedback and ensure that collaboration never ceased.
Building our Design System
Technical constraints required that I built a design system from scratch via Brad Frost's Atomic Design methodology to ensure that our designs were scalable as our project expanded. My system leverages Figma's most powerful features including components & variants, auto layout, color and text styles, variables, conditional logic, and interactive prototyping.
Designing for our users
Two examples of how I used our personas to make features are below.
High Fidelity Mobile Designs
High Fidelity Desktop Designs
Step 4
Conducting Usability Testing
I was ready to begin showing my wireframes to clients once most core 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.
Step 5
Delivering in Agile
I collaborated heavily with our 40+ team members via sprint planning sessions, requirements gathering calls, daily standups, and leadership "Three Amigos" calls. I served as the point of contact for all design-related questions.
Mentorship and guidance
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. UX Design is a passion of mine and I’m always glad to help my colleagues understand it better.
Lessons Learned
My time at Fiserv taught me how to lead design discussions, own design-related deadlines, and think at a higher-business level. I learned some valuable lessons along the way including;
- Compromise is critical because everyone wants something different.
- Proactive communication keeps the ball moving especially in vastly complex, slow-moving enterprise structures.
- Being a “Design Evangelist” that teaches others on my team about UX Design, and how it relates to their respective fields, is an imperative part of the job.
Fiserv
Leading the 0 - 1 redesign of a complex B2B2C enterprise-grade finance platform.
My Role
Senior UX/UI Designer
Our Team
40+ people across 3 scrum teams including Tech Manager, Senior Designer, Junior Designer, Backend & Frontend Developers, Product Manager, Product Owners, SME’s, Security, QA, and Agile Coaches.
The problem
Our SME noticed that many students around the world, especially in rural and impoverished areas, cannot easily gain access to high quality tutors to learn the Qur’an. We sought to build a platform that connects these tutors to these students for free or at a very low cost.
The solution
A platform that allows business owners to publically raise money
Step 1
User Research
I integrated clients and end users directly into the rewrite from the getgo by conducting new user research in the form of surveys, user interviews, and client roundtables. I first gained a thorough understanding of our user's thoughts on our product from a top-down level in order to understand the broad sentiments surrounding our product.
Understanding our users
I simultaneously conducted user interviews, usability studies, and gathered quantitative data to make the following personas and user journeys that guided our discussions.
Step 2
Collaborating with Product
I joined our Product team’s daily calls to gradually begin learning about the application and their vision for the product. These meetings allowed us to move the bar inch-by-inch every day. Product had never worked with a UX Designer before so these meetings also served as an opportunity for me to educate them on design best practices.
Building Information Architecture
I maintained Information Architecture to serve as the single source of truth for all requirements-gathering discussions. This allowed us to be on the same page for our vision and served as the springboard for future designs.
Step 3
Wireframing in Figma
By this point I knew who my users were, what their pain points were, and what Product's vision for the rewrite was. I also had a clear outline of what my wireframes needed to consist of. I thus began wireframing and shared my progress with Product in our daily calls to consistently source their feedback and ensure that collaboration never ceased.
Building our Design System
Technical constraints required that I built a design system from scratch via Brad Frost's Atomic Design methodology to ensure that our designs were scalable as our project expanded. My system leverages Figma's most powerful features including components & variants, auto layout, color and text styles, variables, conditional logic, and interactive prototyping.
Designing for our users
Two examples of how I used our personas to make features are below.
High Fidelity Mobile Designs
High Fidelity Desktop Designs
Step 4
Conducting Usability Testing
I was ready to begin showing my wireframes to clients once most core 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.
Step 5
Delivering in Agile
I collaborated heavily with our 40+ team members via sprint planning sessions, requirements gathering calls, daily standups, and leadership "Three Amigos" calls. I served as the point of contact for all design-related questions.
Mentorship and guidance
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. UX Design is a passion of mine and I’m always glad to help my colleagues understand it better.
Lessons Learned
My time at Fiserv taught me how to lead design discussions, own design-related deadlines, and think at a higher-business level. I learned some valuable lessons along the way including;
- Compromise is critical because everyone wants something different.
- Proactive communication keeps the ball moving especially in vastly complex, slow-moving enterprise structures.
- Being a “Design Evangelist” that teaches others on my team about UX Design, and how it relates to their respective fields, is an imperative part of the job.
Fiserv
Leading the 0 - 1 redesign of a complex B2B2C enterprise-grade finance platform.
My Role
Senior UX/UI Designer
Our Team
40+ people across 3 scrum teams including Tech Manager, Senior Designer, Junior Designer, Backend & Frontend Developers, Product Manager, Product Owners, SME’s, Security, QA, and Agile Coaches.
The problem
A 20 year-old expense management platform was bleeding clients due to its outdated interface and poor functionality.
The solution
A complete redesign of the platform from the ground up.
Step 1
User Research
I integrated clients and end users directly into the rewrite from the getgo by conducting new user research in the form of surveys, user interviews, and client roundtables. I first gained a thorough understanding of our user's thoughts on our product from a top-down level in order to understand the broad sentiments surrounding our product.
Understanding our users
I simultaneously conducted user interviews, usability studies, and gathered quantitative data to make the following personas and user journeys that guided our discussions.
Step 2
Collaborating with Product
I joined our Product team’s daily calls to gradually begin learning about the application and their vision for the product. These meetings allowed us to move the bar inch-by-inch every day. Product had never worked with a UX Designer before so these meetings also served as an opportunity for me to educate them on design best practices.
Building Information Architecture
I maintained Information Architecture to serve as the single source of truth for all requirements-gathering discussions. This allowed us to be on the same page for our vision and served as the springboard for future designs.
Step 3
Wireframing in Figma
By this point I knew who my users were, what their pain points were, and what Product's vision for the rewrite was. I also had a clear outline of what my wireframes needed to consist of. I thus began wireframing and shared my progress with Product in our daily calls to consistently source their feedback and ensure that collaboration never ceased.
Building our Design System
Technical constraints required that I built a design system from scratch via Brad Frost's Atomic Design methodology to ensure that our designs were scalable as our project expanded. My system leverages Figma's most powerful features including components & variants, auto layout, color and text styles, variables, conditional logic, and interactive prototyping.
Designing for our users
Two examples of how I used our personas to make features are below.
High Fidelity Mobile Designs
High Fidelity Desktop Designs
Step 4
Conducting Usability Testing
I was ready to begin showing my wireframes to clients once most core 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.
Step 5
Delivering in Agile
I collaborated heavily with our 40+ team members via sprint planning sessions, requirements gathering calls, daily standups, and leadership "Three Amigos" calls. I served as the point of contact for all design-related questions.
Mentorship and guidance
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. UX Design is a passion of mine and I’m always glad to help my colleagues understand it better.
Lessons Learned
My time at Fiserv taught me how to lead design discussions, own design-related deadlines, and think at a higher-business level. I learned some valuable lessons along the way including;
- Compromise is critical because everyone wants something different.
- Proactive communication keeps the ball moving especially in vastly complex, slow-moving enterprise structures.
- Being a “Design Evangelist” that teaches others on my team about UX Design, and how it relates to their respective fields, is an imperative part of the job.