Opportunity

We offer over 12 website themes, but their complexity makes website setup challenging for our creators. To address this, we plan to streamline this by introducing a single, standard theme paired with a redesigned, improved website editing experience. This simplification aims to accelerate new creator activation, reduce time-to-value, and help creators launch their membership business more quickly.

Goal

Deliver a fast, intuitive, and streamlined website theme
Consolidate website settings into 1 central location in the new website editor
Enhance the theme's mobile web performance, ensuring an optimal user experience.

Hypothesis

We believe that video creators find the Uscreen theme setup difficult, time consuming, and overly robust. If Uscreen offers a greatly simplified and standard website theme setup, these creators will have a higher chance of success and receive faster value from their audience members.

Success Metrics

We will know if we are successful if:

We decrease the average time to first GMV, currently at 40 days (2023 average)
All new customers use the new theme when we roll it out in July 2024

Research & Analyze

Engaging directly with our customers is my preferred approach for gaining a deeper understanding of their pain points and needs. Hearing their feedback firsthand not only helps eliminate guesswork but also ensures we avoid making assumptions. For this project, I also conducted in-depth conversations with our onboarding team to gain insights into their current website theme challenges.

Customer interviews

After gathering feedback from our customers, our onboarding team, and reviewing user-submitted suggestions, we identified several key pain points and opportunities for improvement:

Existing Websites: Many creators already have websites and prefer not to migrate them to a Uscreen theme
Launch Delays: Themes and website-building requirements create friction, delaying membership launches and causing frustration.
Poor Mobile Experience: The mobile web experience is suboptimal.
Disconnected Editing: The theme editing experience is housed within the Uscreen admin, making it feel disconnected from the membership website.
Scattered Settings: Website settings are scattered across the platform—users want a centralized location to review and manage them efficiently.

Current product analysis

Since we already have a website editor, my goal was to evaluate its current strengths and weaknesses and identify areas for improvement.

This process helped me uncover patterns in how our users interact with the platform and understand their mental models for customizing their membership websites. It was also crucial to ensure that we retained all essential functionality and settings from our existing themes. We wanted to avoid making our new standard theme feel like a step backward.

Additionally, I observed that settings are scattered across the platform, creating a disjointed and fragmented user experience. Streamlining these elements became a top priority.

Ideate & Design

Competitive Analysis

Before I started wireframing I did a competitive analysis to explore how other website builders are designed. This helped me identify what works well and what doesn't from a user’s perspective. It also allowed me to uncover common usability patterns that users might already be familiar with, ensuring a more intuitive experience. My analysis included platforms like Patreon, Substack, Shopify, Netflix, and Wix.

Lo-fi WIREFRAMES

Building on our insights, I sketched out various design approaches to help us quickly refine options that aligned with our constraints. The primary challenges these sketches aimed to address were:

Should the new website theme cater to individual Creators or larger content businesses?
What settings should we offer for the new standard theme, and how/where can users customize them?

HI-fi DESIGNS

Once I was confident with the wireframes, I transitioned to a new Figma file to create high-fidelity mockups of the new standard theme and editor. This allowed us to experiment with hover states and explore ways to make key information easily accessible for end users.

I leveraged our weekly product meetings to present these designs to stakeholders, ensuring everyone stayed informed about the latest progress and had an opportunity to provide valuable feedback.

Validate & Iterate

Now that we had a working prototype we were able to get feedback before releasing this to our customers to make sure the design was intuitive and solved the pain points we found from our initial research.

User Testing

We tested the prototype on 10 customers and found some room for improvement:

Copy changes for clarity, leverage existing help articles
Website navigation is hidden in hamburger menu when settings drawer is open
Customers wanted to see example sites built on the new standard theme to get an idea of ‘what was possible’
User errors when entering URLs
Wants a custom URLs in navigation to have the option to open in new tab
Issues with dark mode colors and accessibility
Confusion around how to enable calendar or community in website

Design Iterations

Despite my efforts to make the initial designs as clear as possible, users still struggled to understand certain elements of the UI as pointed out above. After revising the designs and reviewing the updates with those users, we confirmed that the adjustments successfully addressed the initial issues identified during testing.

Development

Once we felt comfortable with the UX details we were ready to work with engineering to build the feature. Before our kick-off meeting with engineering I worked with my Product Manager to breakdown the requirements and add any edge case designs (error states, empty states, hovers, animation).

Engineering handoff

Every project begins with a kickoff meeting involving Engineering, the Product Manager, and myself to ensure alignment and address any potential blockers upfront. As a remote team, we typically establish a dedicated Slack channel to facilitate seamless communication across all teams and provide quick access for questions.

Given the scale of this project, we brought our developer into the design process early. This collaboration ensured they were deeply familiar with the goals and vision from the start, streamlining development later on.

QA review

Once engineering pushed their first draft to stage I was able to start the QA process. I like to mock up any design updates needed versus typing it out as this can be much easier to understand. I added requirements to the feature outlining where the execution didn’t align with the initial design.

Retrospective

This was one of the most complex features I have worked on at Uscreen - it required a huge amount of cross-functional effort at every step of the way.

What went well

Great communication across teams allowed us to be able to make updates quickly when new requirements came in later in the project (e.g. allowing users to have custom URLs in their navigation).
We involved the CS, sales, and onboarding team early in this project to keep them up to date with the changes we would be implementing and this would be affecting their workflow directly. We helped them update their scripts to reflect the new standard theme and helped them understand how to talk to customers about the changes.

Lessons learned

Simple changes (like auto opening the settings drawer by default and implementing drag and drop) were able to make large improvements to the overall UX.
Websites with custom coding were the most difficult to transition to the new standard theme and required more customer hand holding from the CS than we were expecting.

Did we achieve our goals?