Summary

Summary

Summary

The Problem

How can we help agencies who provide after school programs understand the value Spotivity can provide their organization?

The Solution

Dedicate the homepage to the searchability of afterschool programs for teens and create a separate marketing site for agencies that can be accessed from the homepage.

The Process

1. Research

Heuristic Evaluation, Competitive Analysis, User Interviews

2. Define

Problem Statement, Design Principles, Persona

3. Ideate

Low-fidelity Wireframes, Concept Testing, Charrettes (Group Sketching)

4. Prototype + Test

Site Map, Mid-fidelity Prototype, Usability Testing

5. Deliver

Annotated Wireframes, High-fidelity Wireframes

Back To Top
UX/UI

Spotivity

Client

Spotivity is an afterschool program marketplace that not only connects teens with meaningful after school programs, but also offers the agencies who run these programs tools for expanding their outreach and engaging their participants.

Project Brief

Review and evaluate the agency onboarding process in order to make the sign-up process as efficient and frictionless as possible.

Team

4 UX Designers

Gotta Run?

Jump To Solution

Part 1: Manager Tools

Part 1: Manager Tools

Part 1: Manageer Tools

Our Starting Point

Upon receiving the project brief, our team wanted to make sure we had a clear understanding of our client’s needs and assumptions before diving into our research.

Defining our scope

Our client believes in order to gain and retain agencies, every aspect of their product should be “so simple and easy there’s no reason to not use it." With these guidelines they tasked us with evaluating their homepage, plan selection page, and agency dashboard.

Onboarding Process GIF

Agency Onboarding Process Demo

Agency Dashboard

client assumptions

The client believed the features of Spotivity were clearly presented on the website, the pricing model was simple, and the sign up process was transparent. Despite this they found it hard to get agencies to sign up and retain them throughout the process. They thought this was either because agencies did not have time to go through the sign up process or the current dashboard was not simple or easy enough for them to use Spotivity.

Finding the Disconnect

Finding the
Disconnect

Finding the Disconnect

Finding the
Disconnect

As we moved forward into our research phase, we wanted to find the cause of this gap between the client’s expectations and the agencies’ actual experience on the platform. In order to do this we took two approaches.

Identifying Users' pain points

We interviewed representatives from various agencies that were not yet familiar with Spotivity in order to understand their goals and frustrations and how that relates to their view on the current website.

After synthesizing our insights from those interviews in an affinity diagram, we were able to disprove some of the client’s initial assumptions:

  1. The pricing model was not easy to understand even after users had time to look through the plans page.

  2. Agencies are time-conscious but users did not mention it as a deterrent from signing up.

  3. Users liked the current dashboard, especially the metrics, and wished they knew more about it before signing up.

And we revealed the more pressing pain points users had:

  1. Users couldn’t figure out what plan was right for them because they were confused by the wording and multitude of options presented.

  2. Users found the features listed on the plans page unhelpful because there was a lack of clarity in what those features actually were.

  3. Users were most interested in Spotivity’s ability to increase their discoverability and market their programs to teens who need it, but they didn’t see this represented on the website.

Based on these insights, we found that overall Spotivity’s website struggled with marketing its platform to agencies and presenting its pricing plans clearly.

Examining successful examples

Spotivity operates much like a SaaS platform for agencies, selling its services as a subscription. To look for opportunities for improvement we compared how other SaaS companies market themselves and present their pricing plans.

Marketing Examples

MindBody discloses its features gradually so that it doesn’t overwhelm the user but still holds their attention throughout the page.

HubSpot features a CTA to "Get Hubspot Free" upfront to entice users with a low-risk option.

Salesforce features a preview of their dashboard to show, not just tell, their users what they’d get.

Pricing Examples

Mindbody splits its pricing between the type of industry the user is in, reducing confusion even with various pricing plans.

Dropbox has an informational tooltip for each feature in case users are unsure of the feature names.

Looking at these examples, we learned that when it came to marketing it wasn’t just about being simple. Users want more information about what they’re buying but they want it to be presented clearly, gradually, and in a meaningful way like in these examples.

Narrowing Our Scope

Narrowing Our
Scope

Narrowing Our Scope

Narrowing Our
Scope

After gathering information about the existing platform and the agencies using it, we were ready to narrow our scope.

What are we solving?

Based on what we found about the existing product and the agencies using it we defined the problem we wanted to solve for.

Agencies need an organized and digestible way to understand Spotivity’s value proposition before and during the onboarding experience so they can better understand how to leverage Spotivity’s tools for outreach, retention, and promotion of their objectives.

Given the feedback from users we decided to focus on redesigning the homepage and plans page.

How are we solving it?

We also developed design principles to guide us toward a solution with our research findings in mind.

Informative Minimalism

Strive to produce an easily comprehensible solution by increasing clarity and decreasing information density.

Honoring Identity

Acknowledge and engage with agencies’ distinct missions, objectives, and values in a meaningful way.

Seamless Guidance

Simplify complex experiences with frictionless progression that intuitively guides the user and reduces confusion.

Developing Concepts

Developing
Concepts

Developing
Concepts

Developing Concepts

Using our problem statement and design principles to guide us, we ideated concepts for the homepage and plans page by taking inspiration from our research. We then tested those concepts to validate their usefulness with users.

Essential pieces of the puzzle

From our tests we identified what parts of each concept users liked and what parts would help them understand Spotivity’s value proposition better.

Search bar

Users liked having the search bar easily accessible on the home page so they can browse the teen side of the platform before signing up for anything.

Featured programs

Users liked seeing a program featured on the home page and would want to have theirs featured.

Separate paths for agency type

When browsing for more information about Spotivity, users liked being directed to a page speaking to their specific agency type.

Get started for free CTA

Users found comfort knowing they can get started on the platform for free.

Plan recommendation

Users liked the idea of being recommended a plan rather than having to make sense of the plans themselves.

Putting the pieces together

We knew what we wanted to include in our solution but we weren’t sure how it would all come together. To explore our options we did a sketching activity to brainstorm options for converging the components. From those sketches we discussed what was most successful and began putting our ideas together to create a framework for our final solution.

Home Page
Agency Home Page
Agency Type Page

Our Solution

Our Solution

Our Solution

Our final solution takes inspiration from other two-sided marketplaces and splits the agency side of the platform from the teen side of the platform. As illustrated by our site map, the teen side top navigation includes a link leading to the agency side of the platform. The agency side serves as a marketing site, providing information for different agency types as well as a dedicated pricing page.

To see how this works first hand, click here to view the mid-fidelity prototype:

Mid-Fi Prototype

Site Map

Home Page

The home page focuses on searchability and showcasing the breadth of programs available on Spotivity in order to show both sides of the platform its value.

Agency Home Page

This page gives an overview of Spotivity’s value proposition and leads agencies who need more information to an informational page for their specific type of agency.

Agency Type Page

The informational page for each agency type gradually discloses information relevant to those agencies. After learning about how the platform can benefit their agency they are presented with their plan options and can sign up from there or learn more.

Pricing Page

The pricing page allows users to compare the prices and features of the different plans. If users still aren’t sure what plan is best for them, they can take the Plan Assessment to get a recommendation.

Plan Assessment Overlay

The plan assessment helps users figure out what plan best suits their agency’s needs by asking a few questions about their agency and its priorities.

The Outcomes

The Outcomes

The Outcomes

We tested our prototype to see if our solution properly informed users of Spotivity’s value in an organized and digestible way. From this testing we identified what parts of our solution were successful and what areas the client could look to improve or further develop in the future.

What was successful?

  • The sign up process was easy to understand.

  • The teen and parent side of the platform encouraged participants to browse.

  • Participants liked being able to navigate according to agency type and found it made the product easier to understand.

  • The 3-tiered pricing model was clear.

  • The Plan Assessment feature tested well and we found that participants felt inclined to use it.

Areas of opportunity

  • Appeal to teens

    Test the home page for usability with teens and reconsider the branding with teens in mind.

  • Copy and content

    Conduct further testing on each agency type to find what features they would prioritize or be most interested in. Have a proficient copywriter or content strategist improve the copy on each agency type page in order to reflect those specific features.

  • Naming of features

    Re-evaluate the features and their wording so that anyone not familiar with the platform can understand what they are.

High-Fidelity Wireframes

After making revisions based on testing feedback, I created additional high-fidelity wireframes using the existing Spotivity branding. Click here to view the wireframes in full-size.

Hi-fi Mobile View

The results

In November 2020, Spotivity updated their website and we saw they had taken our designs into consideration. Clicking on the "For Providers" tab now leads to a landing page similar to our design.

Updated Spotivity "For Providers" page

As you scroll down the page they also added a section describing the types of organizations and how Spotivity tools can provide them with value. This is similar to our idea of having separate pages catering to each type of organization but provides it all in one place.

Information specific to organization type

What did I learn?

This project taught me a lot about working with clients and with an existing product. Our team had to advocate for the user to align stakeholders who aren’t used to thinking that way. This also helped me practice taking ownership of our research and design decisions.

My biggest takeaway from this experience is to make sure to have a clear understanding of the existing product as soon as possible. From the beginning we were more focused on the user’s experience on the site, but didn’t fully understand the product yet. Looking back I would have prioritized doing a more thorough audit of the existing site with the team before any user research and asked our client any questions that came up. I realize now a lot of our blockers could have been avoided if we had given the current product as much attention as the the user research.