Designing a Creditor MVP: Contribution Card

@taurean and I did a two-hour design jam to create an MVP plan for the Creditor based on the Deep Work prototype and the Creditor Design Sprint of last week.

For this first step, we tackled the Contribution card from the All Contributions view, tweaking it to match our needs and aligning it more with our values.

This update incorporates some of the considerations and concerns raised by participants of the sprint, people who tested the DW prototype thereafter, and my and Taurean’s own design considerations and thoughts.

First, a look at the new Contribution Card for the overview page (Creditor home):

Some key points we addressed:

  • Emphasize the contributors of a contribution, not who logged it in the Creditor;
  • Change voting labels to impact-oriented ones matching SourceCred brand & language;
  • Shuffle content order to encourage reading the contribution’s Why & What, before voting
  • Distinguish between Project Tags (#Creditor) and Disciplines*

We also removed the Abstain Voting action because it seems unscalable, plus, participants should not be expected to pay attention to every single contribution.

Vote weighting and scoring

We also spent a good chunk of the two hours discussing voting weight & activity concerns. While we (obviously) did not come to any conclusive decisions on the mechanics, from a user consideration perspective we wanted to Keep It Simple:

  1. participants are not confronted with vote weights or counts (for conviction-style voting) beyond the four labeled options;
  2. a fibonacci score system is used behind the scenes, with:
    • 1 = Common
    • 3 = Significant
    • 5 = Major
    • 8 = Invaluable
  3. Voting has a time-scoped allotment, e.g. one month, and each fibonacci weight serves as a percentage of all your votes that month, e.g. one Invaluable vote counts for 8%
  4. Once a user passes the 100% threshold with voting within a month, all their votes are shrunk in ‘size’ (%) to keep the total amount at 100%. Explained with example:

Scenario:

  • A participant makes 10 Invaluable votes, amounting to 80% of their allotment;
  • They also add 4 Major votes, of 5% each
    • They are now at 100% and all their votes count their default weight
  • The user adds another 20 Major votes, diluting their vote total
    • Their vote total would now be 200%, and so each of their votes becomes halved, i.e. all their Invaluable votes count for 4, and all their Major votes count for 2.5

( * branches / trunks / domains of expertise / departments; this would clearly be an editable label per instance)


@Creditor Contribution entry (simulation)

Show details

Title: Created an MVP-oriented version of Contribution Card
Who: @KuraFire (66%), @taurean (34%)
What & Why:
Incorporating user, engineering, and design feedback on the Deep Work-delivered prototype design for Creditor Contribution Cards, further aligning content and interface elements to SourceCred’s needs and branding.

Impact Value: (no votes yet)

Taurean and I arrived at consensus about our breakdown (66% / 34%) due to my taking notes and providing lots of context and explanations.


Work / time breakdown

Show details
  • Design Jam: 2 hours for 2 people (4 person-hours)
  • Refine Card design to adjustable & reusable components: 4 hours
  • Writing this post & itemizing changes (incl. above visual): 2 hours
3 Likes

Missing from this UI

A notable omission from this (for the time being and/or for the All Contributions overview version) is the dependency or “parent” node, i.e. if this Contribution builds on another node, that information is not available in this view.

Open question to the community: how critical is that information in every version of the Card view?

1 Like

We can have “edit contribution” and “raise concern” take up the same space depending on the users’ relationship with the post. If they drafted the post and are able to edit they likely aren’t going to raise a concern themselves.

1 Like

Awesome!

The shift from common/rare/epic/legendary to common/significant/major/invaluable feels a lot better, and the positioning makes a lot more sense. I wonder if there is a way that we can add some kind of subtle visual indicator to the card when you haven’t voted on it yet. This doesn’t feel necessary for an MVP but might be something to iterate on with more user feedback.

The only thing that feels a little off is the project tag. It feels a little disconnected in the top corner (particularly with the longer title on the card - hard to say how often titles will be that long though) and the pointed side going to the right makes the alignment feel off.

Overall loving all of these changes. Thanks so much for all this great work, y’all!

2 Likes

Awesome work, and major props for iterating so quickly. It’s great to have some momentum on the Creditor.

I think this is a major improvement, and it’s something that I personally had not fully noticed was off about the first round design, but in retrospect it was bothering me in the first prototype.

I agree with Mags that this is a big improvement, thank you. I think the original labels were cute but the gamer language was a little inaccessible for me personally.

These two seem like modest improvements to me, a good start but I think we still have work to do to really nail this aspect of the experience. I would like to get another round of user testing in to validate/expand on this feedback.

I think this is going to be nearly impossible to get “right” out of the gate; I think we should accept that we don’t fully understand the dynamics of how people vote in the current paradigm and introducing this new interface is almost certainly going to impact behavior in significant and unpredictable ways. I’m not saying don’t think about this at all, but I’d just encourage all of us to focus on what we can make live so that we can start gathering meaningful data. Maybe we should make a point of scheduling a cred-vote-weighting jam for 3-4 weeks after the initial MVP goes live, so we can evaluate initial results together.

Nice work, and thank you!

2 Likes