CASE STUDY
Control Center
CASE STUDY
Control Center
Enterprise payment processing made easy
Control Center is Fiserv’s enterprise software portal for merchants to manage transactions, accounts, reports, and more. It goes to market under Fiserv’s brand “Carat”.
Control Center started off as a variety of Fiserv products, mainly Business Track and Clientline. Despite being the leader in the space, the product had it’s flaws, particularly with regards to User Experience. Through client feedback and studies done by third parties such as Forrester, Fiserv realized they needed to drastically improve the UX. That’s where I was brought in, to lead the redesign of this key product.
Process
This version of a design thinking approach was the guiding phased structure throughout the project.
01
Diagnose
Deep diving into the current build of the app, and research done to date, in order to diagnose specific challenges and align on target KPIs.
02
Discover
Developing insights into the needs, objectives and pains of users and analyzing best-in-class experiences in and out of category.
03
Design
Working in iterative cycles to design the most optimized version of the experience to address the identified needs.
04
Test
Test and validate new designs while revisiting previous steps in the process in order to ensure the best solutions possible
05
Implement
Packaging and documenting the designed components, insights and findings into assets that can be handed over to development teams
Research
Throughout the process, I conducted research in order to make the best experience possible and fully realize the value of the product for its users.
Product Immersion
I onboarded into the product and completed a series of actions that are representative of the current experience, forming hypotheses about the opportunities for change.
Stakeholder Interviews
Ran stakeholder interviews spanning a number of different business units including product and account management to gain a comprehensive picture of strategic priorities and top-of-mind challenges.
Customer Testing
Ran customer interviews with clients to identify pain points, validate hypotheses and test our solutions to ensure a product that surpasses user expectations. Customer testing included: Yum Brands, Sodexo, Inspire, MLB, Costco, AT&T
Developer Review
Checking the technical feasibility of the platform vision with the development team to ensure that we could maintain the integrity of the design once it enters the scrutiny of a production environment
Collecting Data
The previous version of the application did not have the level of data collection and tracking needed, then I came in. Deeper tracking was added with Google Analytics and Google Tag Manager. This gave a steady benchmark that was used to test improvements against. Improved data collection allowed for A/B testing to be used to validate and guide design decisions.
Visitor Flows
Tracking where users are going post log-in and which pages they are visiting in succession to identify key journeys.
-
# of unique visitors
-
Bounce rate
-
Exit rate
-
Drop off rate
Heat Map
Tracking users’ cursor and scroll through the page with HotJar to understand what the most viewed and engaged with sections of the page are and if critical information is going unseen.
-
% unique visitors scrolled x% down a page
-
% unique visitors scrolled over / clicked on certain page elements
Page Interactions
Tracking what users are directly interacting with on each page and identify if any functionality is not getting engagement to inspire change or tool tips to aid users.
-
# of visitors who clicked on main menu tabs (i.e. home, create, files, etc.)
-
# of visitors who clicked on page button
-
# of visitors who selected filters, downloaded reports
Dwell Time
Tracking how long users spend on key pages in a journey to monitor whether or not the screens are clear or if confusion is delaying user progression in completing core tasks
-
Overall session duration
-
Time on each page and pop-ups
Visitor Flows
Tracking where users are going post log-in and which pages they are visiting in succession to identify key journeys.
-
# of unique visitors
-
Bounce rate
-
Exit rate
-
Drop off rate
Heat Map
Tracking users’ cursor and scroll through the page with HotJar to understand what the most viewed and engaged with sections of the page are and if critical information is going unseen.
-
% unique visitors scrolled x% down a page
-
% unique visitors scrolled over / clicked on certain page elements
Page Interactions
Tracking what users are directly interacting with on each page and identify if any functionality is not getting engagement to inspire change or tool tips to aid users.
-
# of visitors who clicked on main menu tabs (i.e. home, create, files, etc.)
-
# of visitors who clicked on page button
-
# of visitors who selected filters, downloaded reports
Dwell Time
Tracking how long users spend on key pages in a journey to monitor whether or not the screens are clear or if confusion is delaying user progression in completing core tasks
-
Overall session duration
-
Time on each page and pop-ups
Visitor Flows
Tracking where users are going post log-in and which pages they are visiting in succession to identify key journeys.
-
# of unique visitors
-
Bounce rate
-
Exit rate
-
Drop off rate
Heat Map
Tracking users’ cursor and scroll through the page with HotJar to understand what the most viewed and engaged with sections of the page are and if critical information is going unseen.
-
% unique visitors scrolled x% down a page
-
% unique visitors scrolled over / clicked on certain page elements
Page Interactions
Tracking what users are directly interacting with on each page and identify if any functionality is not getting engagement to inspire change or tool tips to aid users.
-
# of visitors who clicked on main menu tabs (i.e. home, create, files, etc.)
-
# of visitors who clicked on page button
-
# of visitors who selected filters, downloaded reports
Dwell Time
Tracking how long users spend on key pages in a journey to monitor whether or not the screens are clear or if confusion is delaying user progression in completing core tasks
-
Overall session duration
-
Time on each page and pop-ups
EXAMPLE
User Journey
User Journey mapping helped visualize the paths users took within Control Center. Through data collection, UX research, and user testing, insights were gained that allowed us to optimize the user experience. This is an example of one of the journey's users took.
SCENARIO
An experienced user creates a custom report and optimizes their workflow by scheduling their new report.
01
Log in
User logins to Control Center home page
02
Create
User creates a custom report
03
Build
User builds the report
04
Schedule
User schedules the report
END-TO-END TRACKING
Understanding where users are dropping off
Goal
Drive towards a higher completion rate, so that users are empowered to navigate Control Center themselves, without being reliant on account managers. A high bounce rate, exit rate and drop off rate implied an incomplete goal.
Key Metrics
-
Bounce Rate
-
Exit Rate
-
Drop Off Rate
END-TO-END TRACKING
Tracking to gathering insights and key friction points in each step of this user journey.
Goal
Remove points of friction to improve user experience during this journey. The results told me which login methods users preferred, which widget is most important to the user, what the most desired templates are, which filters are users consistently utilizing, etc.
Key Metrics
-
Login method used
-
Dwell time and scroll time
-
Template selected
-
Filters selected
Tracking user behavior across segments and roles
Implemented role based user grouping to allow for greater tracking insights in order to cater experiences to the right users.
Segments identified by integrating required questions into the onboarding and “add new user” processes, shaping an individual users experience.
A robust data base of user trends by segment enables smarter recommendations for report templates. For instance, transaction volume reports are scheduled for every Friday by an Accounting user, this popular report type is suggested to other Accounting team users who are likely to have similar needs.
Targeting key improvement categories
Throughout my time working on Control Center, there were a plethora of problems that I solutioned for after the diagnose and discover phases. There were four main themes that the various problems fell within.
Control
Users experience a sense of empowerment as they gain more control over the platform, embracing its potential for customization that surpasses that of other alternatives.
-
Added homepage widget customization
-
Added shortcut customization in the navigation
-
Added features that allow for deeper customization of reports
Clarity
The platform's information architecture and hierarchy, once clarified and streamlined, enhance the user experience by making it more intuitive and user-friendly.
-
Re-structured the IA and hierarchy with simplified navigation
-
Added AI powered global search to help users quickly find what they are looking for
Consistency
Consistent and cohesive digital experiences foster clarity and ease when engaging with the app ecosystem, eliminating unnecessary confusion and ensuring a seamless user journey.
-
Created a new design system to ensure consistency across the experience
-
Aligned interactions and UX flows across pages to eliminate confusion
Inspiration
Users have the opportunity to unlock the platform's full potential by gaining a clear understanding of its functionalities, thus maximizing its value and making the most out of their experience.
-
Added tool tips to help the user
-
Report templates gave users more understanding of filters
-
Ensured integrations and upgrades can be easily found to let the user know the full capabilities
Guidance
Training, help center, and AI assisted search results help the user find and understand what they are looking for.
Toggle
We slowly introduced the new UI/UX and allowed users to toggle between the old and new versions of the tool to aid in the transition and help users understand where the differences are.
Tool Tips
Tool tips provided specific and contextual guidance to users.
Decision Principles
The three guiding principles that were used to forge a path of evolution for the product.
Data Driven
Product decisions are made based on quantifiable product usage data, combined with customer feedback and a clear business rationale.
User Centric
Keeping users at the heart of every stage of the process - driven by the desire to solve for tangible customer pain points.
Growth Led
Focus product strategy and feature prioritization on maximizing growth potential.
Design System
A cross-platform design system that gives designers, developers and product managers the framework they need to create engaging, user-centric product experiences.
The design system:
-
Ensures the Control Center digital experience shows up consistently in a way that is identifiably Fiserv.
-
Shapes the way the customers interact with Control Center and how they perceive its value.
-
Guides the product development roadmap and implementation strategy to ensure the product continues to resonate with the principles just as much as the UI.
Mitigating confusion between old & new versions
When making significant changes to software that has an existing user base, it’s crucial to help the users transition and learn the differences and new experiences.
Before
After
.png)
.png)
Simple
The experience is radically simple, making each interaction effortless and elegant, taking away the complexity of merchant acquiring. Intentional at every moment, and relentlessly focussed on users.
Configurable
The experience is uniquely versatile, enabling true customization at every level. A platform that feels crafted to solve the bespoke challenges of each user and every business.
Innovative
The experience ignites ambition, sparks innovative ideas, and through insightful data, catalyses growth. It’s familiar and future-proof, building on a foundation of leading technology and brought to life with best-in-class design.
Documentation
A design system is only as good as it’s documentation. I created clear and detailed documentation to ensure consistent understanding and implementation across the product. Take a look at some of the documentation.
Customization
Control Center was designed to allow for deep customization for users. For our enterprise clients, brand consistency is key.
The dynamic design system updated colors, background, data visualizations, and logos in order to take on the user’s brand.
100+ Screens, Modals, & Sheets
The design system came together to form the full User Experience of Control Center.
Covering a breadth of solutions including statements, user management, reports, virtual terminal, disputes, help, and more.
USER FEEDBACK
“This is much easier on the eyes and I know how to get what I need with it.”
Yolanda Stancil, Sodexo
USER FEEDBACK
"All of this is great - it's a vast improvement from today."
Samson Chain, MLB
USER FEEDBACK
“These new features will help me tailor Control Center for my warehouse managers.”
Yvonne Miao, Costco