Wefunder Company Profile Redesign

live_campaign_above_fold.png

The Overview


  1. State problem & Set goals

  2. Understand the problem

    1. Current situation?

    2. Ideal situation?

    3. Challenges?

  3. Competitor Research - what are our competitors or similar products doing?

  4. Specs - I made a list of must have, should have, and nice-to-have features and actions for the user.

  5. User flow - I made a rough flow to capture all the pathways the user could’ve taken to land on this profile page.

  6. Sketch — old fashioned pen and paper style.

    Pen and paper means I can explore many layout options much faster.

  7. Feedback & Iterate — design critique with some teammates

    We’re lucky to have floor to ceiling patio doors at my office — so I took full advantage of it by plastering my mocks all over. Throughout the day, teammates marked their comments on the mocks via anonymous post-it.

  8. Final mocks to Engineering. Design Review

  9. Launch!

  10. Retro


 

New Design

Old Design

the_old_profile
new_live_campaign_top_of_fold.png
 

What is it?

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.

Measuring Success

The redesign is a success if it sees:

  1. Improved conversion (% of users who click on“invest”, % who invests)

 

Problems with the current design

  1. Layout is outdated. It hasn't changed since 2016 and a lot of design trends have changed since.

  2. It is not performing in various aspects:

    • Indicating clearly the investment and contract type

    • Indicating clearly the status of the raise (pre launch? closing soon? or?)

    • Putting correct focus on key facts and founder info — the two best indicators for whether or not to invest

    • Company profiles are the "launchpad" for most companies — meaning that users come to profiles in order to navigate to other pages related to the company: Form Cs, updates, the manage and edit pages for founders, etc. The current profile does little to indicate and nothing to help users navigate.

    • No easy "lesser-commitment" choice for the user if they do not want to invest at the time.

    • Provided no sense of urgency for closing soon companies.

    • Provided no sense of excitement/momentum for companies launching soon.

  3. Not doing enough to educate the users

  4. Placing too much focus on the perks of the investment. This could easily mislead investors into equating Wefunder to other crowdfunding platforms like Kickstarter or Indiegogo.

 

Main goals for the profile

Be flexible

Be succinct

Educate

Don’t sell

  • Accommodating the different contract types, company industries, campaign states, and terms.

  • How do we cut down as much as possible, without losing the integrity of the page?

  • Using visual hierarchy to indicate to investors what is important, what is not.

This is people’s money we’re talking about. The profile needs to convey the legitimacy of the investment so users want to invest, not trick them into thinking they will make millions.

 

The “Process”


 
progress_comic.png

3.

Research

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

What are our competitors or similar companies doing? I found the similarities and differences between profiles of Funders Club, StartEngine, NextSeed, SeedInvest, Kickstarter, Indiegogo and listed out pros and cons of them. most had a main image + video format that highly resembles Kickstarter, with long form text section immediately below. Most had secondary navigation. Some had dedicated “terms” sections occupying the side of the content area. All of these were good aspects to draw inspiration from.

4.

Specs

IMG_1792.jpg

Must haves, should haves, could haves, and would haves.

5.

User flow, sketch, & iterate

Screen Shot 2018-09-12 at 1.42.31 PM.png
  • A potential investor could’ve landed on the company profile via our explore page, a direct link from founders, or via ads. A user who is from a direct link or add would not know enough about Wefunder or Regulation Crowdfunding for them to feel comfortable investing. The profile will need to accommodate for such users.

  • Usually I end up scrawling all over sheets and sheets of paper. I mostly don’t elect to keep them after moving to medium-fidelity. Silly me.

  • We’re lucky to have floor to ceiling sliding doors covering a significant portions of our company. So I have a habit of printing my mocks and sticking them on the doors and soliciting feedback from the entire team. For the profile hero redesign, I did at least three rounds of this. A lot of ideas were introduced then gutted then introduced here.

 

Let’s get to the exciting part:


 

There are slight variations for different campaign states:

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

new_not_live.png

B. Counting down to a live campaign

new_launch_soon_countdown.png

C. Live Campaign currently fundraising

live_campaign_above_fold

D. Closing Soon

closing_soon
 
new_profile_annotation.png

The photo section is replaced by a video if the company has one. The intent here is for a future goal of having each company’s founders answer quick questions in a shark tank style Q&A showcased this. Investors most want to see how a founder carries him or herself. The video section is reserved for that purpose. In the meanwhile, since they don’t have a shark tank video, they can upload another photo or video of their own.

 

The side panel


live_campaign_side_panel_explanation.png
 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”


CTA_button_interaction_no_annotation.png

The intent of this is to give investors grounding. Often times people have no idea what's a "good" investment amount. Should it be $100? $500? $50,000? Of course you should only invest what you are comfortable with losing. But because it's a common mental model that investments in companies are large sums of money, investors sometimes assume they need to be wealthy to be an investor. These "pickles" are intended to show the investors otherwise.

Additionally, I wanted some interaction here so you only show information (perks or pro-rata rights) when it becomes relevant. Plus, all the necessary information in one place.

 

Tiered Progress Bar


progress_bar_ux.png

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.

 

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.

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.

RE: The Four Goals (Be flexible. Be succinct. Educate. Don’t Sell)

Mostly, I was able to accomplish the original goals set out, with the exception of “Don’t Sell”. Unfortunately, given the context and situation, that has slightly given way to the more important (and short term) goal of increasing revenue and ensuring the company survives.

On-boarding the Team

To make sure all team members are familiar with the new additions and changes to the profile, I did a run-through during an all-hands covering design changes as well as the reasoning behind each decision. This ensures that team members understand the underlying motivations behind each aspect of the product and are better equipped to answer user questions if necessary.

 

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. It didn’t matter that this actually might be beneficial to them, surprises when it comes to fundraising are never good. Next time I would coordinate with points of contact who are dealing with founders to ensure that founders are forewarned about the profile update beforehand.

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.

Team Member Guidance

More guidance for the storytellers on the Wefunder team who would be building new profiles. What are the dimensions of the photos? What about the new video?

More user interviews and testing

More user interviews and user 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.




Questions? Comments? Shoot me an email, I’m happy to talk.