Implementing Hugo v1 Design

yes, important you are involved peter.

if you look at the new website text - you can see which pages are intended to be kept.
existing content like all sign-up and payment forms, blog, press/Team + bios (this page is being re-done) and all Support pages are intended to be kept from the menu.
if you think there’s something missing, let me know.

it would be an idea if you, angus and timothee meet to discuss this perhaps?

1 Like

Hi @angus, I’m going to work on it this Thursday and / or Friday.

2 Likes

@Timothee How’d you go with this one?

1 Like

@angus Here is what I did:

  • I downloaded the GitHub website repo, it works locally.
  • I compared the develop branch againt the Figma file: I took a screenshot of each page and paste it along its correspondig frame inside the Laptop 1024 (archive 210702) page
  • I also created a beta.stream.resonate.coop page with screenshots of the actual state of the player HOME, BROWSE and DISCOVERY pages
  • I took some time to observe and understand how the Figma projects and files have been structured and think about how to improve, re-organise, clean and document components and styles.

Now, I have some questions that I will share with you during our 2021-07-06T12:00:00Z meeting, specially about Resonate eco-system architecture (Player app vs Hugo website vs WordPress website) and design system (Figma files vs @resonate/tachyons).

See you tomorrow!

2 Likes

Great, yes we can discuss this today after the Player meeting :+1:

1 Like

To follow the yesterday discussion about the Player & Website Epic with @angus @Hakanto and @auggod, here is my proposal for the new design of the shared header and footer. I didn’t work on the mobile version yet, because I would like to discuss and validate some important design decisions first, specially for the header that raises very important questions with huge impact on the whole Resonate user experience.

Header (1024px)

Current header

Website:

Player:


New proposal

Not logged in:

Logged in (hover on user avatar)

Goal: designing a unified header across the whole of Resonate (website + player) to help people better understand and navigate between the different pages, while having the feeling of staying within the same platform (like Bandcamp or Soundcloud).

Design decisions and questions:

  • Resonate logo: link to the homepage, should be always displayed on top left, works as a landmark for the user.
    • What is the homepage? It could be a different page depending on whether the user is logged in (Feed?) or not (Discover? Landing page?). What do you think?
  • Learn: link to a Learn page, which could be the new name for the current About page filled with the new text content written by @melis_tailored about the why and the how of Resonate, the manifesto, the coop and the stream2own model.
  • Search: full height search field, Search for artists, labels, tracks, releases, genres placeholder is always visible (like Bandcamp) as it helps people understand what can they search for.
  • Browse: not sure about the relevance of keeping this page. Right now, it links the Artists page with tabs to switch to Labels / Releases / Tracks pages, with ALL content listed (!): imagine having a Bandcamp / Spotify / Soundcloud page with all artists / labels / releases / tracks… it’s interesting with a small quantity of content, but I think this loses its relevance over time and as the catalog grows, except maybe if we offer ways of filtering and sorting content… Need your feedback on this.
  • Discover (not logged in): use Discover instead of Discovery to be consistant with other menu items which are verbs (Learn, Search, Browse), not nouns.
  • Library (logged in): user’s Favorites, Collection (owned trakcs), Playlists and History.
  • Log in: the question here is to define what is the most relevant CTA(s) to display regarding the Resonate onboarding journey. I see 3 options, with each specific meaning (do we all agree on these definitions?):
    • Sign up: creating a listener / artist / label account, necessary to buy credits to listen to music in the app
    • Log in: connecting to my existing user account in the app.
    • Join: becoming a member a coop
  • User avatar: display a popup window on hover (like Bandcamp), with:
    • User Name: links to user profile
    • Total credits + [ Add credits ] CTA
    • Theme switcher (Dark / Light / Auto)
    • Settings
    • Help
    • Log out

Footer (1024px)

Current footer

Website:

Player:

New proposal

Goal: list the most useful links for all type of people (first time visitor, listeners, artists, journalists, developers, etc.) with clear and logical wording and grouping.

Questions:

  • are the submenu group titles the right ones? (The Coop, Get Involved, Connect, Code)
  • are the pages / links listed in each submenu the right ones and in the right order? Is something important missing or should we remove / rename some links?

That’s all for the moment! I hope it is clear enough, and if you have questions, suggestions and feedbacks, please share it here before 2021-08-07T22:00:00Z so we can have some time to discuss it together and update the design accordingly. Thanks :pray:

3 Likes

The history of work on the ‘new website’ is in the project is here in this Basecamp project

And I made some additional notes on the design thinking and the Hugo implementation, with some added note from @Alex himself, in this document…

Might be good to include any material that is still relevant from this in github… or on here :slight_smile:

1 Like

@peter @auggod tried out https://www.offen.dev/ …but by default it collected too much. Needed proper more specific requirements for setup I think.

In particular, we need to ‘meter up’ the new signup flow on the website. I.e. define essential logging events of our own and have a data structure that can record them.

@melis_tailored has been using this checklist of everything on the existing site:

Great stuff!

I already have a few suggestions, ideas. More will come later.

Player Menu

I’m not sure we should change anything to the top right menu on the player (Browse, Discover, Library). The blank space (divider) was also intentional. I believe it’s more consistent like this between mobile/desktop.

See current player header (logged out/logged in state)

Screenshot 2021-08-05 at 14.06.38

I didn’t expect the website to have a logged in state at all. On the website, I think a link button 'PLAYER could better than LOG IN. I also think the user should have the choice here to not log in or create an account yet. If we already have session, the id server will immediately redirect to the authorize/continue to the player thing. If we don’t have a session, the login page will show up and the user would have choice to login or just head to the player directly.

I don’t see why we should not have the dropdown menu with theme settings and more for logged out users.

A message ‘Your’re previewing Resonate’ while using the player as a guest should be shown.

Search

I agree the search input should be expanded by default, at least on desktop.

Being able to search both on the website/player would be great. An instant search as you type should immediately show if Resonate have something or not.

Browse

The browsing experience should indeed be enhanced with filters. (tags/genre, country, …, sorting) Maybe we can have a toggle button (show all/show only artists you’re following or have listened to)

In terms of SEO, the browse page is very useful too.

1 Like

this all looks great for the header!
so ‘about’ will just be ‘learn’?

I think we should try again and see if it’s usable now.

1 Like

Thank you for your feedbacks @auggod and @melis_tailored.
We just have a call with @Hakanto to review all the points, and I think we have found a good solution. I will post the updated versions (desktop + mobile) here asap with more details.

2 Likes

Here is a Figma prototype: https://www.figma.com/proto/e6powcUMz6RNuYZwRNW0oOQy/RESONATE_NEW_WEBSITE_HUGO_V1?page-id=2706%3A784&node-id=2767%3A1103&viewport=-105%2C294%2C0.713225245475769&scaling=min-zoom&starting-point-node-id=2763%3A894&show-proto-sidebar=1

You can switch from Laptop 1024 to Mobile 320 version via the Flows section (1st icon after the top left Figma logo) and click on every blue section that appears when you click somewhere.

Changes since last version:

  • Learn is now a dropdown menu containing links to About, Pricing, The Co-op pages plus The Handbook and Forum links. So finally @melis_tailored, About is not renamed Learn — there is no actual Learn page, Learn is just a menu item. @Hakanto and I think it can be really useful for users, as it works as a landmark when you’re lost or you don’t know what to do, linking to the most important pages and spaces of Resonate.
  • Search field is clickable and display search suggestions (Tags + Play history).
    • Should / Could “Play history” be replaced by Previous searches?
  • Browse / Discover / Library (only displayed after log in): we keep it as it is as suggested by @auggod
  • Log in: following @auggod comment, we need to discuss about it, maybe I don’t understand what it involves technically as the website and the player are separated for the moment, but it is a very common header pattern for users
  • User menu (when you click on the User avatar):
    • Total credits –> renamed “Credits”
    • Upload: link to Upload guide for the moment, but in the future, goes the the upload page for artits / labels
    • Theme options are moved to the Settings page, because user usally chose their theme only once, so it doesn’t make sense to always display it
  • Footer:
    • The Coop –> Learn: About, Pricing, The Co-op, Handbook
    • Get Involved –> Community: move Team here, Community Forum –> Forum
    • Connect: no more Press, add Newsletter
    • Code: move Donate here, as donations help to finance the development of the product
  • Mobile version:
    • the left part oh the header (logo + Learn + Search) stays up
    • the right part (Browse / Discover / Library / User) is fixed to the to bottom of the screen under the player
    • the footer sections are displayed on 2 columns
2 Likes

A footnote to this design is that there would no longer be a “landing page” on the player. Instead, the Learn menu will invite visitors to the website or handbook where they can learn about Resonate. This will also help us minimize pages and duplicated info (which is always a challenge to keep up to date).

Big thank you to @Timothee for these designs and – ALSO – for this great documentation and explanation of how it works and why

1 Like

Fantastic work!

I will go through the website text again today - to get any outstanding main text issues fixed with the relevant team member by the end of the week.

One thing I’ve noticed - community credentials. I believe there should be a direct link to this project somewhere in the footer as well?

My main concern is that Log In does not say what you log in to. It lacks some context.

The flow is the following.

User clicks on Player link

  • Here’s a working link so you can test it: Player
  • If there’s no existing session, the user can Log In
  • If a session does exist, the user will see the Authorize page (clicks Continue)

Improvements to this flow i have in mind:

Log In

Add the name of the App you’re going to log in to. We could just change Log In to Log In to Beta Player.

Also both Log In and Join pages may display text/images to add some more context about the action.

Authorize

  • Authorize can be renamed Continue to the {{APP_NAME}}
  • Display username/profile picture with something like (You’re currently logged in as {{DISPLAY_NAME}})
  • Add link to Login with another account

Technically it means sharing a cookie with .resonate.coop so we have access to user data. This is of course trivial but it means having to render the menu with javascript. Initially I thought we could just focus on an header design that works if we have an existing session with the player or not.

Hi folks! @angus @melis_tailored @Hakanto @auggod @Nick_M @richjensen

Figma Prototype

I just finished to design all the new website pages. Here is the Figma prototype link (1024px).

Take the time to explore all the pages by clicking on all the links that appear in blue when you click inside the prototype: Home, About, Stream2own, The Co-op, Team, Community Credentials, Blog and Article.

Design feedbacks

The next step is to collect feedbacks during this week-end 2021-08-27T22:00:00Z2021-08-28T22:00:00Z about the following points — feel free to use the Comment feature in Figma by pressing the C key.

Content & Hierarchy

  • Is there anything (pages, sections, texts) to modify / reorder / add / remove?
  • Does the use of certain Bridget M illustrations seems inappropriate to you in term of meaning?
  • Given their importance, are there any element that should be larger or smaller?

Design & Layout

  • Does the overall look & feel fit well with the spirit and the tone of Resonate?
  • Would you be proud to share the new website? In other words, is there something that you feel uncomfortable with in terms of design?
  • Is there some pages or sections where the way the content is structured, using blocks, headings, texts and illustrations, is problematic, and why?

Thank you :pray:

4 Likes