[Project] Profile page iteration

[Memo-Es]

Overview [Edits by @BenJam]

It is a very weird experience to have everything looking like a Collective, which causes problems in discoverability, and capacity for our users to differentiate one profile type from another, making it harder to interact fully with the platform.

This causes confusion, especially between organisations, hosts, collectives, projects and events. Profile pages have very different jobs, depending on what they're for i.e.

• Events > sell tickets, attract sponsors
• Hosts > accept applications
• Users and organisations > say something about myself and share the projects I contribute to
• Collectives and projects > attract sponsors, present financial information

Our current page structures and formats are so generic that they limit our ability to effectively meet those needs.

This is particularly weird in the case of Octobox which has both an organisation and a collective:

A user	An organisation	A collective

We have discussed differentiating our profiles, so this project is an excellent way to start, by solving what doesn't work so well with our current profile page master.

Related issues

• Improve cover image cropper #5678
• Hard to donate, which is nuts #2228
• Users not finding contact under actions menu #4760
• Move hosted accounts to a separate section #5457
• Expense payee should not be considered contributor #5640
• Surface the Tags onto the hosted Collective's cards under the Host's 'Contributions' section #5570
• Differentiating Independent Collectives and Fiscal Hosts without Collectives #4946
• Collective page: apply new design for section's empty states #3220
• Allow users to update more things directly from the collective page instead of having to go to settings #5013
• Surface Github contritbutors #2103
• Get rid of the "bubbles" graphic for the profile page hero #7056

Problem statements

Everything on Open Collective looks the same (collectives, users, organisations, projects)

it is a very weird experience to have everything looking like a Collective [this] causes problems in discoverability, [and] mak[es] it harder to interact fully with the platform.

working on Open Collective as an active user is much like browsing as an outsider. I need to know which page(s) to go to, to do what I need to do.

Ownership

Owner: @Memo-Es

Resources

Design

Plan

The way I see it, these tweaks and improvements can be boiled down to three main issues: (Issues documentation pending)

• Redesign the Collective page header
  • Bigger, clearer buttons (Website link, and main action)
• Redesign the 'sections' feature of the Collective page (General logic revamp, subsections, design facelift)
• Design an alternative navbar for Collectives profile pages (We discussed during the navbar updates the possibility of having an alternate version of the navbar for Collective's profiles, one that included contributing as the main CTA)

Next steps

• We can schedule this project as a candidate for shaping the next sprint
• Solve the issue about the cover image cropper presented in Improve cover image cropper #5678

[alanna]

Can #5013 be added to this issue?

[Memo-Es]

I also think #1445 is part of this milestone project

[Betree]

Feedback from @kaylarep as part of #5195 (comment):

creating different options for viewing a Collective's page: a 'Section' view or 'Timeline' view.

Timeline view: like many social networks, a chronological view (most recent first) with all items mixed together: financial data (Babel approved 7 expenses), Updates (Babel published an update), Misc updates (Added Jack as an admin), etc.

Related issue for a public timeline: #5767

[kaylarep]

to expand/brainstorm a bit, was thinking there could 2 'View' options: a "Section" view and "Timeline" view

Misc updates (Added Jack as an admin),

• I would add (regarding the oversharing of information being a security risk) that I think the 'admin add' info can be very vague. e.g. "CollectiveName added a new Admin" or "CollectiveName removed an Admin"

  • Also, I don't think it's necessary to include times in this public view, for the same security reasons.

  • I think these 'Admin' updates might be the only ones that don't appear in 'Section' view that would appear in 'Timeline' view, but maybe there are more

• Perhaps in the 'Timeline' view, we could lump things together so there aren't tedious lists
  • e.g. "CollectiveName disbursed $250 on [date]"
    • "CollectiveName received $200 on [date]"
    • or maybe even "Collective name processed 31 Expenses on [date]"
  • with focus on 'Daily summary' type of information rather than itemization
  • with options to click for more details -> then this could turn it into Section view? I'm not totally sure...

[kaylarep]

@Memo-Es another (small) pain point that just came up, might be worth considering including: #5862

[Memo-Es]

Design specs

• Full design documentation here

Main goal

Push forward a series of updates to the profile page master design, a.k.a. "Collective page" that help us mature one of our main features, and for it to become a tool for users to stay in the platform and use our features to the fullest. We seek to differentiate the profiles of our different users on the platform, so we help the experience by distinguishing what's inside the platform, smoothing the adoption of our other features.

Immediate goal (Q3S2)

Define this project strategically. It is a significant and complex project that will need different phases to "complete" a full iteration in production. This sprint cycle is about asking the right questions and working closely with users and key team members so we can bring forth the right design proposals to analyze as the first round of updates to the profile page.

We will navigate the tensions between thinking big and long-term, designing the solution that should be and ensuring we launch small bits along the way that smooth the change to the new page experience. Helping us test quickly and have validation early in the development process.

Definition process:

What a profile page inside www.opencollective.com should do?

• For Collectives (Main persona)

• For Fiscal Hosts

• For sponsor organizations

• For users

• For events

• For projects

Why are Collective admins our main persona?

• Alanna Irving explains in a thread on slack:

This speaks to a bigger strategic question about how we market our product. We essentially have three different products with very different customers and value props: 

1. Hosted Collectives

2. Fiscal Hosts

3. Independent Collectives. 

2 only works when someone is very motivated and really digs into our docs etc., or when we create a first-party host ourselves. 

For case 3 we offer minimal support and virtually no marketing or onboarding for. Like 99% of our revenue comes from 1, and that’s been our strategic priority explicitly for the last few years. Personally, I think there is a lot of value in 2 or 3, but right now, it’s a sideline without a really viable revenue stream, and we have explicitly made our website and key marketing with Hosted Collectives in mind. So yeah, that’s where we’re at.

We’ve always kind of tried to tell all those stories at once, not to leave out 2 and 3, but honestly, it doesn’t work very well.

We are focusing on the profile page for Collectives and then tweaking that base model to adapt to the other profile types.

What goals do we want this project to achieve? How do we measure success?

• Better retainment

• A wider use of our features (More Collectives' activity on more features)

What changes do we need to make to our sections' structure?

Goals	Contribute	Connect	Budget	Contributions	About
Goals	Contribute (Tiers)	Updates	Overview	Recurring contributions	About
	Events	Conversations		ContributionsAll contributionsHosted CollectivesHosted fundsHosted eventsFinancial contributors	Our team
	Connected collectives
	Top financial contributorsAllTeamFinancial contributorrs
	Projects

Next design updates:

So far, we identify a couple of strong areas of opportunity to define the new profile page in the next step:

• Redesign the Collective page header

• Bigger, clearer buttons (Website link, and main action)

• Redesign the 'sections' feature of the Collective page (General logic revamp, subsections, design facelift)

• Design an alternative navbar for Collectives profile pages (We discussed during the navbar updates the possibility of having an alternate version of the navbar for Collective's profiles, one that included contributing as the main CTA)

[kaylarep]

Thanks for these specs breakdowns. Was thinking here:

What a profile page inside www.opencollective.com should do?

• For Collectives (Main persona)
• For Fiscal Hosts
• For sponsor organizations
• For users
• For events
• For projects

I think it's important to identify that 'users' encompasses:

• Donors (Financial Contributors)
• Collective Admins
• Collective Expense Recipients
  • volunteers to be reimbursed,
  • contractors getting paid (& sometimes landlords, vendors etc. getting paid)
  • grant recipients

because each of these user groups has different needs & identities and will interact with the platform in a potentially very specific way. We want to give those users the simplest path, not expect them to jump through the same hoops /go thru platform education like a Collective Admin will.

[kaylarep]

This project also aligns with the Funder/Host dashboard project I think. If we are going to redesign the collective page, we need to keep this overlap in mind so that we aren't duplicating information

[iamronen]

Additional issues with the current collective profile:

1: Disorienting & Inconsistent Top-bar navigation

Click on Budget:

1. This currently feels disorienting. I thought I had transitioned to another page. I assume that if I want to go back to the main page I need to click on the collective icon - or back on the browser (which was the pattern that I ended up adopting).
2. However, if I scroll up, I realize that the header is still there ... there is a point where the collective icon disappears, the menu shifts to the left and the entire header comes into view.
3. However if I scroll down to the budget ... the topbar does not collapse ... it simple disappears from the view frame. A collapsed and position-locked menu could actually be useful when I am navigating further down in the page (by just scrolling). Perhaps if it behaved that way it would train me to understand what has happened when I click on "Budget" (or any other scroll-inducing menu item).
4. AND ... if I scroll down to updates (https://opencollective.com/opencollective) and click on "View all updates" I DO end up on a page that has a collapsed header that does not scroll up to a full header (because apparently this time I have been routed to another page? https://opencollective.com/opencollective/updates).
5. AND if from 4 (above) I click on Budget again the URL reverts to the previous format https://opencollective.com/bushwick-ayuda-mutua#category-BUDGET (apparently without a page reload) and the full header is back.

This behavior is inconsistent, unclear and is a confusing experience.

2: Why are Events under "budget"?

It seems that Events were conceived as a money-raising capability but their adoption has given a life that is indenepdent of fund-raising. Having them under the "budget" menu is confusing and difficult to find.

If I am looking for an event, it may not cross my mind (<-this has happened to me numerous times) to look under budget (<- and I have now been twisted into thinking this way).

3: Why are "Updates" under "Connect"

Does connect have anything else under it? Why is Updates not a direct link (like Budget).

4: Integrate Top Financial Contributors with Financial Visualizations

Redesign this section to bring into the updated visual language of the page.
Integrate it with the new financial visualizations so that time filtering can also be applied to it.
Consider adding a sibling element that show top paid people for expenses.

5: Fix Section Containers

(the following comments are made based on a full screen view and need to be reassesses for smaller/mobile screens)

The following containers/sections leak beyond the page parent grid and the resulting horizontal scrolling is ugly and annoying (perhaps this is more intuitive on mobile devices):

1. Contribution Tiers (eg: https://opencollective.com/bushwick-ayuda-mutua)
2. This is all of us (eg: https://opencollective.com/bushwick-ayuda-mutua)
3. Events (https://opencollective.com/opencollective#category-ABOUT)
4. Projects (<- probably, I do not have an example)

6: This is All of Us

1. There is repetition of information since team is also shown separately. Perhaps team can be left as its own section and the team can be removed from this section and it can be reframed as "contributors" ... and perhaps made more useful (see next comments).
2. Beyond a certain number of people (fortunately, there are many examples of this) this becomes a useless overload of information. It may be more beneficial to show:
   1. Visual page scrolling instead of continuous scrolling.
   2. Just small avatars for each contributors.
   3. Hover over (touch on mobile?) avatar to show expanded card view.
   4. Filters: All, one time, recurring
   5. Visual indicators:
      1. To discern between individuals and organizations (eg: border color).
      2. To give a sense of scale of the contribution (eg: thickness of border color)
      3. An indicator for one time or recurring (eg: added icon for recurring)

7: Contributions

In profiles where a contributions (distributed from the collective to other collectives!) section does show up, the information is not very useful and has what sometimes seems like incoherent duplicates - see ESLint appearing twice in screenshot from https://opencollective.com/indeed :

[Memo-Es]

Thank you, @kaylarep and @iamronen, for your comments; here are a couple of follow-up thoughts:

@kaylarep, on the pathways for people to do something specific (Submit an expense, request a grant) vs the experience for Collective admins. I agree, one of the goals for this project in the mid-term is to help us separate the platform (workspace) from the public side (Collective pages, marketing, etc.) #6285; I think the action to submit an expense should not be mixed in the public profile page as it is now, more about this to come in the first round of design proposals.

@iamronen, I value that we are aligned about the problems we both see on the Collective pages:

1. Redesigning the top bar navigation and its behavior it's one of the goals of this design round
2. Same, expressed in the design specs as "Redesign page sections."
3. Connect has two elements, Updates and Conversations. @Betree and I had already raised an issue to potentially merge them Review of the Conversations feature #5784. It is also related to redesigning the profile page sections.
4. I had already proposed this with the budget overview project; the profile page update will also follow up on this.Annotation on 2022-09-28 at 09-30-45
5. That horizontal scrolling deserves to be considered as well, I agreed
6. Considered under "Sections redesign."
7. Ibid

Thanks again! I'm preparing a presentation to show what we're tackling this sprint, taking these things into consideration

[alanna]

I'd be interested in giving feedback on the design of Host pages specifically. Let me know a good time/way to do that.

[Memo-Es]

Week 4 update

• Kickstart design process (1st round of drafts)

[kaylarep]

apologies if this is a duplicate request, but its really important that hosted collectives are easier to find on a host's profile (and maybe even a quick way to show that a collective is part of a greater network on the Collective profile).

Right now, if I want to find OCF's hosted groups (and its the only public place where people can see this information), I go under Contributions. Not at all the right place for this.

(This should also be a part of the #3892 )

[Memo-Es]

Week 5 update

• Kickstart design process (drafts, sketches)
• Demo of main proposal

[BenJam]

@Memo-Es can you link to the demo above?

[BenJam]

• sync up, share existing resources
• decide on scope for this sprint and doc here

[tomsusemihl]

To continue this project, I'm planning on doing;

• Define Main Goals
• Translate previous feedbacks into demands (Watch previously done interviews)
• Personas Demands Definitions
• Sketch different hypothesis
• Turn hypothesis into prototypes
• Present and gather feedback with team

For next cycle:

• Usability test it with multiple users (Manual moderated AB Test is an option)
• Validate and push to UI phase :)

Feel invited to follow up and add comments here: Figma - Profile page design update 🤗

[Memo-Es]

Week 4

• First round of design proposals

[iamronen]

@toomuchinformation & I had a conversation yesterday and work-shopped some ideas together in rough wireframes. This helped outline the challenges we wish to tackle next:

1. Discern between collective profile pages and other profile pages.
2. Use dedicated collective profile page navigation to navigate within a collective (and to subtly internalize the core purpose and narrative of the platform).
3. Communicate that Events and Projects are related to Collectives.

We don't yet have a good notion of how/why potential contributors arrive at collective profile pages and what drives their decision making. We aspire to learn more about this, but for now we focuses on one discerning question:

is a potential contributor here because they have already decided to contribute or did they arrive in order to make their decision?

It feels to me important to re-iterate that:

1. We are looking for a first move that will open the door to a lengthy unfolding process that will both improve the whole (collective profile page) and its parts.
2. The first iterations will likely be experimental and only used internally (or by invite) to test the waters.
3. This is a core user experience on the platform that has been around for a long time and many users are familiar with and depend on it. Changing it is going to cause friction. Therefore (in addition to internal deployment and caring design) we should communicate about the efforts we are making on this project as early as possible to both allow for feedback and prepare people for the change.

1: Discern between Collective Profile Pages and other profile pages.

Currently all profile pages look the same and we want to make a clear distinction between two sets:
Set1:

• Individual (person) Profiles
• Organization Profiles
• Fiscal Host Profiles
• Fund Profiles
• Collective Profile

Set2:

• Event Profiles
• Project Profiles
• Event Profiles

The most prominent way (wireframed so far) to do this seems to be to remove the OpenCollective header and leave in its place a small control that takes you back to the platform. This way when you arrive at a Collective page your attention is drawn towards its internal workings and not distracted by the OpenCollective header which competes for attention.

2: Collective Profile Page Navigation

A main navigation element within the collective profile page can look something like:

1. About
2. Budget
3. Contribute
4. Connect

This presents numerous potential benefits:

1. It repeatedly tells the story of the platform, every time anyone looks at this menu they are effectively being subtly trained about what Open collective is about.
2. It makes it possible to break up the single long profile view into a few separate views. The existing profile page containers can be divided into coherent narrative-supporting views.
3. If it is locked in place (does not scroll away) it makes it easy to read about a collective, then, when you are ready you can look at its budget and when your ready you can continue on to contribute. It is always there to tell you where you are and where you can go.
4. It makes "contribute" always available and accessible and in context. Also, when you decide to contribute you have a view that is dedicated to that (eg: Tiers) without the distraction of other content.
5. It hints at a subtle assessment process (which we want to research further in the future):
   • 1: discover what the collective is about
   • 2: see how they handle money
   • 3: decide if you wish to contibute

3: Relate Projects and Events to Collectives.

This felt like the most challenging issue and we did not yet reach something that felt like a good solution, however we did realize that:

1. We would like projects and events to be related to their collectives instead of being "separate" profile pages on the platform.
2. The collective profile navigation pattern (see above) fits well onto projects and events. This hinted at the possibility to apply the same collective profile UX pattern to both projects and events - so they would still be separate profile pages, but their headers would clearly associate them to their collectives and be consistent in terms of narrative (about, budget, contribute, connect).
3. We also explored the possibility of using modals within the collective profile page for projects and events.

[Memo-Es]

Week 5

• Complete design proposal
• Implementation plan proposal (Options A, B, lifecycle, etc.)

[iamronen]

A pitch for engaging with this work is proposed for FY23Q1C2: #6415

[tomsusemihl]

• Define what specific features we are working on this cycle
• Get feedback from people closely involved on the project

[tomsusemihl]

• Usability Testing
  • Invite people
  • Set up test tasks and questions on Testing platform
  • Test it!
  • Iteration round (if necesary)
  • Analyze results and validate design

[BenJam]

@tomsusemihl was the user testing on this ever done? Can we add the results to https://coda.io/d/Make-Open-Collective_dnHLKv7oLV0/User-Research-Center_sulZq#Research-Efforts_tucOn/r20&view=modal