Creating a positive user experience to help uptake of customer migration to online membership processes.

iDonate

UX DESIGN UI DESIGN

SERVICE DESIGN

Role:  Sole UX/UI Designer and Web Developer

Galway Lawn Tennis Club Web Design

Background

Galway Lawn Tennis Club is a state-of-the-art racket and social club situated on three acres of ground in the scenic heartland of Salthill, overlooking Galway Bay. Over 100 years old, members of all ages and levels have enjoyed learning and playing Tennis, Squash and Badminton.

I was approached by the management of the club to redesign their current website from scratch. They were unhappy with their current website and wanted to start again from the beginning to create a digital hub that would automate a lot of manual work processes, specifically around the management of club membership.

The project involved a re-organisation of business process flows to optimise and automate internal processes and to migrate offline users to use the website as the central hub for news, tournaments, coaching signups, court bookings and managing and paying for their annual memberships. The success of the uptake of the customer migration depended on the positive user experience.

I worked on the entire product design as the sole designer from research to conception, visualisation and development.

Process

Research

Stakeholder Interviews

The Club had been doing a lot of manual work when processing Membership applications, renewals and monthly installment payments.

I conducted interviews with various stakeholders: the Club Rackets Manager, the Club Accounts Manager, General Manager, Heads of each Sport department and members of the Reception and Admin teams. From these interviews, I gathered together the various processes that were being followed by the different teams to process membership applications and renewals.

Memberships

The teams relied greatly on manual processing for Membership applications: hand-written receipts, Google Spreadsheets, taking card and cash payments at Reception only.

Also, it became clear that simple tasks, like the processing of a new member, involved duplication of data entry – to process a new member, a member of the Reception team had to input the same data four times or more into different systems.

The Club allows some Membership options to be paid as monthly installments for 3 to 6 months. This had been managed by the Reception and Admin teams by taking a physical cash or card payment, then entering the details of the installment payment into a spreadsheet and then manually monitoring it each week to see if any payments were due. If a payment was due, they would have to manually contact the customer by telephone or email and ask them to come in to pay their next payment.

Coaching Sessions

Members and non-members who wished to sign up for a coaching programme or coaching sessions were required to ask at Reception in person or to contact the Head Coach personally to apply.

Reception would keep a spreadsheet of applicants, and the Head Coach would track who has signed up with them in their own manner.

Communication to customers and non-members about upcoming coaching programmes were limited to print brochures, posters and Social Media.

Tournaments

Members who wished to take part in tournaments, needed to do so manually and in-person at reception or with their coach. This involved in messy, unorganised manual collection of data and payments around tournament entry fees and applications and was a large source of frustration to staff and management.

The Club wanted to create a “digital hub”, where it’s members would go to book tournaments, manage their memberships, book a court, find out the latest news and learn about and book coaching sesssions.

My task was to collate all the information and requirements from the different departments, stakeholders and users and design a digital solution that would greatly reduce their manual processes and automate a lot of repetitive tasks, while attracting current and new customers to sign up and pay for their memberships through the website.

Analysis

User Stories & Scenarios

User stories were developed from the initial understanding of the different users who would access the website, and sample user journeys were identified.

Some examples of users stories developed for GLTC:

User Stories GLTC
User Stories GLTC
User Stories GLTC

User Flows & Process Maps

After gathering a full understanding of the current manual processes the Club was following for it’s membership applications, I designed an optimised process map for how this could be improved on, using my digital solution.

The new process involves the user signing up, selecting their membership type and paying for their membership online. I gained a full understanding of the multiple options provided to the user when selecting a membership:

New Member or Renewing Member?

Is the user a new member/member who has not held a membership in the last 3 years? Or are they a current member/member in the last 3 years, who are renewing their membership?

GLTC offer discounted rates for some variations for New Members, so we immediately need to differentiate between the two membership types.

Membership Type

The Club offers different price points for many variations. To avoid the user becoming confused by these many options, I organised the options into hierarchies, under 4 clear membership types:

Individual

Student

Junior

Family

Membership Sub-Type

Under each Membership Type, the user can select the option that suits them best. This can involve whether they live more than 80km from the Club, in which case they can take advanctage of a discount.

Or different pricing for different age groups of Junior members, etc.

Payment Method

The Club offers monthly installment payment options for some Memberships Types. These payment types needed to be incorporated into the design solution.

Or different pricing for different age groups of Junior members, etc.

User Stories GLTC

    Design

    Usability Testing & Design Solutions

    Due to timeframe limitations, we were unable to perform usability testing on prototypes prior to going live. Instead, we compromised on iterative live user testing. From live User Testing, we gained valuable feedback that we used to improve upon the original design solution:

    Pain Point:

     “I stopped after the initial membership signup form, because I didn’t realse there was another step afterwards.”

    The initial design had the user going through multiple steps to fill out a membership application form, select a membership type, set up an account and then proceed to pay for their membership. This was proving to confuse users who thought the process was finished after the initial membership form was submitted. The problem seemed to be stemming from the fact that the “Submit” button felt final. Even after we added a progress bar, many users still stopped at this point.

    Designed Solution:

     

    The solution involved reducing the number of steps greatly, combining the membership selection page with the membership application form and changing the action button to the phrase “Next”, rather than “Submit”, bringing them to a Checkout page where they could set up/sign into their account and pay on the same page, avoiding any further confusion.

    Pain Point:

     I wanted to sign up for myself and my kid. I found it difficult to add a second or third membership to my transaction.”

    Sometimes a parent would want to sign up for themselves and then sign up one of their children at the same time. Or just sign up two of their children. Either way, individual memberships work out to be better value for these situations than the combined family membership option.

    So this meant that users were finding it difficult to process more than one application in the same transaction. Instead they were becoming frustrated because they were being forced to go through the whole process again.

    Designed Solution:

     

    The solution was to add two clear buttons, “Add a New Membership to your order” and “Add a Membership Renewal to your order”, both colour-coded the same as on the initial membership selction page. Selecting one of these buttons brings the user back to the previous stage of the process to add a new membership for a second or third person. Keeping the same colour-coding helps the user understand where they are going in the overall navigation of the membership application process.

    Pain Point:

     I didn’t realise that I couldn’t renew my membership if I had not held a membership in the last 3 years.”

    The phrasing of “New Membership” vs “Membership Renewal” confused certain customers.

    If a member has lapsed their membership for over 3 years, they can apply for a new membership, which applies significant discounts to their payment.

    If they have been a member in the last 3 years, they cannot sign up as a new member. They must renew their membership and cannot avail of the discount.

    Designed Solution:

     

    To limit the confusion on this, we simply used clear, visible tooltip labelling on both buttons to explain in plain wording, which button to select based on your circumstance.

    Pain Point:

     I did not sign up for monthly installment payments because I thought it was indicating prices per month for a full year, not for just 6 months in total.

    Users reported that they were deciding to not sign up for the monthly installment options, because they were misunderstanding the duration of the installment options.

    Designed Solution:

     

    The monthly installment payments are for a maximum duration of 6 months, 3 in some cases. We added a highlighted note that appears when the user selects one of these options. The sudden appearance of the note draws the user’s attention to it’s content and they understand how the installment options work and decide to proceed.

    Prototype

    Clickable Protoypes

    Although the timeframe and budget didn’t allow for the creation of interactive prototypes and usability testing prior to an initial design being developed, iterative feature tweaks and releases have all been tested and validated with sample users and staff/admin testing before moved to development. Prototypes for this project are created using HTML, CSS and JavaScript to create basic low-fidelity versions outlining the functionality of a new or redesigned feature for user validation testing before it moves on to a higher fidelity and developed version.

    Validate

    User Validation Testing

    User validation testing is undertaken for all feature releases, new additions to functionality or optimised and redesigned existing functionality. Testing is undertaken by staff/admin (back-end users of the product) and sample proxy customers before the feature/functionality is moved to higer fidelity design and development.

    Design

    High-Fidelity Wireframes

    High-fidelity, fully annotated wireframes for each page were designed using Adobe Xd. Design deliverables included a full design system, interactive annotated wireframes with downloadable assets and style guides for future reference. I also developed the full website using the WordPress framework as a CMS with custom HTML, JavaScript, CSS and PHP.

    GLTC UX Redesign
    Galway Lawn Tennis Club

    Conclusion

    Thoughts & Learnings

    Galway Lawn Tennis Club went from having a basic brochure website to having a central digital hub that is utilised by hundreds of customers and staff members of the GTLC to analyse and process membership applications, tournaments and coaching programmes.

    The ease-of-use of the website helped to make the migration of offline customers to the digital platform a smooth and easy one. For customers who were resistant to technology, a kiosk at the Reception desk displaying the website provided the customer with no excuse but to embrace the move to the digital landscape.

    By studying the manual processes and business requirements that the Club were following and from many interviews with various stakeholders, I created an optimised, largely automated process for membership applications through the website.

    If the timeframe had allowed it, I would have liked to have been able to design prototypes and conduct usability testing prior to development to identify pain points. But by conducting user testing on the live environment, we were still able to improve on the digital solution and optimise the membership application and renewal process online further and attract more customers to embrace signing up and paying online.

    The result was a migration of over 600 initial customers to the digital environment and an increase of 75% in productivity due to automated and optimised processes.

    Services

    UX/UI Design

    Web Development

    Graphic Design

    Film & Animation

    Let's start working on your project!