TractionRec

Is an all in one Customer Relationship Management program for YMCAs and JCCs built on Salesforce.
I was the lead UX designer helping streamline member management for community centers

CRM Website

Scope

Over 43 community centers across the U.S. rely on Traction Rec, including the YMCA of Delaware, where 5,000 employees depend on it daily.

This system supports thousands of members, enabling them to seamlessly purchase memberships and register for programs.

Objective

Enhance the user experience for community centers by optimizing member and program management. Initial research had to be done to clearly understand what areas business and client wise would make the biggest impact

Initial Global App Research

Interviews

Conducted interviews with 6 TractionRec team members to align with company, marketing, and technology goals.

Data Review

Analyzed Salesforce analytics and Jira tickets to pinpoint areas with the most user friction.

Workshops

Led 4 internal workshops to gather in-depth insights into user needs and existing product knowledge.

Results

Most Issues were in 
the cart and checkout flows.

Improving the user experience for creating, purchasing, and editing programs was crucial. It would provide the most value to the company and comunity centers andt their members.

To get started I needed to Clarify the personas from both the client and user side.

Front Line

Persona

This persona is the first point of contact, focused on client experience through relationship-building, promoting membership sales, resolving issues, and meeting department sales and service goals.

Feature Specific Research

Technical Overview

Internal meetings with engineers and Q.A. to understand the existing feature.

Client / Members Research

I talked to 6 organizations and  4 members to understand their current goals, needs and issues on this flow

Identified Challenges

higher priority Issues

Old Cart Page

    • Hard to read
    • Doesn’t accept credits or gift-cards
    • Unable to accept donations 
    • Lack of clear visual hierarchy

Check Out

    • Users click the “Make Payment” button when ready to check out
    • This action redirects them to the payment page
    • Many clients close their browser after completing the payment
    • Future payments are often not set up
      This leads to missed or delayed follow-ups

Discovering Opportunities

Compared their previously proposed UI designs to their current live site

Prioritize Task

Match stories “needs” with technical effort to set the level of priority

The Design Guidelines and Tokens

Before getting started I had to understanding the complex Salesforce Lighting Design System

Design Evolution

Design Increasing in Complexity after user testing

Cart Page

    • Establish the simple one time purchase flow
    • Ensure it is easy to understand
    • Good for quick immediate transactions
    • Ability to donate

Cart Page V1.1

    • Ability to purchase immediate quick transactions
    • Membership purchase, handling present and future payments
    • Discounts, coupons and gift cards
    • Donations

       

Cart Page V1.2

    • Ability to handle complex purchases
    • Allow user to select multiple classes with one
      single program
    • One time purchases
    • Ability to view future charges
    • Add or remove single classes, memberships
      or programs