Head to Toe
For this project, our team was tasked with rethinking USTA.com’s home page.
First things first
Purpose- To rectify user pain points around retrieving relative content and account setup from the home page. This is a visitor's first impression of our organization, we needed it to be both welcoming and intuitive.
Additionally, the USTA is made up of 17 regional "Sections"-- we aimed to tailor the experience for more localized audiences.
Audience- The Association’s membership and potential members. Stakeholders included Project Managers, Sectional representatives, Marketing and C-Level approval.
My Role
-
Conduct user interviews
-
Persona creation
-
Translating business requirements into wireframes
-
Refinement
-
Hi-def mock ups
-
Facilitate hand-off to dev
Before
Approach
Testing of the old homepage helped us uncover specific customer pain points, like the homepage’s lack of relevance to the user and difficulties finding local play opportunities. Another issue was an outdated pair of buttons for account creation. They consisted of a "Join" button and permanently visible, red "Renew" button. This confused members in good standing and non-members alike.
Next, we conducted multiple rounds of interviews to better understand each user group: the tennis player, the parent of a junior player, and the tennis coach.
Using our insights from these sessions, we created personas for each user group to summarize our findings and to put a human face on each of these groups. Having a better understanding of who will be using the site guided us toward our desired results.
Our approach also kept in mind the organization's "local first" initiative to highlight it's 17 Sections.
Constraints
Our front-end/CMS framework, Adobe Experience Manager, posed some welcomed constraints, like designing on a designated grid for flexible layout.
This helped keep our site consistent and responsive across screen sizes.
A less ideal constraint related to AEM was that each new component created for this project needed to be placed into our dev cycles. This created trade-off situations and required thoughtful strategy.
Solutions & Results
Our solution was to create several new AEM components (pictured below) that could be used together to make a new homepage. We aimed to also make these components reusable on other pages of the site.
These were:
-
a header that housed the functionality to support our local first approach
-
"smarter" sign-up buttons that retrieve account status w/ logged out/in states
-
a scroll picker that would enable users to find play, coaching and courts near them
-
new localized content sections
-
a new footer with more relevant resources
Analytics showed that 90% of unique visitors had clicked on the new search module in the hero component. That year to date, there had been upwards of 140,000 clicks on Section (local) content alone—content that did not exist on the homepage prior to our redesign. The year-over-year bounce rate was virtually cut in half; as of that time of writing, the bounce rate had decreased by 49% compared to the same time of year in 2020.
What they said...
“This [page] is much more engaging, instead of a place where I go and read or watch -- it feels like it's a place where I would go and do and get.”
- From User Testing (Post Redesign)
Stakeholder Reactions
