www.chargeitpro.com and original portal
Christoph Foulger
Sr Product Designer
Maven
Modernizing ChargeIt Pro's customer portal to be an accessible transaction dashboard that users will enjoy and find valuable.
Project Summary
After Gravity Payments acquired ChargeIt Pro (CIP) the namesake and services remained the same. However, after a product inventory, it was clear product unification and visual modernization were required to gain user trust, deliver long-requested features, and grow partner relationships. Two project cycles started to facilitate the product alignment:
Platform-agnostic payment processing — create a new API-driven payment method that can be integrated into any platform.
Customer transaction dashboard — unify several customer portal touchpoints into a single dashboard.
Enter Maven, ChargeIt Pro's new customer transaction dashboard.
MY ROLE
Product design, strategy, discovery, and optimization — owned the UX design process: flows, wireframes, prototype interaction, UI design, style guide system
Code: CSS style framework & core HTML structure.
Tools used: Sketch, InVision, Google Docs, Maze, Illustrator, Photoshop, VS Code, React.js, markers, post-its, and whiteboards.
Team: Myself, Product Manager, 1-5 Developers
PROBLEMS
User access is spread across multiple points each with different dated aesthetics and user patterns.
Users reported desires to save session progress and access deeper reporting, faster.
Ancillary reports are unclear and underutilized and take too long to load.
Stakeholders want the interface to be modern and reflect ChargeIt Pro as an industry leader.
OUTCOME
Implemented a single modern dashboard meeting the most requested user needs in one unified access point.
Designed user preferences for saved views and persistent user sessions allowing quick recall of the most important data.
Simplified report views increased utilization. Implemented loading interactions helping users' understanding of load state.
Gained parity with industry competitors, modernized the UI, and updated the core application framework to prepare for future breakout features.
MY DESIGN APPROACH
Maven was not built a day. The design to MVP process spanned months.
Continue reading to see how used a qualitative design approach to bring ChargeItPro's new dashboard experience to our merchants and partners and help them better run their business.
Define
Seek to understand the business
Through discovery sessions with Internal & Executive Stakeholders and Partner Reps, we learned what the current products lacked and the business purpose behind them.
ChargeIt Pro (CIP) develops software and hardware integrations allowing dev partners to accept credit card and ACH payments directly in their point-of-sale (POS) software. With these integrations, the POS software developer can also offer 3rd party hardware credit card terminals like Clover, PAX, and Fiserve. CIP sales teams work with current and potential users of the software to get set up using Gravity as their payment gateway.
Merchant can access transactions in real-time with 24/7 payment processing support. CIP helps them reconcile their payments, batches, and deposits beyond what is supported in the POS software and troubleshoot payments issues.
Project limitations
Acquisition of ChargeIt Pro by Gravity is stealing time from Stakeholders and they cannot be as involved in the project.
Direct user access is limited due to roadblocks related to company acquisition.
The development team is stretched thin working on back-end restructuring of the unified payment platform and cannot be deeply involved in the ideation of the dashboard project.
Hypothesis
Adaptive user interface and access to better features will allow merchants to self-serve reconciliation and reduce support calls.
An updated modernized look and feel will excite more user adoption and lend more authority as an industry influencer.
Building a single product for multiple user groups will allow smaller sprint teams to iterate and maintain future feature progression.
We compared our top competitors to determine the important features where we lacked competitive parity.
Competitive review
Doing a competitive review early was essential to keep us oriented to what our top competitors offer that would leave our product features lacking.
With the solid assumption that our merchants are our largest user group many of the features compared were merchant facing in categories like payment access and processing, statements, deposits, security, and convenience.
Our closest competitors offer direct access for partners to activate and deactivate merchant accounts. We felt that was not in the best interest of the merchants since they are our direct customers as well. This type of account activity is best left to our amazing technical support staff.
However, a competitive advantage ChargeIt Pro offers partners is residual sharing. Even our largest competitors do not offer a profit share. This competitive advantage is advantageous in the sales process and can hasten the speed merchants are boarded. Offering features that allow partners to see signup status and residual amounts strengthens our relationship and gives them features they do have with other providers.
Empathize
Understanding our users
Support admins and Partners were easy to access and conduct surveys or interviews. However, based on relationships during acquisitions merchant users were not available directly.
I reviewed support call recordings with merchants as they discussed issues with a support rep. I found these conversations extremely useful and have conducted many more call shadows since.
After synthesizing customer research we identified 3 key user persona groups; Merchant User, Customer Support Admin, Partner.
These personas were a basis for every tactic and conversation for features and affordances.
Understanding the merchant's journey
I used a simplified map of the partner sales & integration process and the merchant referral process to gain perspective of the customer's mental modal when they are introduced to ChargeIt Pro ecosystem.
Connecting the map of the current portal sites and functions to understand the features used by merchant users and support admins. Partners are integral to this onboarding process. Mapping out this process allows us to find ways to give partners direct access to the user pipeline.
Concept
Exploring the user experience flow
Working through the user flow helped us determine how all the pieces might fit together. This process began with post-its card sort and whiteboard ideas. Progressing to a final thumbnail flow.
While discussing the stories and user experiences, I noted the interaction features I imagined for each screen. This allowed me to think about interactions at a macro scale. I placed markers of potential features on the map to picture how these features could be implemented before wireframing the experience.
I found this process to be the most creatively satisfying as I iterated each screen. I enjoyed the challenge of blending information from each of the systems into a cohesive final flow.
Scribbles and sketches
Early on, I gathered inspiration for a mood board and started sketching and bouncing ideas off colleagues using whiteboards, sketchpad, and later a touch screen UX notepad.
These sketches allowed me to play with visual hierarchy, how I might combine information from the multiple systems, and how to present data as charts and graphs.
Wireframe library and wire flows
At its core, Maven is developed as a component-driven application. Which led me to create a library of wireframe components that could be mocked up as needed for any user scenario. I built template pages for the common layouts, modals, dropdowns, tool-tips, collapsible blocks, buttons, and button groups.
This library made wireframes quick to create and iterate.
These blocks are still in use today. The collection has organically grown to encompass all the current blocks in the app. The library was originally created in Sketch but has been migrated to Miro for rapid wireframing and prototypes.
Scroll the image to see a user testing report from Maze — onboard signup process.
Validate prototypes with user expectations
Creating specific user scenarios with prototypes, we were able to understand how our concept decisions would impact the user.
Some of the testing scenarios included:
Find a transaction detail
Save a transactions search filter
Find a partner and the merchants they are assigned to
Add or edit a user
Force a password Reset
Support rep proxy as a user
User onboarding from Merchant Portal
Request access to Maven
Importing our prototypes from InVision to Maze, I was able to do rapid prototype testing. We tested the scenarios and validated them with stakeholders and support users. Maze is a fantastic tool to create a happy path scenario, review results, heat maps, bounce rates, and pain points.
UI Design
Visual design language and UI mockups
Utilizing ChargeIt Pro's existing brand style guide, I developed a visual design language for Maven. I wanted the interface to be a little corporate but convey a trusted financial feel and deliver a modern UI. This language was used from UI mockups through to development using design tokens that can be updated programmatically.
The logo uses OCR font commonly found in credit cards and banking. The logo mark is representative of a modern bar chart and is used as loading animation in frames throughout the application. I chose Helvetica to make it familiar and easy to read.
Optimize and Develop
Agile is just as fun as it sounds
Shortly after UI screens were prepared and validated I began working directly with the developers to bring Maven to life. I have a deep background in CSS and HTML and bring that experience to my skilled team of full-stack developers. For me, this relationship I gain with the product and the team increases my ability to optimize and create great experiences.
Developers are essential to the growth and optimization of the product. The product benefits from the entire team understanding the value we bring to the user's experience.
Tell me what you really think...
It's important for us to continue to understand how Maven was being used and how to translate that to business value. We use a combination of event-triggered Google Analytics and Hotjar to know where our users may have trouble and what features they use most. Hotjar user feedback and onscreen surveys allowed us to receive open feedback quickly. With session recordings, we've been able to see potential issues before they become widespread and, working closely with the developers, release fixes fast!
The last word
Maven was introduced to users in 2018. Since then, the product has gone through several iterations and feature enhancements. Our most user-appreciated feature is still our first feature— the simple ability to save a search filter for recall later.
The team's largest struggle early on was latency with the legacy backend data. With some creative data management and progressive visual loading states, we've been able to address this concern for our stakeholders and deliver a responsive product to our users.
We have continued developing new and enhanced features such as batch review & reconciliation, statements, report views, multi-account access, device management, and an improved mobile experience allowing our customers to refund, void, and take payments on the go.
In late 2019, Gravity and ChargeIt Pro become one brand under Gravity Payments. At that rollout Maven was rebranded, restyled, and renamed Gravity Dashboard.
200%
more report views
221
initial screens comps
100%
more mobile responsive (give or take a percent)
Countless
interaction testing and iterations