JAMS Mobile Prototyping Phase

Quick Web App Update

Development on revisions to the web app has been a bit slow recently since the pandemic due to increased workload and even other life events for JAMS main dev, Nick. I also have an increased work load but I try to keep abreast here and no matter what I’m doing, there is always a concurrent thread in my mind thinking of some aspect of JAMS. Feels a bit like an obsession at times. :sweat_smile:
Though slow, some progress is being made and if things start heating up for the API and the network is seeming far more stable, I will do what I can to attempt to get up to speed.

Onto The (Hopefully) Good Stuff!

As I mentioned there are always some irons in the fire and prototyping on
Figma has recently been one of them. I don’t quite yet have a full understanding of how to get interactive components working of sliders, buttons, etc but that is likely just a couple YouTube videos and some head scratching away. Once I have something concrete then it will be onto next steps.

Currently I have quite a few flows mocked up in a different, not so pretty initial design… attempt, but many remain. The main purpose was to get a better understanding of how to design at all, then get grasp on prototyping with some interactivity while seeing how to design the web apps features and future features in mobile form. The current focus is to work on a redesign that is easier on the eyes.
Hopefully both web and mobile will provide a modern feel, be comfortable and familiar but also unique with an aim at simplicity, though there will be some fumbling along the way.

That is where I would like to present three color options, with the caveat that one of the darker options could be a Dark Mode perhaps by default or vice versa with the colorful option.

Brightly Colored


Darkly Colored (left) and a “Dark Mode” (right).

  • Brightly Colored
  • Darkly Colored
  • Dark Mode

0 voters

Feedback appreciated.

Now for some Giffy goodness.
A couple short and simple representations of the few semi interactive flows in the brightly colored redesign I have. These are some of the pages you would interact with most if you are a more passive user but there are others for those looking to create public, or collaborative Playlists or Stations, pages where you see which are published or not, and flows for adding, removing, reordering when building a Playlist or Station. Much to be done!

Home
Home
(sorry for speed, 4Mb Gif limit)

Search
Search

Library
Library

Player
Search
(That coin stack icon is a Tip button :kissing_heart:)

Artist Page
ArtistPage

Note: I would have liked to share a complete seamless video but there is a limit to the size of Gifs and a pain to get just right.

Edit:

A Different Design Choice

I should go over one of the more obvious design differences between what I’ve currently mocked up compared to other music/streaming apps, the use of “Cards” to organize different categories or sub categories.

It is more akin to folders and sub folders on a computer in a sense but the main intention to me was to reduce the sensory overload that I personally experience in other music apps like Apple Music or Spotify.
Though they have great designs in many respects I always find myself either not knowing exactly how to get the most out of the app, feeling overwhelmed or influenced by a whole page of album art and often influenced by what is familiar whether it be an album I recognize or just picking the “Liked Songs” playlist that I know I can enjoy. (The daily mixes on Spotify rarely appease me but Apples curator’s hit the nail on the head more often than not, which is noted :wink:)

So the question I’m hoping to answer is,
if a user isn’t simultaneously bombarded with so much visual and textual stimuli, will they have a more clear minded and intentional experience?

I think perhaps so.

I don’t have these mocked up yet but when you were to click on one of the Cards under say the Discover category, you would see all the typical album art and so on but it would all be completely relevant to that sub category (Card) you navigate to.

That’s it for now

Let me know what you think of the direction and design so far. :grinning:

24 Likes

Great to see this progressing, @Nigel !

My 2c:
I’d avoid gradient on gradient, too busy.

In relation to the cards idea, I get your point about sensory overload, but looks a bit outdated (probably also because of the gradient over gradient mentioned above).
If going that direction, maybe something more like

images (8)

I still think an album view with filtering ability would look more modern, but de gustibus

On the Player gif, looks like opening the drawer could easly start playing by mistake, something to consider

Love your work btw!

6 Likes

You have a product named Jams… are you missing an obvious opportunity for colour names?.. I don’t even know exactly what the ambition is but I know I like Strawberry; Raspberry; Blackberry… and catering for everyone perhaps None for the white default.

Unclear from above how much is user choice… noting too many player.catalogue.interfaces don’t cater well for classical music for that added complexity of who is performer.conductor.

7 Likes

Will JAMS be funded by the BGF? Would be a killer APP imo.

JAMS would instantly seperate the safenetwork from all other crypto projects in the view of the non-technical crowd.

4 Likes

I hav one wireframe where the Home and Library pages Categories could be reordered much like you reorganized apps on your phone. For example instead of Discover at the top by default, I could moved Saved and Podcasts* higher up to the top of the page.

Additionally perhaps there could be an empty Category and Cards to allow for further customization. Would the ability to publish custom categories/cards be cool?

The brightly colored option is my personal favorite as I feel it does have berry colors, kind of fits the branding, and overall seems more vibrant and interesting but that is obviously a subjective personal choice.

I like how the two gradients together get this color burn as the cards move up the screen from being overlayed but I see your point. The previous design had the Cards a solid black over the color which I felt worked but didn’t give off a modern vibe or the impression much work was put into the design.

Do you favor the Dark Mode option?

Thank you for your feedback.

So far the hit box is really comfortable. The album art can take you to the Artist Page, so can tapping the bands name in the minimized player and the maximized player, and when I get the wireframe done, pressing the name of the song will bring you to the album of which the song is on. The rest of the box will take you to the Player and then there is the play/pause button as well.

There will have to be a text limit to truncate anything that would negatively impact the hit box. Any truncated text will therefore scroll back and forth to display all of the text.

I’m thinking for other wireframes such as Playlists or Stations that a character limit will also be necessary. Great suggestion.

I appreciate the compliment! I think many great community apps could come from BFG but that isn’t my place to say. I think the focus is launch first and then whatever is left will be allocated appropriately, which makes sense. It surely would be a huge burden lifted off me though because whatever I can’t do myself, someone else has to and I can’t do everything.

4 Likes

Is jams going to be playing your own collection or do you eventialy think it will have a database of nearly all music like Spotify? @Nigel

2 Likes

Maybe I have this wrong but the more we upload the wider the choice will be. AIUI

1 Like

Going to be interesting is there going to be a way to pay the musician?

2 Likes

Your Library is your personal music library that you have uploaded from your devices, or added to by purchasing music from a Verified Artist much akin to the iTunes/iTunes Store experience, though JAMS would not take a cut of sales. You can also create Playlists and Stations and publish them from Your Library to be found by others under Discover or other appropriate categories.

Home is where you will find publicly uploaded music, music from Unverified and Verified Artists, as well as some Categories that JAMS will in time publish given enough Verified Content to work with. Overall Home is where like a typical music streaming app where you discover what music has been published.

How that works from a technical angle depends on a few things such as the ‘Labels’ feature @joshuef had introduced sometime ago that @maidsafe would/could implement. Then potentially you would simply categorize your personal files with labels, jams being one of them, and give the app permission to read or whatever else would be needed to make for a great experience without breaching any kind of privacy or control of the user.

2 Likes

That is where some other irons are burning, just conception phase though. I want a algo stable utility token to pay artists verified through JAMStand (a complimentary platform but another subject) on a pay per play (PPP) basis. Maybe even only pay what amount you’ve listened to. Verified Artists should be able to split PPP rewards evenly amongst their band members/producers/etc if need be, or at different proportions or even sell streaming rights to others if they wish.

That is some final stage stuff though. Starting off far more simple with a player and personal library and iterating towards fully featured. Still plan on fleshing it all out beforehand though.

8 Likes