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.

9 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.

4 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.

8 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

1 Like

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

4 Likes
  • 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!

4 Likes

Agreed.

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

3 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

5 Likes

All of this is great, y’all. :pray:t4:

Thank you for picking this up, @replygirl. Already feeling lighter and clearer. :black_heart:

3 Likes

Thanks for getting into this! All your plans sound good - it all needs to be simplified and condensed.

My only concern - The copy around the pricing is complicated, because the system is complicated. Anything you can do to convey it neater in graphics will be wonderful.

Please only use text, info, numbers from the new page. All the old graphics/info on the hugo are out of date or confusing, or just wrong.

Although this is listener facing that you are working on, it needs to convey the artist payment as well, as the two are inter-linked.

Any questions about the pricing - please do DM me or @Hakanto anytime!

4 Likes

~ The design update ~

tl;dr: I dropped out of engineering for this project, and instead put together a design + content proposal for all the key areas that need to change. It’s on Figma.


So yeah, time got away from me a bit, I had initially budgeted the time for engineering to happen a bit earlier than I ended up starting, and I don’t want to hold things up by being overly optimistic. Accordingly, I forfeited my status as a paid contractor and did the design + content as a volunteer.

At the Figma link below, you’ll see:

  • Complete mockups for the /pricing and /coop pages
  • Partial mockup for the / page — this is only partial because the design is limited to a few elements:
    • A refreshed hero section, which is already built in this PR, and should be the starting point for the next engineer
    • A refreshed “Play fair” section that also replaces the last section after featured releases
  • NO mockups for:
    • /about, which should be de-emphasized for the launch (but could eventually borrow carousels and other elements from what I’ve mocked up)
    • /manifesto, which is fine as it is, just needs smaller text maybe

Reception at the standup meeting was positive and this design does well in responding to @Z’s feedback and what else I’ve heard + thought about the site. To summarize what I posted above in May, these were the goals I had in mind:

  • Strip out content that most people will find confusing or unimportant, while still implying to enthusiasts that Resonate “gets it”
  • Replace remaining content with real-ass ad copy—short, meaningful, interesting
  • Offer entry points to deeper documentation
  • Improve overall visual interest with more bespoke layout and a new stream2own graphic
  • Improve visual proportions
  • Support a more natural reading flow

The result is something a lot tighter: See in Figma

Building it

Implementation will be incremental (Dev Decisions Log §2.2). My recommendation is start with the PR, take all of the copy out of the current pages, and replace it with what I wrote—figure out where it fits, then get rid of any places that are still empty when you’re done. From there, build in the new design one piece at a time:

  • / is probably good as-is for now with the new hero, but it’s worth looking at any usage/behavioral data you have to see how much dropoff you have here. If a lot of people bounce before joining or circulating to other pages, there’s a case to be made the new “Play fair” section should become a priority as the carousel brings important info farther up on the page
  • /pricing will be great to have in place, but the first thing should be the new stream2own graphic
    • Side note: The stream2own graphic is designed as a responsive component, and will be easy to put together using CSS grid rules
  • /coop has some important content, and is probably the most straightforward layout to build. Since democracy is the fundamental concept prospective users need to grok to really understand the platform, consider making this the first full-page build after what I suggested above

More feedback?

If you missed the standup, please watch the recording to see presentation and discussion.

Even though I consider this handed-off and ready to build, feedback is welcome, and I expect I’ll have some time to incorporate it on August 15 or 16, as I’ll be on holiday with no itinerary.

7 Likes