Gravity aquires ChargeItPro—and design debt
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:
- Customer transaction dashboard — unify several customer portal touchpoints into a single dashboard.
- Platform-agnostic payment processing — create a new API-driven payment method that can be integrated into any platform.
What we need to solve
- 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.
Results—modern dashboard unifed 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.
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.
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.
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.
Competitive review
Completing a competitive review early was essential to keep us oriented to what our top competitors to close the feature gap and highlight our competive advantages.
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.
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. After synthesizing customer research we identified 3 key user persona groups: Merchant User, Customer Support Admin, and Partner.
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 model when they are introduced to the ChargeIt Pro ecosystem. Connecting the map of the current portal sites and functions allowed us to find ways to give partners direct access to the user pipeline.
Exploring a new user experience
Working through the user flow helped us determine how all the pieces might fit together. This process began with post-it card sorts 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 — allowing me to think about interactions at a macro scale.
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 for any user scenario. I built template pages for common layouts, modals, dropdowns, tool-tips, collapsible blocks, buttons, and button groups. This library made wireframes quick to create and iterate.
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, and support rep proxy as a user. Importing our prototypes from InVision to Maze allowed rapid prototype testing with heat maps, bounce rates, and pain points.
Scoll image to view Maze user testing report.
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 a loading animation in frames throughout the application. I chose Helvetica to make it familiar and easy to read.
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.
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!
A living, growing product
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 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 customers to refund, void, and take payments on the go.
In late 2019, Gravity and ChargeIt Pro became one brand under Gravity Payments. At that rollout Maven was rebranded, restyled, and renamed Gravity Dashboard.