Redesigning Funkwhale.audio


#1

https://funkwhale.audio is rather old and I’d like to start working on a full redesign, as already mentionned here.

Funkwhale.audio was always meant to be the entrypoint on the project for everyone, and I can see 3
core goals for the website:

  1. Explain what Funkwhale is
  2. Help people joining the network
  3. Help people finding anything else they might need (support, help, guidance, discussion spaces, documentation, source code, news, etc.)

We currently do 3., via the links in the header, and barely do 1. (one screenshot, and a set of features for which the copy is poorly written and partially outdated).

Item 2. is partially available at https://join.funkwhale.audio/, but the current workflow suffers from some issues, since the instance list is hard to update and lives in a git Repository.

Considering all those aspects, I’d like to discuss a redesign of Funkwhale.audio and address the mentionned issues (and other you may want to tackle). I believe this is needed to increase the project visibility and attract newcomers (users, contributors, instance admins…), and I’m willing to invest money in this redesign, as soon as we agree on the core use cases for the website and a battle plan :slight_smile:


#2

Je peux essayer de m’y coller ^^


Funkwhale sync #2
#3

Génial @troll, on discute d’un plan d’action dimanche si ça te va ?


#4

Oui, on peut faire ça ^_<


#5

Since we agreed on the redesign yesterday, we can actually start the work on this. How do we do this @troll?


#6

I will work on it on my side, as soon as I have a model or questions I will come here to present them:)


#7

Someone mentionned today that the fact Funkwhale intend to support all kind of audio (and not only music) should appear on the website. That’s probably something you want to keep in mind @troll :wink:


#8

Thank you. I’ll keep that in mind @eliotberriot ^_<


#9

[FR]
Bon, il serait temps de s’y mettre ^^ désolé mais je vais utiliser le français pour m’exprimer car je ne suis pas très à l’aise avec l’anglais, j’essayerai de traduire en anglais mes posts pour que tout le monde puisse suivre et participer. Vous pouvez bien entendu utiliser la langue de votre choix pour me répondre et participer.

Pour commencer j’aimerais poser un chemin de fer global du site a travers une maquette et ainsi valider le contenu avec vous pour voir si nous sommes à peu près d’accord sur le contenu avant d’aller trop loin dans le travail et devoir refaire ou recommencer pour rien.

J’ai fait une rapide maquette qui n’est bien-sûr pas le résultat final mais juste une base de travail qui vas sûrement évoluer en fonction de nos discutions. Vous pouvez vous référer aux numéros des écrans pour que la discussion soit plus facile.

J’aimerais en particulier vérifier ces quelques points avec vous:

  • Rédiger avec vous les contenus rédactionnels des écrans. Je ne me sens pas légitime pour les rédiger moi-même et je pense que c’est très important d’être concis et précis la-dessus.
  • Vérifier que rien d’important n’a été oublié dans la maquette.
  • Tout est discutable et vos remarques sont les bienvenues, n’hésitez pas à participer.

[EN]
Well, it’s time to get started ^^ sorry but I’m going to use French to express myself because I’m not very comfortable with English, I’ll try to translate my posts into English so that everyone can follow and participate. You can of course use the language of your choice to answer me and participate.

To begin with I would like to lay a global railroad of the site through a mock-up and thus validate the content with you to see if we are more or less in agreement on the content before going too far in the work and having to do it again or start over for nothing.

I made a quick model which is of course not the final result but just a working basis that will surely evolve according to our discussions. You can refer to the screen numbers to make the discussion easier.

In particular, I would like to check these few points with you:

  • Write with you the editorial content of the screens. I don’t feel legitimate to write them myself and I think it’s very important to be concise and specific about them.
  • Check that nothing important has been left out in the model.
  • Everything is debatable and your comments are welcome, do not hesitate to participate.

Funkwhale_Audio_ecrans1

#1 Home
Mon but ici est de faire une page concise et surtout ne pas noyer l’utilisateur sous une tonne d’informations, ce qui au final rend le sentiment d’un message confus et brouillon.
Au contraire, il faut que la page respire, que le message soit clair, concis et bien structuré.
Dans ce but le choix rédactionnel me semble être de première importance, d’autant plus important qu’il est concis.

  • Logo Funkwhale

  • Links (forum, blog, source, demo)
    Je mettrais le lien *demo en exergue car je pense que c’est un lien important, quelqu’un qui ne connaît pas le projet peut en 1 click tester et se faire une idée rapide.

  • Accroche (“A convivial and free music network”)
    Il faut a mon sens réfléchir a une phrase qui résume l’ensemble du projet. Je sais que ce n’est pas un exercice facile mais il me semble primordial. Quand on discute avec un ami et qu’on veut lui expliquer ce qu’est Funkwhale, il faut pouvoir lui dire une phrase et il doit comprendre le projet. Si l’on doit se perdre dans des explications a rallonge avec des termes que la plupart des gens n’ont jamais entendus (instance, serveur, federation), on finira probablement par les perdre, ils penseront que c’est trop compliqué et ne chercheront peut-être pas a en savoir d’avantage, ce qui est triste.
    Par rapport a la phrase actuelle "A modern, convivial and free music server ", j’ai enlevé “modern” et modifié le “server” par “network”. J’aimerais discuter avec vous de ses changements, ou alors réfléchir a une autre phrase si besoin.
    Il faut garder en tête que le site est la porte d’entrée de tout le monde et non pas uniquement celle des développeurs. Je pars du principe qu’il faut qu’on s’adresse au plus grand nombre et non pas uniquement a une catégorie précise d’utilisateurs. Pour moi, le terme “network” est plus compréhensible que “server”. Si ma maman voit le mot “server” je suis prêt a parier qu’elle va partir.
    De plus les développeurs sont des utilisateurs plus expérimentés, ils n’auront aucun mal a comprendre de quoi il s’agit lorsqu’ils verront le bouton “create an instance” ou “install your server”.

  • Boutons:
    Deux seuls boutons, deux choix.
    Create an Account OU Join an Instance
    Install your Server OU Create an Instance
    J’ai une petite appréhension a utiliser le mot “Instance” car mon expérience personnelle montre que les gens normaux ont du mal a comprendre ce terme. Je ne sais pas s’il faut l’utiliser dès l’accueil ou l’introduire plus tard (page 6) lorsque l’utilisateur est amené a choisir un serveur/instance. Là on peut lui expliquer ce qu’est une Instance, cela me semble plus à propos a cet endroit.

  • Illustration(s):
    Mon idée est d’avoir en page d’accueil une belle illustration immersive. Mon intention est de créer des illustrations en rapport avec l’univers marin pour immerger l’utilisateur dans un univers visuel qui mêle l’univers aquatique et musical.
    J’éliminerai pour ma part l’utilisation de photos car trop connotées univers corporate entreprise.
    L’utilisation de l’illustration est plus a propos et chaleureux selon-moi.
    On peut expliquer par exemple les instances en faisant des analogies avec des bateaux:
    . un petit bateau avec des amis dessus = petite instance
    . un gros paquebot avec beaucoup de monde qui danse = grosse instance
    Cela pourrait être ludique et pédagogique de trouver des analogies entre l’univers aquatique et sonore.

Funkwhale_Audio_ecrans2

#2 Showroom

  • Interface (web, mobile)
    Il me semble important de montrer dès le départ l’interface de funkwhale et de mettre l’accent sur le fait que l’on puisse l’utiliser indifféremment sur desktop et mobile.
  • Accroche: «Build by users for users»
    J’introduirai l’idée que le projet est open source et crée par une communauté.
  • Un paragraphe: Funkwhale is a free an open source
    audio server built by a wonderful community
    all over the world.
  • bouton ( Contribute > 8. how to contribute

Funkwhale_Audio_ecrans3 )

#3a. Éléments de rupture
Je pense qu’il est ensuite important de donner envie aux utilisateurs en leur indiquant des éléments de rupture. J’entends par là les choses propres a Funkwhale et que l’on ne trouve pas forcément sur les autres plateformes. Une façon de mettre l’accent sur les éléments différenciateurs. J’ai pensé à :

  • «Your own music everywhere»
    You just need a web browser and a simple connexion.
    Na notion de “musique personnelle” est différenciante par rapport a Spotify ou Deezer ou tu payes un abonnement pour écouter de la musique qui ne t’appartient pas.
  • «Share with your loved ones»
    Share your music with friends and family.
    Ici il s’agit de dire que l’on peut partager sa musique avec ses proches via les bibliothèques, c’est également un élément de rupture par rapport aux autres services.

Funkwhale_Audio_ecrans3b

#3b. Éléments de rupture

  • «Free & Unlimited music»
    … ?
    L’accent sur la gratuité et l’écoute illimité.
  • «No Tracking and no ads»
    … ?
    L’accent sur le “privacy by design” ou le respect des utilisateurs.
    On peut imaginer d’autres éléments ou en enlever … j’aimerais également qu’on puisse en discuter ensemble.

Funkwhale_Audio_ecrans4

#4. More ?
Ici, je pensais mettre de plus petites acroches pour montrer les autres fonctions ou possibilités de funkwhale.

  • Community ?
  • Radios ?
  • Podcasts ?
  • Audiobooks ?
  • Social Music Network ?
  • … ?

Funkwhale_Audio_ecrans5

#5. Redirect / Choice
Arrivé a ce stade, l’utilisateur a une vision du projet, il peut faire un choix en connaissance de cause:

  • Join an Instance > 6. Find an Instance
  • Create an Instance > Page documentation ?

Funkwhale_Audio_ecrans6
#6. Find An Instance
Cette page est dédiée a la recherche d’instance. Je pense que c’est le bon moment pour expliquer au visiteur ce qu’est une “instance”.

Funkwhale_Audio_ecrans7
#7. They talk about Us
Ici on peut mettre en exergue des articles de presse qui parlent de Funkwhale. On peut aussi imaginer avoir des petites phrases témoignages d’utilisateurs ou d’Administrateurs avec leur propre ressenti du projet. Ca peut être humoristique, décalé, on est pas obligé de faire un truc trop strict corporate. Ca peut prendre la forme d’un Toot de quelqu’un qui dit du bien de son expérience funkwhale par exemple.

  • Presse (Nextimpact, Framsoft, etc…)
  • Personnalités ou Utilisateurs, Administrateurs (?)

Funkwhale_Audio_ecrans8
#8. How To contribute
Ici on illustre et on oriente l’utilisateur qui veut contribuer au projet vers les différents endroits.

  • Code (github)
  • Design (github ? )
  • Traduction (weblate)
  • Beta Testeur (Report Bugs)
  • Sponsor (email)
  • Dons (OpenCollective)
  • Page spécifique contribute.funkwhale.audio

Funkwhale_Audio_ecrans9
#9. Project stats (globales)
On peut imaginer une page qui résume l’état actuel du projet sous forme de petites statistiques parlantes comme:

  • Nombre d’Instances
  • Nombre d’utilisateurs
  • Nombre d’écoutes
  • Nombre d’Artistes
  • … ?
  • … ?

Funkwhale_Audio_ecrans10
#10. Footer
On peut remercier les éventuels sponsors en les mentionnant et en les remerciant.

  • Logos et remerciements sponsors (Serveur, Infrastructure, … )
  • Pied de page: Organiser les liens par catégories
    cohérentes par exemple:

A propos:

  • what’s funkwhale
  • Règles ou charte
  • CGU, licences, privacy etc…
  • Contact email
  • Contributeurs ? (ce serait chouette d’avoir une page qui mentionne tous les contributeurs au projet, pour les remercier)

Ressources:

  • Source code
  • Documentation
  • Issue Tracker
  • FAQ

Follow Us:

  • Mastodon
  • Plume (blog)
  • Riot
  • Twitch

#10

Thanks @troll, that’s a very thorough proposal, and I’ll be sharing my feedback below :slight_smile:

Yes, that makes sense, and we can figure that together. In general, I agree with the way you’re approaching this project!

Yes, indeed. Network is fine, alternative words could be Service or Platform. Service may be more generic and suited to our use cases (since people can run Funkwhale without the federation features), while remaining understandable by everyone?

“Create an instance” (which would redirect you to the instance picker) looks good to me and is not too technical. Maybe “Launch your own instance” (which would redirect to the relevant documentation) would be good for the server part?

I remember being involved in lots of discussions about the “instance” word, and very few alternatives exist right now: pod, server, community… Those suffer either from the same issue (unknown/too technical) or are inaccurate :s

That being said, we may be able to find a better term, but we’ll have to explain how things work anyway (multiple communicating together, shaping a consistent network). Even if we find a better term, we’d still have to do this pedagogic effort, because it has concrete consequences on the user experience. (storage, policies, etc.)

I’m seduced :3

Illustrations are indeed warmer than photos in my opinion.

Sure! Since whales have social structures, communicate, sing, gather in pods where they share a culture, I have the feeling we could use that to build consistent and cute analogies/illustrations:

  • People are whales
  • Instances are pods
  • Whales are part of a pod, but can communicate with whales from other pods
  • Etc.

That, and also explain that we do have mobile apps, because that’s a recurrent question :smiley:

I do think UI screenshots should be contextualized and associated with specific features. (Intead of thrown together in a slideshow, for instance), but based on your mockups, I assume you were headed that way :wink:

One core feature we may like to showcase is the networking part: “Join a vibrant network of XXX active members” feels like a good call to action to me. And instead of having the stats in a separate page (as you suggested below), those would be part of the feature, with explanations on why it matters, etc.

As for the rest of your post (contribute and press page, footer, etc.) they look good to me :slight_smile:

I expect the instance-picker to be the most complex UI compenent, and we’ll probably want to discuss its behaviour separately, but there is time :slight_smile:

I’m going to relay your topic on the fediverse, thank you for the incredible work!


#11

I’m taking over this task, because @troll won’t complete it for personal reasons, and thanks to @ginnymcqueen’s work, we realized how much a liability our current website is to the project.

As much as I’d like to have a fully-featured website as described through this discussion, this is likely to require a huge effort, and we need something decent soon. To help with that, I’ve worked on a wireframe this morning, with a strong focus on content/structure (and not on graphic/web design itself), with the core requirements:

  • Explaining what Funkwhale is
  • Explaining how to start using it
  • Explaining how to support the project
  • Explaining how to join the community and become a contributor
  • Provide links to other resources

I took inspiration from https://joinmastodon.org for the homepage structure. Let me know what you think about it, and especially if you see any glaring issues or miss with this suggestion.

(Click on the images to zoom)

Homepage

The blue square can either be a video or slideshow featuring important screens of the app. The circles can be illustrations or icons associated with a given feature.

home

Community page

This is a more traditional content page, put I think it contains most if not all the explanations and links to get in touch with the community, get support, become a contributor, etc.

community


#12

Looks good! I would add something on the top of front page either “contact” or “report an issue” that’s not hidden in a menu for easy finding. A first time user might not know to check “community” or “resources” when looking for answers right away and the less clicking around getting lost, the better. You can always put more clarification on different ways to report issues or contact the project on there.


#13

You’re right, Contact makes sense, and a dedicated page with at lease project manager / mods email addresses can’t hurt :smiley:


#14

@ginnymcqueen would something like that work?


#15

Makes sense to me! I think bug report/feature request/suggestion should also be mentioned. There are people who might want to contribute/suggest stuff that won’t feel comfortable signing up on a forum or git, at least in the beginning.