Campaign Profile Redesign

Product Designer | Feb - Apr 2018

Wefunder is a crowdfunding platform for startups. The profile is essentially a company's dating profile; investors use it to decide whether or not to make the leap. The redesign is a success if it sees improved conversion (% of users who click on“invest”, % who invests).

wf_profile_page.png

The problem:

Low conversion. This is contributing to low investment volume overall and thus low revenue.

The goal:

Increase conversion between (a) viewing profile and adding investment “to cart” and (b) “checking out” from cart, or confirming investment pledge.

The users:

  1. Experienced investors who are familiar with Wefunder/Reg CF and with investing — about 20%— and

  2. First or second time investors who are unfamiliar with Wefunder/Reg CF and do not have extensive background in investing or finance — the rest 80%.

Although the latter segment represented a large proportion of our users, we are focusing on the first because they are the power users of Wefunder who are most likely to be repeat investors.

The Process

Since Wefunder is a small startup and the allotted time for this redesign was 5 weeks, my design process was trimmed to accommodate. Although the product owner advocated against doing user research, I insisted and we found a compromise where I would do the recruiting, research planning, and interviewing myself.

  1. Discovery

    1. User Research

    2. Competitive analysis - SWOT

  2. Design & iterate

  3. AB Test

the old design

the old design

the new design

the new design

Step 1: Discovery

User Interviews

With the help of our data team, I was able to randomly select 15 users within the US who have invested in a company on Wefunder within the past 6 months. I then conducted interviews with all 15 to try to understand their investing process, the tools they employ, and general mindset throughout the experience.

Some key behavioral findings I was able to learn:

  • Users wait until the campaign is closing soon to invest

  • Users want to learn about the founder and uses that as a gauge for the campaign’s viability

  • Users skip over the entire top text section to get to the “meat” of the campaign

  • Users want terms to be clearer. They want concrete information on the contract and not hypothetical information.

  • Users are really interested in the fundraising progress

  • Users don’t have a good anchor on how much is a good amount to invest

User Research

What could be improved with the current profile? Based on user testing with newly on-boarded employees at Wefunder, I was able to gather more granular usability pain points that generally broke into two main themes:

  1. The campaign profile does not adequately provide and highlight key info important to users

  2. The pages lack proper user education for those new to investing or Crowdfunding

With the pain points synthesized and ordered based on priority, I set out to ideate some solutions to tackle said problems.

Competitive Analysis

With an abundance of players in this space, I was able to do SWOT analysis for our direct competitors and other companies with similar business models.

Step 2: Design & Iterate

Knowing what the investors wanted, some best practices, and some mistakes to avoid, I set out four key things we could do with our design that could possibly help address the lack of information on our profile pages.

  1. Be Relevant

    1. Give only what they need to make sound investment decisions. Progressively disclose the rest.

  2. Ease Nerves of Unfamiliarity

    1. Account for the emotional aspect of investing in early stage startups. This can be a nerve-wracking process and we must consider that.

  3. Educate

    1. Use visual hierarchy to indicate to investors what is important, what is not.

  4. Give Signifiers

    1. Give nuggets to deduce what to do, how much to invest, and what to expect.

Get Feedback & Iterate

Throughout the ideation process, I was able to share my designs with the company and get feedback. To account for busy schedules at a high-growth startup, I instituted a system where I display my design solutions in our main eating/lounge area for one week, giving ample time for asynchronous feedback via stickies or dots. I also hosted public feedback sessions open to all on top of the direct product stakeholders so I can collect a more diverse set of feedback.

Screen Shot 2018-09-12 at 1.42.31 PM.png

The final solutions:

To address the user need to know the state of the campaign, we added a status bar in the hero. This status also includes a countdown clock that updates in UI based on how little time left to the campaign.

Variant A. Not a live campaign - can be after a campaign has ended successfully or failed.

Variant B. Counting down to a live campaign

In this example, you can see that the campaign will be launching in 3 days. This is to give users a way to familiarize themselves with the campaign so they are more comfortable investing once it launches. For companies seeking to raise funding, this meant that they now have a profile to direct their marketing efforts to in order to garner excitement.

Variant C. Live Campaign currently fundraising

This is an example of a currently fundraising campaign. At first glance, you’ll be able to see how much the campaign has raised compared to its goal with the yellow progress bar. As the campaign nears its final goal, the UI will update.

Variant D. Closing Soon

When a campaign is nearing its closing date, the countdown will start. When the clock starts is standardized, but can be opted out for companies with softer deadlines.

Let’s look a bit closer at the final designs

On the top left, we' introduced a bento menu for investors and the campaign owners to easily navigate between the numerous files and pages associated with a specific campaign. Documents that users used to look for and had trouble discovering are now neatly organized in one accessible place.

Founder information and top “Reasons you may want to invest” are moved to the top, corresponding with their importance to users. The image placeholder is our placeholder for a future iteration where each founder will include an “elevator” pitch in the form of a video. Similar to how VCs hear succinct pitches from the founders, our users will be able to watch the same.

Digging into The side panel

The biggest change here is introducing a placeholder within the input field. We heard from users that they often do not know how much is a “good” investment amount. With this implementation, we give users an anchor around what is ideal, and give the founders a way to customize how big or small they want the investments to be.

I introduced a “remind me” secondary call-to-action here to capture users who may still not be ready.

Below that, I introduced a section recapping the investment type, key terms, and additional educational material about them so users can access them where and when they want to.

live_campaign_side_panel_explanation.png

To address the problem where users tend to wait on a campaign, I proposed a new UI that follows a common discount treatment users might be used to in e-commerce. This is intended to encourage early investment and create a sense of urgency.

The terms of the deal are hidden at first load. This is our way of educating users on the most important terms for each investment type, and to avoid inundating users with excessive detail from the get-go.

If there are early bird perks

If there are early bird perks

If you expand the section with “see more terms”

If you expand the section with “see more terms”

These “pickles”

Each campaign has a set amount of perks that the fundraisers’ specify. Previously, these were listed in the body of the campaign profile where users may not look. I proposed that we tie these benchmarks to the perk levels the campaigns offer, so we minimize users’ mental load for deciding how much to invest.

The mental model around investments is that they must be large sums of money. Crowdfunding directly challenges that assumption and this design solution calls attention to that.

Tiered Progress Bar

Each company sets both minimum and maximum fundraise targets. Since the campaign fails if the company does not reach the minimum, the primary focus before then is the minimum goal. Initially, the progress bar indicates progress towards minimum goal — indicated by yellow. Once the minimum goal is reached and campaign successful, the progress bar changes to green, with progress towards the maximum goal.

This is to combat the tendency for users to wait until the very last minute to invest, leading to the campaign failing to meet the minimum and the users missing out on an investment opportunity. Prior to a campaign meeting the minimum, the overall goal is not relevant. This design shows only the relevant goal so the scale is more accurate, and users are able to gauge the status of the campaign more accurately.

The Mobile Results

There is no pickle interaction for mobile — with the additional real estate of desktops, I decided to add that interaction. The layout for mobile is slightly different, with terms and perks taking the top position before details about the company.

The CTA is always sticky at the bottom. The secondary navigation includes a fraction of the menu items compared to desktop, containing only essentials. Though there are other smaller differences, the general layout and usability is consistent between mobile and desktop.

The Outcome?

Overall, it was a success!

We used six companies with open campaigns before and after the launch of new profiles as reference points. We looked at two conversions: (a) between profile view and adding the investment to “basket” (i.e. clicking “invest”) and (b) between adding to basket and confirming an investment.

Conversion (a) increased from 17.1% to 21.4% — a 25% increase;

Conversion (b) increased from 10.8% to 15.0%. — a 39% increase.

From unique page views to unique confirmation page views, there was a 74% increase.

It’s important to keep in mind that those figures have numerous confounding variables since conversion could be tied to the quality of companies launched and we had a record July.

Mostly, we were able to touch on each of the four goals. Since the conversion improved, I can conclude with some reservations that the new design was able to help first time investors feel less nervous about investing.

A few things I could’ve done better

Release Prep

Since this is such a big and noticeable user-facing change, it would’ve been better to prepare the founders for the release. Many founders, after spending months perfecting their profiles, were upset that seemingly without warning the layout was completely different.

Tracking Metrics

More data tracking. Since we’re moving so quickly, it’s hard to have precise data for every part of the product. However, next time I would insist on doing at least tracking conversion on the “invest” and “follow” buttons before and after the release.

More user interviews and testing

More user interviews, or validation testing. It would delay the process by a week or two, but it’d be worth it for the insights if we could afford the time. These results can be used to encourage adoption. It was not possible to do A/B testing without greatly delaying the progress.


If you’d like to see a live version of the profile, go to wefunder.com/explore to choose any currently live campaign.