Polishing the website

Hello friends!

I’ve been working with @brndnkng and @zetto.plus to bring the layout & content of the new website to a place where y’all feel comfortable sunsetting the existing site. Over the upcoming weekends, I’ll be making some changes on pull requests, and posting summary updates here so there are opportunities for feedback. The focus is on / and /about, but I’ll necessarily touch some other bits as well. For details on what I’m addressing, check out this GitHub project.

8 Likes

For those who don’t know me, I’m a volunteer-coordinator over at BSA’s Open Tech Development group, which does projects like Dual Power App. I initially came into Resonate a bit over two years ago via @zetto.plus; I’ve never been super active but I like to check in. My background is in design, but been writing code for embedded+web since high school. I have a website and a GitHub if you want to see what I’ve been up to.

3 Likes

I’ll have specific changes to share in my next update, but to kick us off, I wanted to share my thoughts about how I imagine things coming together:

Eliminating redundancy

There are four pages that talk about Resonate’s model & values—/, /about, /coop, /manifesto, and /pricing—and many of the notes I’m responding to are about content being too dense and long. Much of that comes from rephrasing the same concepts across multiple pages; e.g., manifesto blurbs in /about, blocks from /coop directly copied over to /, etc., so the biggest thing I’ll be doing is bringing these pages back to their roots.

I understand why the redundancy is useful—giving people context without sending them down all sorts of rabbit holes—but I believe a combination of condensing the copy and adding links can be done well to mitigate that concern. Plus: clean, tight pages will make exploration more fun & informative.

Visualizations

On the fun & informative note, there are a few places where I’ll be doing graphics to replace or augment copy:

For /pricing, I’d like to redo the stream2own graphic into something that communicates the progression more literally. Think stair steps, or a high striker.

For /coop, a major note is that we need to introduce folks to what a co-op is. @Z in his notes shared a graphic showing how the hierarchy flipped, and there are plenty of other examples out there to visualize a democratic organizational model. “One-member, one-share, one-vote” and liquid democracy are other concepts worth visualizing.

For /, I’d like to find something playful to do with the hero—which might just mean putting copy in an interesting container, but could mean something more—and I really want to kill the “Play fair” text and just make the groovy “Play fair” record glyph huge instead (that whole section is getting refactored, anyway)

I am not an illustrator so these will be outliney, but maybe y’all can convince @Bridget to breathe some life into them after I’m done.

Proportions and divisions

The current layout has the sizes and shapes of things changing a lot, seemingly out of an interest in adhering rigorously to the masonry grid style (which to be fair is the site’s fundamental layout element). The effect though, is to make the pages feel disjointed. On a page like /coop, each block looks like its own section, and my eyes don’t know where to go. Some of the more important headlines are given a bigger size, but there are too many other sizes of text to make these really stand out. Compounding this is that some grid alignments make blocks appear as more closely related to one another than they really are, which overpowers the natural reading flow.

/ is a good start at using the grid without explicit blocks (i.e. no borders, more negative space). I’m gonna lean into that. I’m also going to do less multicolumn—it works in a few places, but it creates problems more often than not. Linear reading flows will help y’all write copy that flows better, because you only have to consider that one path for moving from section to section.

5 Likes

Looking forward to tapping back in on this, @replygirl.

2 Likes

Hey @replygirl is there anything you want help with for this?

1 Like

Hey! Long time.

I just posted a pull request with some initial changes. The only thing that’s solid in there is the hero. I’ll have another update soon with what I’m showing in this comment, as well as changes to the about & co-op pages.

I’m farther on design & copy than on code. Check this out (feedback encouraged):

Home

I broke up the grid a bit in the hero section to allow us to show more CTAs and copy. Thanks to the arrow and the offset, we effectively get two hero blocks to work with—the secondary one is used to introduce us as a co-op, with that “More on cooperatives” CTA intended to link to a refreshed co-op page that’ll better explain what a co-op is.

The “play fair” section is doing about twice as much as it did before, knocking out a whole bunch of content that was previously below the featured releases. This is all secondary copy that complements the links to the mission, co-op, and pricing pages, so now it’s more compact but also more available. The extra space freed up below featured releases is a good spot to make a brief pitch to artists. The DSP project might factor into that.

Pricing

I’m not doing much for the pricing page, but I did think the stream2own graphic needed a remix. Here’s my take on that:

The copy there is redundant with some of the pricing page’s other copy, so as a side effect I’ll do a little hacking and slashing there too.

5 Likes

@psi No contributions needed, but if you’d like to take a stab at something, I think a responsive implementation of the stream2own graphic I just posted could be a good one

Are you using the copy from the current Pricing Page or from the pricing page on the hugo website? While much of the copy on the current website is outdated, the current Pricing Page was updated collaboratively back in February. I encourage ignoring the pricing page copy that was built into the hugo site, and instead using the copy from our current Pricing Page:

Updated pricing page: Play fair, pay fair.

Context: https://community.resonate.is/t/update-website-page-s-to-clarify-stream2own/2380

1 Like
  • I encourage avoiding the “stream2own” name – instead referring to our pricing model more generically as “Resonate’s model” or “our pricing model”. We avoided the term stream2own on our updated Pricing Page and it seems to have simplified things quite a bit. Using the term stream2own seems to create more jargon – and can lead folks to thinking there is some distinction between stream2own and our pricing model.

    • I’ve even heard confusion from listeners at one time who thought that “stream2own” must have been something Resonate themselves didn’t create due to how the term was presented – as if we were implementing a feature from elsewhere.
  • While downloading is a key feature we want to build, it is not available yet and shouldn’t be advertised anywhere on the site.

  • Heads up, “stream2own pays 1/5 penny” is incorrect. The listener is billed approximately that amount when first listening to any track.

For more details on pricing, check out the Pricing and credits guide in the Handbook. If information there is unclear, please comment so we can refine the guide and have it as a single source of truth for all pricing details at Resonate.

Thank you for your work on this, it is looking great!

1 Like

Agreed.

My feeling is that communication around the stream2own/pricing model is still evolving. We should plan for periodic revisions.

2 Likes

Are you using the copy from the current Pricing Page or from the pricing page on the hugo website?

i haven’t used any of either. i’ll probably take bits of both but cut a lot, as both are super verbose. but the layout elements will mostly be the ones that are already in the website repo, b/c the scope is about minor adjustments all over and a few big changes where it counts

Heads up, “stream2own pays 1/5 penny” is incorrect. The listener is billed approximately that amount when first listening to any track.

this is listener-facing copy so it’s about how much the listener pays, not much the artist is paid. . i’ll find a better word. the home and pricing pages already mention that artists always earn a penny, so no need to complicate things here

2 Likes