UX Concepts for soundtrack.io

[alexknutson]

I've been working on some UX ideas guys. Would love some feedback!

Disclaimer: This is by no means a completed design. No design is ever really "finished", but it's still missing key components to the UI...

Main Concept -

Concept v1 - Where Add Track overlaps the main content

Concept v2 - Where Add Track is "inserted" between the Playlist Queue and the Video Player. This briefly pushes content off the screen for some small resolutions.

List of things to do:

• [ ] I'm not attached to the 'spin it, lame' language. My goal was to visualize the amount of votes the track has received (the green/red bars increase in width as the votes accumulate)
• [x] I think we can do something more interesting with our logo. Though I have no idea where to go with that yet. For now, it's similar to what we currently have.
• [ ] Volume/Mute Icon next to the volume slider
• [ ] Create the Add Track button that triggers the Add Track search/import menu.
• [ ] More sample tracks in the queue to visualize how a fully populated queue might look like.
• [ ] The 'Logged In' user settings bar on the far left side needs to be figured out. SMALL menu that is heavily icon based. Maybe no text at all? ie: Gear for account settings, logout button, another manage playlist icon (similar to the shortcut found above the playing video), etc
• [ ] More examples of what each page (About, History, People) might look like using the overall design. I really like the minimalism of "inserting" those page's content the way the "Add Track" content is inserted into the main view. Ideally--- I don't think we ever want to take the user away from the main page. If we can keep the content of those pages short and sweet, maybe we can fit it all in a similar way?

Take note of...

• [ ] The heart (shown as active) should toggle the Add to Playlist fancybox (or whatever it is we use), and slide up the text above to reflect when the user first added this song to their specified playlist.
• [ ] Google+ Sign in? Please? :+1:
• [ ] Eric mentioned he likes Blynde's sidebar for the songs queue. I made the design with the left sidebar in mind, but this could easily be reworked so that the sidebars are fixed to the right.

The Geolocation Visualizer

Obviously this would take significant work to bring into fruition, but I think it would be slick to visualize where users are coming from, their profile, and what our peak hours are for each day. If you guys don't like that idea, ignore the entire bottom half of the main content area.

I'll add more later. Bed time now... zzzzzzzz

[tedkraus]

Check http://alpha.connect.com/ for some interesting UX concepts (Im really just talking about for the map part of the mockup).

[overra]

Working on coverting it to html+css.

http://fiddle.jshell.net/overra/jYZuK/1/show/light/

[alexknutson]

The user just logged in....

• The song cards can slide out on hover, adding a box-shadow around the card and illuminating the arrows to move it in a certain direction
• The User Login & User List is now FIXED to the right side. Allowing ample room for our video player to expand. We can also play with the set width of that right sidebar. I'm feeling like it'll probably look a lot better once it's in code and has more room to breath due to the higher resolution range of most browsers.

He just clicked the Add Track button

• Take note of the CSS3 transition of the Add Track button. It should do a subtle BOUNCE up to align with the green Add Track bar

The user clicks the settings tab

The user decides he/she wants to edit the 'Account' Settings

• Take note of the change in position of the blue settings arrow. It should animate down to the menu item the user has selected.

The user has both the account settings and 'Add Track' pressed

[alexknutson]

Queue changes

• New ideas for the Queue display. We're adding extra information onHover, and condensing the tracks with very little margin between them.

[overra]

Last update from me was a while back, forgot to post. Not sure when I'll have time to work on it.

http://fiddle.jshell.net/overra/jYZuK/8/show/light/

[martindale]

Thanks, @overra! I'm starting to pull your work in now. The challenge is integrating it with Bootstrap, which has all these nice button and plugins, but is getting in the way. I've started a rudimentary port with the color palette, but there's quite a bit there. I wonder if something like the Bootstrap themeroller would be of use to get us to a base styleguide, then we can implement your absolute layout?

[martindale]

Update: I've started pushing a few updates to the actual soundtrack.io site based on these mockups and @overra's work. I'll keep working on this as I have time, but feel free to submit a pull request for other attempts in the meantime.

[martindale]

I've opened a new milestone, UI Overhaul, to track all the issues related to this.

The current interface is built, poorly, on top of Bootstrap 2 (see #115). We should evaluate a new framework, with the following goals in mind;

• fully responsive (#76)
• clean, modern style (#21)
• single page application (#31)

I'd like to investigate the following technologies:

• Semantic UI instead of Bootstrap
• Flexbox
• Durandal
• Maki

I know @alexknutson and @vorathe have expressed interest in working on this, and I'd like some help as we investigate what it will take to turn soundtrack from its current prototype state into a usable public beta for others.

[CowDotDev]

I will definitely be helping with this project. I am currently working on the landing page UI overhaul. I am mocking it up in Sketch, currently. I will post the mock-up when I am finished and then we can go from there! @Vorathe - Let's get together to figure out what progress you have, so we don't step on toes. I'm Krewe on Soundtrack, or hit me up on gchat ([email protected])

[CowDotDev]

@martindale I think that Flexbox would be a great technically to use with the site's Front-end. PureCSS is a grid-framework that uses flexbox, so that would be something to look into.

[martindale]

@ZachCase I agree totally that Flexbox is the best approach for the layout. I've half considered just starting a clean Flexbox layout from scratch, and then writing my own quick little two-way databinding to manage it. Haven't had time. Keep up the good work!

[CowDotDev]

@Vorathe Here is the mock-up I made. The only thing I left out was the footer... due to laziness, sorry.

[allusis]

From scratch is probably the best option, but there are a few nice alternatives worth considering:

The Bootstrap4 alpha has flexbox opt-in, which is pretty good if you are semi-used to bootstrap markup. Of corse using the Sass version, and removing all of the unused components helps quite a bit with the bloat.

Also, if no one has looked into the Angular Material design lately, it's come a long way. https://material.angularjs.org/latest/#/

[martindale]

Awesome feedback, @allusis. Have you seen Semantic UI? I'm using it in Maki, and I think it might be a good foundation. On the other hand, maybe a handwritten CSS stack might be even better.