Implementing Hugo v1 Design

Essential header/footer menu items.

Display of new music/playlists/variety.
MUSIC FIRST

Essential points for homepage communication (to be homogenised with player landing page)

2 Likes

@Timothee Now you have access to the Figma, letā€™s develop a list of three (max) critical changes we need to make to the current layout or design that we can include in our first homepage #platform:epics.

@melis_tailored Thoughts on whatā€™s the most tip-top pressing design issues of the website? e.g. is there anything thatā€™s currently just broken (i.e. looks wrong)

1 Like

To be able to answer to your question @angus, I need to know which version of the website homepage we are talking about: there are several Figma files containing different versions of the homepage:

I donā€™t understand which one is the latest and who did what.

3 Likes

@Timothee Good question! @melis_tailored @auggod any thoughts on which of the three is the latest / correct version?

Sorry, I donā€™t know. Perhaps @sganesh or @Hakanto know.

1 Like

Unable to access the second two Figma links, but can say ā€œHugo V1ā€ has been functioning as the operating document!

2 Likes

@sganesh Yes, Hugo V1 has been the reference point. Nevertheless, I believe we are at a point where all of these designs, Hugo V1 included, are simply proposals. I believe @alexcrane was the primary designer in the past.

These initial proposals havenā€™t been updated in ~2 years to my knowledge.

@Timothee Letā€™s keep using this topic. As we discussed on the call

  1. Get the GitHub - resonatecoop/website: Future Resonate Coop website working locally
  2. Compare the develop branch against https://www.figma.com/file/e6powcUMz6RNuYZwRNW0oOQy/RESONATE_NEW_WEBSITE_HUGO_V1?node-id=312%3A1
  3. Let us know here how much work remains.

Weā€™ll then use that, along with Player landing page text, to set our #platform:epics agenda.

2 Likes

do you have a link for the call?

@Timothee Hey :slight_smile:

How are you going with this list here? Making some progress?

Hey everyone. Iā€™m interested in this topic in regards to the existing WordPress site and existing content like all sign-up and payment forms, blog posts, the Press section, Team + bios and all Support pages.

I think we lost analytics years ago, so not sure what the direct traffic is to some of these areas, but thought it worthwhile to check in with this team if thereā€™s been an audit of everything to be replaced, or whether we need to maintain WordPress for certain things.

2 Likes

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: