@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.
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)
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.
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.
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.
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:
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
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
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
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
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.
The next step is to collect feedbacks during this week-end 2021-08-27T22:00:00Z → 2021-08-28T22:00:00Z about the following points — feel free to use the Comment feature in Figma by pressing the C key.
Thank you 
Loving the design, Timothee. Amazing work. I’m thoroughly exploring the page, contemplating how everything fits together, especially in terms of signup flow and terminology.
This looks really great! Awesome job @Timothee & everyone else who contributed!
As long as things are ready to go with the sign-up flow (like @Hakanto mentioned), and being able to easily segment and manage users and members, I would love to share this with people!
Looks really fantastic @Timothee
One question about the teams page - can we have more than 8 contacts from our network displayed? up to 30 would be good.
Where can we display recent press - only on the blog? I think in the text re-write I suggest putting it under the “our network” on the team page.
Cheers,
Melissa
I’ll have my feedback posted by the end of today.
In truth, it’s been a real challenge to get my head around all this – the moving parts between the website, our membership processes, the forum guidance pages, signup process, etc. This stuff is tough! My brain’s felt fried while working on it, but I feel like I’m getting close to having some important clarity.
@Timothee @Hakanto @auggod I love the design! Is there a separate figma for the new signup flows and payment links around the ID server and the player? There are a few more pages / links we need to cover I think. Some thoughts on payments UX here: Implications of Payments API for Signup Flow UX
