User Research & SEO increasing high quality sign-ups
As part of an initiative to improve conversion from organic traffic, we optimized our logged-out class preview page experience. After multiple rounds of user testing & design iteration, we launched a design & structural update that opened the SEO floodgates, increased conversion to a paid membership +5%, & gave us the flexibility to optimize further.
COMPANY
Skillshare
timeline
Q1 2020 - Q2 2021
MY ROLE
IC Product Designer
problem
Low conversion rate, customers were unclear about how Skillshare works or what comes with premium membership, & the page structure hid keywords from organic search.
solution
Understand what our users needed to feel confident in converting to a paid membership & redesign the page to optimize for conversion, clarity & better SEO.
impact
The new design resulted in +14% increase in organic traffic, +3.5% increase in conversion to a free trial, & +5% increase in conversion to paid membership.
The Process
This was a multi-layered project that started with a big collaborative effort and ended in an unexpected place. Here is an overview of how we went from legacy design & code to improved design, code, & SEO:
Phase 1:
From Problem to Hypotheses
After gathering evidence of the problem, we wanted to go broad with our solution ideation. So, I worked with the Product Manager and Design Director to set up a design workshop. We got the whole design team together with a few stakeholders to define the direction we wanted to take our solutions in by:
Reviewing the evidence
The PM & I gathered feedback from a C-suite stakeholder survey along with insights from a user research study. I also conducted a competitive analysis & we shared these with the workshop participants on day 1.
Defining the goals
Together, we reviewed the feedback & insights & we discussed the problem space. We then came up with a problem statement. Next, we discussed & refined the project goals & success metrics.
Ideating
Once we all had a better understanding of the problem space & goals, we conducted a sketching session & voted on the designs we felt would solve the problem. We left the workshop with 2 solid design directions.
Visualizing the Design Concepts
I worked with another Product Designer to create 2 separate hi-fidelity design prototypes to test in another round of user research. We got together to list out the concepts we wanted to test between the two designs and we each chose the ones that we believed would achieve the project goals.
fede’s list
• Keep the general layout of the top of the page with the lessons list up top
• Added a few class stats in this ATF area
• Include an upsell modal that would follow the user down the page
• Large Teacher callout with bio
• Reviews
• Visible Pricing + Inline sign-up
• Browse Categories
• Blog article links
my list
• Sticky upsell banner with large Sign-up CTA
• Large hero video that would auto-play on mute in the background
• Organized at-a-glance class stats
• Collapsable lesson list
• Teacher callout with links to socials
• Not showing reviews
• Marketing copy
• New browse by Category thumbnails
• Large Mobile App callout
• Blog thumbnails
• Other Class Categories list (for SEO)
Validating with users
I organized and set up 1:1 interviews with users to test the 2 design concepts. We came up with the following insights:
1
keep what’s working
The existing up-front lesson list helped users understand what they could learn in the class.
2
make it obvious
Between the two sign-up options, one was noticed (sticky modal) & the other was completely missed (sticky banner).
3
keep it light
Users were overwhelmed by all the information, so we discussed ways to cut back overall.
4
copy is key
Users organically commented on the header copy so we wanted to get it right with the final design.
Phase 2:
Pause for other priorities
The first unexpected shift in this project happened when we paused the full page redesign to add in a crucial new feature, transcripts of the audio in all of our classes.
Transcripts first
It was a top priority to launch our transcripts feature to improve the accessibility of our content and provide an added SEO boost. This project took a little over 3 months to complete before we could go back to focusing on the full page redesign.
Phase 3:
Reduced the scope to launch & learn
When we came back to the redesign project, we met with engineers & learned that it needed to be de-scoped in order to include the work to convert the back-end to React. With this new direction in mind, I iterated on the designs that we proposed and created the final design; a single scrolling page with clear value propositions & CTAs. This is the design that launched on web & mobile web.
Design Considerations
The business goals were in a good place with the engineering work & the SEO improvements, but the overall design possibilities had to be de-scoped. Therefore, I focused on solving the biggest user problems we learned about in the user research by keeping these design goals in mind:
Streamline the information
To reduce cognitive load, I designed max heights for the information blocks so users could choose whether to “see more” of the information or keep it hidden.
Make it encouraging
I made sure to tweak the header copy in the final designs so it became more clear, approachable, and inspirational.
Make the offering clear
By adding the membership upsell card and membership value props, the fact that Skillshare is an unlimited subscription model became more clear.
Design Highlights
At-a-glance Overview
By updating the level, # of students, and # of projects to our new highlighted card component, it provided a focus moment for our users to understand what to expect in the class. The shorter information blocks below helped users get a better idea of if it was the class they were looking for without being overwhelmed with information.
Sticky Upsell Card
This sticky sign-up modal followed the user down the page providing ample opportunity to jump into signing up for membership & get right into learning as fast as possible once they were convinced that this was the right class for them.
Social Validation with Class Reviews
Something we uncovered in the user research was how important other students opinions were about the quality of a class. I took this opportunity to bring a small preview of the Class Ratings section to the front so it would provide that social validation front and center.
Membership Value Props & Mobile App callout
Finally, a piece of the grander redesign vision was able to work in the descoped project. I wanted to answer the question users had of “how does Skillshare work?” through adding 3 value props & a mobile app callout to the bottom of the page so interested users could have more information about what’s included in their membership before deciding whether to sign-up.
Outcome
+14%↑
Organic Traffic
Increase in page views from organic traffic.
+3.5%↑
Conversion to Sign-up
Increase in conversion to a Free Trial.
+5%↑
Conversion to Paid
Increase in checkout completion rate.
-2.6%
Account Created
Decrease in accounts created from this page.
After launching, we saw a significant increase in page views via organic traffic (+14%). Our SEO improvements were a big success! Another interesting twist is that we saw a slight decrease in # of accounts created, but a net increase in conversions to sign-up for a free trial & then, after their trial ended, conversion to paid membership. This signaled to us that the new designs solved the user problem of helping them understand what Skillshare membership is and make a more informed choice to sign-up. The fewer accounts that were being created were more intentional & engaged users.
Learnings & Key Takeaways
• This was a great lesson on the importance of gathering requirements up front and knowing when to talk to stakeholders (early & often).
• I also learned from this project that it is possible to balance designing for the user & for the business without sacrificing positive results.
• And finally, I saw how small changes can make big impacts on a highly trafficked page.
More Case Studies
Designing a “Duplicate” feature →
I led the design process by validating the prioritization, creating the user flow, hi-fidelity designs, prototypes, & internal reviews. The internal tools feature had high adoption within just 4 days.
Running a Design Sprint to Deep Dive into Data →
I conducted a week-long design sprint to uncover opportunities to retain our subscribers, resulting in 4 projects validated & prioritized on our roadmap.
Re-designing Checkout with A/B Experiments →
I was the lead designer for all checkout flow experiments. This is the story of the non-linear path we took to reach significant increases in conversion over a 2-year period.