[IDEA] Exploring UX Stuffs by zôÖma

[zxxma]

Context
Yesterday I decided to grab the SGTM topic for my daily (or nighty) UX training session.
Dono if it will be useful, but I had fun working on, and I think I will maybe continue!

I decided to experiment some little things I'll have to describe here.
I'll try to be clear, but feel free to ping or comment if it's not clear!

Important information, the idea to animate at least to things on upcoming screens :

• Vinyle on Home (Unscrolled Player)
• Mini-Vinyle in Portable Player (top right)
  And the vinyle just have to rotate, with the "Track Picture" in its center.

Let's go : Here is the basic Home when you're not logged yet.

Home (without being member)

Explaination of this screen ⬆️
The idea is to create an experience where the Player is independent from website exploration.
("Don't cut the music each time I click on a new page!")

So, to do it, the idea is to create a constant player on top Header of the site, since the user scrolled a little bit.
This is what you see with the white stripe, which appears on top when the user scrolled.
Once the portable player is on top, transitions between pages could be fluid without stopping the music.

---

Stationary Menu

The idea I was exploring is to create 2 "statics things" on the platform :

1. the first is the portable player (which is static once launched with a 1/4 screen scrolled)
2. the Left Menu, which could provide direct access to settings and stuffs (dono what yet ^^)

The content on this Menu is totally invented, but I liked the idea of "gang" which is not really a band, not a "label", not a "group"... Yes, it's maybe strange, or useless.
Example: I could create a "Live Gang" for people who love Ableton Live... but I also could create a gang called "New Morning" which could gather every musicians who like/play/listen music @ New Morning (music hall in Paris).
It's "open" to use it for 2 people, or for 2000 and that's why I proposed this strange name.

---

My Profile - Edit Page

I added stuffs from this Issue :
[sgtm-club/sgtm] Issue opened: #72 Improve funny placeholders

---

Add Track Page

Add Track Page "Validated" - Uploading process

---

Screen : Add Track with a crazy feature : "Affiliate this track to an adress"

It doesn't mean where you live, but you can choose a random place in an Island for a ukulele song, or an industrial building where you had a rave party, for you techno track.
I thought it could be fun, maybe not xD

We could imagine create a dedicated page with a big and wonderful map (using Zenly? ^^) where you can just choose track randomly, and discover hidden songs in the sahara desert.

Platform once you scrolled, and you're exploring Timeline of last released tracks.

---

Thanks for reading.
Do not hesitate to give feedbacks, ideas, or whatever you want.
Cheers peers,
zôÖma

[moul]

• I love the overall spirit, it's neat and comfy ❤️❤️❤️
• About the logo we need to have more feedback, the previous red color was one of the "rec" buttons (🔴), I even chose the exact same border shadow we can find on most DAW :)
• Nothing to say for the listener, the experience seems very amazing
• I think that the next step (that can be done right now if you feel it already, or after moving to this new UX) will be to improve the experience of the musician with social features -> comments, reactions, feedback, sharing tips, detailing the process, etc
• One thing that will come very quickly is the "track attachment" -> a way of sharing .mid files, .txt files, .reason files, etc
• About the affiliate gang, just for your information, it won't be only humans, i.e. "I'm Manfred, this song features @gajeb and was made under the name of my band Camembert au lait crew which is composed of @mxs and @sassou" -> I don't know if you want to mix gang and band projects, but we need to keep the band easily viewable if the metadata is present
• What do you have in mind about the sharing button on top of a track?
• I just understood that the volume slider on the right wasn't about the volume but about the timeline, right? the idea is awesome, maybe you can also use some other well-known visual music tools like VU meters in some places :)
• 👍 to add the affiliate address and see later if it's used (easy to remove if not useful)
• add an indicator on "Open the thread" that says there are some comments
• add a reaction on tracks, because it will be a quick way to give an opinion that can also be used as statistics, so: not only like, more something like GitHub which have 8 emojis
• tags are cool and discrete which is cool because most of the time we voluntarily read them if we're interested to know more; can you add another type of tags that will be generated by the system, i.e. "is a remix of another track", "is featuring someone else"; or maybe, for now, we can mix them with other ones and add an emoji to make them more visible
• note also that one of the goals of SGTM is to run a suite of analysis tools to get as much info as possible; quickly we will have maybe about 15 info to share like the BPM, if there are lyrics or not, the automatically detected emotion, the intensity, etc
• don't forget some links like "open" which is in the footer right now, later we will have also "terms" and other secondary links
• also, since SGTM is new, we need to keep a block with explanations about the project at least on the homepage

[moul]

The second round of feedback:

• I would love to make it more explicit that SGTM is open-source, using IPFS, what people can translate the project, fork the project, propose changes, etc; can you find a way of at least indicate that the repo is open-source with a github ribbon or a better way to see it; i.e., we can imagine embedding the changelog on the website with links to PRs
• I would love having a hall of fame + some tags on user profiles; tags can be: early user, developer, translator, remixer, feedbacker, etc; it can become some gamification, but for now it's more about helping people to understand who is behind the project and showing that anyone can contribute
• One of the challenges will be to generate circle image from square ones; I think we need to find an algorithm to automatically complete a square image with some blurred background color to make it round -> need help :)
• Also, SGTM is like GitHub for musicians, so consider that the sharing will be important; can you try adding in your mockup some ideas of thumbnail we will have to create, since it's 100% sure that we will need to write various image generators (round logo, sharing images, etc)
• You can also already think about an embeddable mini player without the social features if people want to share them on their personal website, twitter, etc
• And in the same vein, try to add just one or two mobile screenshots, just to be sure that we don't forget it

thank you very much

[moul]

I added in the README.md a link to the figma doc with all the logo variations: https://www.figma.com/file/w1OBRhdj2jndsfjlalbRBa

[zxxma]

Hi again peers!

Second wave, trying to improve little stuffs with feedbacks.
And trying to explore new stuffs also.

Home v2.1

• Added a little "About" point which can stay fix in footer right corner when the page is scrolled.
• Added the new "Light Menu Bar" I'll present you on the second screen.

---

Home Feed v2.1

• As soon as you scrolled a little bit (logged or not) you'll open the all FEED.

Important note : The fader or right side is to quick time travel fast in the ALL website history, so there is no "page 2, 3, 4".
This fader will be really "hard" to manage with precision, but, we don't care, to seek something precisely, we'll use the search bar, which provide search by title, artist, date, genre, physical adresse... etc.

• I added Reactions with a Full Github like style (I tried other stuffs but I like it the most.. ^^)
• I tried to create something like "RANK" affiliated to the artist posting, and decided to create it in Black.
• I'm not satisfied yet with the "notification" near the "Open this thread" which has to say "there are comments there".

---

Add a track Page v2.1 with "World Affiliation"

• I tryed to optimize the form
• I added Bitcoin & Ethereum address the creator can enter to receive donations "dedicated to this track", which is different from the "artist address" he could have put on his profile, but really affiliated to a specific track.

---

Track Page - Standard v2.1

• I created a "Light ShortCut Menu" to interact with the artist on his track page.
  (yep, I had fun adding some strange stuffs like 'Send Bitcoins' or 'Send Nudes' Options xD)

• I also added to features I thought important : 1) Get notified (when artist release something) 2) Add to Fav (which can help the automatic mix to gather loved tracks)
  

---

Track Page with Producers Details

• Test of Producers Details design

---

My Profile + New Menu

• I decided to create a second little Menu to complete the UX and have something "light" but many features quickly accessible.
• On this Menu, you'll find in one click every pages of the platform :

1. Home (and make appears the User Profile Menu)
2. Tools (here the idea is to gather every tools, vst, doc, community thread or stuffs that are dedicated to help the creator)
3. FEED with only Fav (here the threads pinned as favorite)
4. band threads, gang threads, or followed artists
5. Notifications (when an artist released something)
6. World Map to discover tracks exploring the world (and next version, could be crazy to explore the galaxy...!)
7. The automatic mix page
8. Upload a track.

---

My Profile - Edit v2.1

• Optimization + Address for cryptocurrencies supporting the artist
  

---

World Map Exploration

• This feature could be fun, because gangs could have the exciting sensation of "CONQUERS THE WORLD" with their music, against other gangs and I think it's a pretty funny war.

---

---

AUTOMIX Console Feature v2.1 (Draft)

• My idea was to create a specific feature for people who want to let the screen open on the website, let the music runs randomly (or not, with parameters, filters) during they're enjoying discussions with friends, or doing their sport.
  This screen could be considerate as a background page, but giving some cool features like "search quickly a track" to put in the Queue and add it smoothly in the automatic mix for later.

---

Here you'll find access to ressources and all updated contents.
I'll do my best to keep it real on upcoming improvements, and to be available for common works!

Thanks for reading this very long issue.
Waiting for your comments & inputs peers!
Cheers from quarantine_

[moul]

I'm very happy with this new version:

• Since there is a workflow executing when starting to scroll down on the homepage, I think that you need a visual indicator that you can/should scroll down; for mobile, it will probably be disabled and always in the scrolled mode
• You should keep the "day" on the listing (center of the page) and not only on the right slider
• Good idea for the BTC/ETH address <3
• I don't comment positively on all other good ideas, but most of the changes are very good
• My biggest concern is about the menu(s)
  • the left menu should probably always be open with text on the right of the images
  • the secondary personal menu on the left is good but I don't understand how we should open it, I think we should keep a profile picture on the right of the navbar as it's the most common on every website + keep this position for the "create account button" if we start scrolling; because the only place I found the "create account" button was on the homepage, before scrolling
  • on a track page, the right block with artist detail looks very similar to "my profile block", maybe it won't be a problem since the avatar won't be the same, not sure if we need to change something right now, but keep it in mind
  • anyway, when you have the three menu blocks open at the same time, it looks noisy

Very good work, thank you <3

[zxxma]

- TODO : (sôÖn)

• 1. Optimize Home for first time visitors (with AND without being logged) + add Profile Pic (TopRight).
• 2. Add "Today" Dates on the Feed (Center)
• 3. Find a way to clarify and make the difference for 'Artist Block' in Track Page. (different from 'My Profile Block')
• 4. Optimize Sticky Player Design
• 5. Optimize "Conquerors Map" Options, and way to "pin" your track somewhere to "RPZ UR GANG".
• 6. Explore Mobile & Responsive stuffs
• 7. Explore Dark Mode for n3rdz&1337fr!3nd$ for fun (&UXtraining routine:D)
• 8. Create a sexy "My Profile" page which have to present every contents, and related entities (bands, gangs) conquered territories on the map, contributions (github like calendar of contrib), etc.
• 9. Create a page "About SGTM"
• 10. Create a link "Contribute to SGTM?" &/or OpenSource Manifeste about this project (?)
• 11. Split topics of this "Meta/exploring issue" into dedicated specific (&short) issues
• 12. Add social share features
• 13. Have fun doing all this previous stuff x)

[bolnel]

Some thoughts/impressions:

• A record that rotates when the song is played is nice; though I think it should be made subtle, as the constant movement can be distracting. Maybe the song/album cover should be rounded with CSS when it's put in the middle of the record? As not all songs will have a neat transparent cover, or with a background that matches the record.
• Having the player bar stick as you browse is a good idea
• I'd have the interface more "flat", without very obvious drop shadows (unless you're maybe going for the "retro" feel?)
• How would it look on mobile? The bar will probably be simplified?
• Mapping a song to a location and finding hidden songs on the map is a fun feature
• It feels that "gang" is a tight-knit group, if people just vaguely share the same interest, the neutral (but not original) term would be "groups". Or maybe "circles". Or something that hasn't been used before and doesn't have any strong connotations.