The Company

Recspert’s Mission

Recspert is a startup that connects users with local recreation centers and solopreneurs (or “Recsperts”) to find sports leagues, fitness classes, sports lessons, personal training, and other wellness services.  It is free for users to explore the site and find activities, communicate with the Recsperts, as well as register and pay for activities. The company is especially interested in targeting families but also wants it to be clear that they have something for everyone.

Recspert’s Business Model

To grow their clientele and fill their classes, providers (recreational centers and solopreneurs – aka “Recsperts”) can pay a monthly subscription to list their services on the platform.

At a Glance

Project Brief

My team of three was asked to design the landing pages for Recspert’s website. The stakeholders wanted a main landing page, a lead-generating page(s) for providers paying to list their services, and a blog page.

My Role

As one of three UX Design Interns, my roles included:

  • Competitor research and analysis

  • User flows and interactions

  • Information architecture (specifically structure and navigation)

  • Creation of wireframes for the Landing Page and the lead-generating Solopreneur and Rec Center Pages

The other designers focused on the Blog Page wireframe and the high-fidelity designs.

Tools

  • Figma

  • Prime React

  • Miro

Timeframe

This project was completed over a month-long period, from July 17 - August 17, 2023.

Deliverables

  • Competitor analysis

  • User flows

  • Wireframes

Competitor Research

Studying Similar Sites

I studied the landing pages of five similar websites to get an idea of what content to include in my Recspert wireframes.

  • CoachUp: connects people with sports coaches

  • FYT: helps people find personal trainers

  • Lessons.com: a teaching and tutoring platform that connects students with instructors

  • Thumbtack:  allows users to research, hire, rate, and review local service providers

  • ClassPass: a flexible fitness membership that enables users to discover and book different fitness studios and classes for a monthly membership fee.

I used the below chart to keep track of popular features. Here is a list of popular sections that I included in the Landing Page wireframe:

  • search bar with location

  • value propositions

  • explanatory section

  • linked categories to help users browse the site

  • testimonials

  • section advertising to service providers

  • button in the top navigation bar to become a service provider

Sticky Search Bar

Inspired by CoachUp.com (see screenshot,) I decided to include a sticky search bar that appears once the user scrolls down past the main search component. This ensures the search CTA is always visible to the user.

User-Centric Landing Page and Separate Provider Page

During my research, I noticed a common theme: the main Landing Page is designed primarily for the user rather than the service provider. The content on the landing page dedicated to providers is typically limited to just one section. As shown in these screenshots of the main menu bars from CoachUp, Fyt, and Thumbtack, a button/link on the menu directs interested service providers to a different page. I chose to design Recspert’s site like this.

Site Structure and User Flows

The Lead-Generating Provider Pages

Iteration 1: A Provider Page accessible by a button on the Landing Page

Originally, I had designed just one lead-generating Provider Page meant for both rec centers and solopreneurs accessible by a “Become a Provider” button on the main landing page.

Iteration 2: Adding a Solopreneur Page and a Rec Center Page

Putting the information for solopreneurs and rec centers on the same page would overwhelm users. Solopreneurs don’t need to see information targeted to rec centers and vice versa. Additionally, due to the different value propositions for the two groups, it is not feasible to make a detailed Provider Page that addresses both groups. So, I decided to divide the content into to separate Solopreneur and Rec Center pages accessible by buttons on the general Provider Page.

Iteration 3: Changing the “Become a Provider” button to a dropdown and removing the general Provider Page

It seemed cumbersome for the customer to go to a broad Provider Page that was not much more than a placeholder just to click a button and be directed to another page. To remove this extra step, I changed the “Become a Provider” button to a dropdown from which customers could choose between solopreneur and rec center and be directed to the appropriate page for their business model.

Wireframes

After deciding to remove the Provider Page from my final design, I finished up the wireframes for the following three pages:

  • Landing Page

  • Rec Center Page

  • Solopreneur Page

Incorporating Stakeholder Feedback

“Above the Fold”

After reviewing the first iteration of the Landing Page wireframe, the stakeholders requested there be more CTAs above the fold to make it easier for users to visualize and explore the site’s offerings. In response, I created a new “Browse Popular Activities” section consisting of clickable cards corresponding to each category (youth sports, adult sports, sports lessons, personal training, and health and wellness). Then, I redesigned the page so the most crucial information was closer to the top.

Emphasis on Families

The stakeholders also wanted to attract families, so I added a “Get Your Kids Involved” section.

Other Iterations

1) I made the thin “Become a Provider” bar into a larger section since it is such an important CTA.

2) I replaced the testimonial video with an informational video explaining Recspert. Since Recspert is a startup they did not have any testimonial videos yet, but they did have an informational video.

3) I removed the “Browse Popular Sports” section because I felt it was redundant to the “Browse Popular Activities” section.

Key Takeaways

I enjoyed working on my first collaborative UX project. The process of discussing design decisions with a team led to creative breakthroughs and ultimately improved the quality of the final work product.

The division of labor between the three of us allowed us to play to our strengths, stay focused and organized, and meet stakeholder deadlines. While it was initially quite difficult for me to relinquish large chunks of the project, I quickly realized the necessity of trusting my teammates to do their roles so I could focus on my role. However, I do want to emphasize that providing feedback on each other’s work was also an important step in our process.