web

Spotivity

Increasing Conversions through Content Strategy

overview

This was a team project that I worked on with three other designers. Our client was Spotivity.

Spotivity is an afterschool marketplace where teens (and parents) can easily find and sign up for after school activities, internships, or jobs. The website also serves agencies that want to list their programs or activities. There is also an app but we were tasked to work with the website.

deliverables

Domain Research
User Interviews
Competitive Analysis
Mid-fidelity wireframes & prototype

timeline

4 weeks
VIEW THE FINAL PROTOTYPE

the challenge

How do we encourage more teenagers to make an account with Spotivity, finish building their profile, and clearly understand the value that Spotivity brings? 

Research

analyzing the current state

Before diving into user research and market research,
our team analyzed the current state of the Spotivity website.
Here were some of our initial thoughts:

lack of search functionality

Current site does not implement any search; users want to see prominently displayed universal search

unclear value proposition

For both students and agencies, current site does not give a 3-5 second visual representation of the value proposition to either user/customer

separating students & agencies

Too much emphasis is placed on the Agency side, which is confusing for a teenage user, for example.

how do we appeal to teens? 

After analyzing the current state, we did
some on research on how to best engage
with teens. Here are our insights: 

keep the text simple

Reduce and de-clutter walls of text; teenagers have short attention spans.
Use small, meaningful chunks of text, and don’t make the font too small. 

Engaging Content

In the absence of text, use engaging graphics, animation,
and video - but don’t just use randomly for the sake of using them.
Make it meaningful.

information & data privacy

The current generation of teens have learned to protect
their privacy and information from an early age.
Contrary to popular belief, they don’t always want to
overshare as a default, particularly as it relates to their
personal information. Make sharing natural and not forced.

user interviews

Now, it was time to talk to real teens.
We wanted to identify the common painpoints that users
experienced as they interacted with the website so that
we could better define the problem at hand and see if the
results validated our initial reactions about Spotivity.

Sign up buttons
are hard to find
‍Sign up buttons are hidden in drop-down
menus in the upper right-hand corner of the
home page, making it difficult to access.
CTA buttons should catch the attention of the user
right away in order to drive conversion rates.

Too much text
When users look up activities to sign up for, they are met with long blocks of text instead of activity listings

No preview of activities
‍There is no motivation to click "Enroll Here" and create an account because the users don't know exactly what they are signing up for without any previews of activities

competitive analysis

Because the client already had plenty of research on direct
competitors that connect teens with after school activities,
we decided to focus our research elsewhere; our goal was
not to find gaps and opportunities, but rather to find inspiration
for updating and improving the Spotivity website.
Since Spotivity has three main audiences (the teen, parent, and agency),
we included several out-of-category competitors that focused on double-sided marketplaces.

uber

Uber makes two distinct entry points - one for the driver and one for the rider. 

fiverr

Fiverr allows first-time users to preview and browse through their services before creating an account. 

rover

Rover, which predominantly pushes end users to download their mobile app, places their CTA buttons towards the bottom of their homepage.

problem statement

In order to become active users of Spotivity, teenagers in search of new activities and job offerings need a website that clearly articulates Spotivity's value and features in a way that their age group would respond well to: visually appealing, fun, and personalized.

Ideation

After we received buy-in from our client, we began
to ideate divergent concepts using the Mash-up Method
where we took bits and pieces of our problem statement
(i.e., fun & engaging, personalized, etc.) and looked at how
out-of-category inspirational brands (i.e., Trader Joe’s, Netflix, etc.)
were embodying them.

problem statement

• Personalized
• Visually appealing
• Fun/engaging

+

brands

• Grocery
• Media
• Retail

=

6

divergent concepts

concept testing

We developed six concepts using the mash-up method
and tested them with six different users.
The key takeaways are indicated below.

Concept A
Concept B
Concept C
Concept D
Concept E
Concept F

Default to teen users

Parents and partners will have separate experiences
but when a user opens the landing page, it should be catered to teens first

content previews

The homepage should have examples of programs that
students can sign up for

wireframing

After receiving the user feedback, we met with the client
and presented our findings. He felt that many of the concepts we
had developed were too focused on what the user would experience
after they had created an account and logged in.
He clarified the scope again with our team and emphasized that his mission
for us was to build a marketing homepage for the website based on user research.

Solution

Based on client and user feedback from the previous round of testing,
we decided that the best plan of action would be to focus on clearly
articulating the value and purpose of Spotivity on the homepage
since our primary target for this particular project is first-time users.
This required us to think strategically about what kind of content would
capture the attention of users at a first glance and encourage them
to create an account. To accomplish this goal, we ultimately included
information about Spotivity's Personal Insight Tool, the rewards system,
and the different types of categories and activities. In addition to the
homepage, we created a sign-in flow and an overview of the personal
dashboard that the user would land on after creating an account.
On the dashboard, we created a section to encourage the completion
of their profiles and also displayed carousels of activity listings.

homepage

• We simplified the top navigation and made the CTA buttons easy to access
• We kept the text light and emphasized visuals
• In order to highlight Spotivity's value, we purposely showed the
features that users responded most favorably to

registration screens

After conducting usability testing, users told us that they
felt wary of giving away their personal information.
Our solution for this was to provide an explanation as to
why this information is necessary. When users hover over
the question mark logo with their mouse, an info bubble will pop up.

homepage (after logging in) 

• We simplified the top navigation
• We incorporated alot of white space, making it easier to adapt to mobile
• As soon as users create an account, they are prompted to finish completing their profile
• We included carousels with favorite activities and favorite

key insights from the usability test

For the usability test, we sourced at least six users with varying
levels of experience with Spotivity. They answered questions on
the following: the desirability of the website, navigability of the website,
understanding of Spotivity's overall value, understanding of Spotivity's features,
and how likely they would be to create an account and become a new user.

positive reaction to clear and simple design

Four out of six users had a positive reaction to the simple layout of the homepage. They felt it was easy to take in and understand Spotivity’s purpose and main features.

users want more information

Three out of five users wanted more information in general - one user wanted more information on the activities before creating an account; one user wanted more information on the rewards system and what type of prizes they might be able to earn; and one user wanted a little bit more general information about Spotivity.

categories of activities drew users' attention

Users were most drawn to the different categories of activities on the homepage. In a future iteration, there should be more emphasis on this and be made to be even more engaging for users to browse through.

VIEW THE FINAL PROTOTYPE

the client liked it - so now it's live!

From the screenshot below, you can see that there is a
separate login section for teens, parents, and providers.
Below that is a large hero section that clearly articulates
Spotivity's value; the homepage goes on to highlight other
parts of Spotivity's value as we had suggested.

*Please note that our team was not responsible for any
high-fidelity designs

Final Thoughts

Next Steps

• Research with prospective and current parents through user interviews should first be conducted in order to establish effective content to engage parents.

• Several content pages linked through the homepage’s footer should be built out. These include: About Us, Press & Media, Street Team, Contact Us, FAQ, Blog, and Forum. These screens are paramount to complete the teen side of the Wordpress site with robust information for users.

• The teen pages, as well as the agency and parent, should next receive UI design treatment--fonts, colors and photos--to move the project to the next stage, high-fidelity.

Reflection

Throughout this project, there were several moments where we had to pause and ask ourselves “What is the problem we are solving for?” Because the scope was not clearly defined from the very beginning, it impacted our ideation and concept testing. We developed concepts that were not in line with the direction that we ultimately ended up going in and could only apply two of the concepts in our final design. This was definitely a missed opportunity and had we known our scope from the very beginning, we could have developed a design that was even more reflective of user research.

eventurousspotivitybon voyage