Design thinks

 Looking at website UI design.

Will update with thoughts and better examples later. !!

Colour

 Research specific to Spotify

I'm looking at the way Spotify alters images with colour overlay, forms, text, icons and also masking and editing artist and album images. 

These images focusing on colour

 

Wireframes ...again

Spotify (Public) Artist Page 

Spotify title "Artist Media" far right top green tab selected.

Second row of green tabs: Artist Media tabs: BIO, Albums, Songs, Images, Song Chat, Gigs and Tours

Bio

Albums

Songs

Images

Chat

Gigs and Tours

Chat: Thinking to keep clean big wide window of chats for artist to review. Character limit.

Simple click on scrollable song list. Choose a song and then comment to read. Scroll through comments.

Review Spotify layout - eg: four images across or song list.

Review the shape and amount of information and content needing navigation and time to engage in.

F-SHAPED PATTERN

Z-SHAPED PATTERN

 Side and bottom frames are not pictured. Menu on left stays the same, as does the bottom player and the right friends frame. *Forgot login for Artist Media page. Planned for it to be part of top right bio pic and login - click popup window with one extra login. May not be necessary as one has to be logged in anyway.

Wireframe sketches - redo

These wireframe sketches are better than my first ones. I'm aiming to describe the information hierarchy that I have been designing in my flowcharts

Have to continue to iterate ...and so on and so forth

 Added a few important aspects along the way.

Need a song?

Yes please. 

Two more versions: Interaction Design

Down the rabbit hole

Decisions made.

Got rid of News as an option as it is unnecessary.

Left Playlists alone, though did leave it as an Artist edit option as it functions the same as rest of Spotify. 

However, will revisit as a chat option - this would make sense as playlists are or can be social and fit into the communication with and reaching out to fans, also social and professional networking.

Left Chat out of main tab (still pictured as light blue and with dotted lines).

Included it as an option in artist manage media and content (still refining label).

Keeping chat aspect simple.

Actually will try to make it simpler...

 My last two versions:

Now back to wireframe sketches.

Focussing on FUNCTIONALITY

Interaction Design

 Looking at my card sort and Userflow. Focussed on the Interaction design

Spending time on the Artist Media aspect not the other element to the feature I'm designing... Not sure if this is the right thing. IE: I am fleshing out the wrong aspect. I am however really nutting things out - which I need to do to work through this. Think I'll get there tomorrow. Definitely can't jump into UI just yet. I'm confident I will have no trouble losing myself in XD.

Problems: My Chat feature. Shall I continue with this? Can I keep it simple so it is one of the elements my Artist Media can smoothly and easily link to as an option?

As I'm behind should I keep it simple?

Can I still include it but as a simpler version?

Simpler version, limited? Same amount of interaction and IA needed?

Problems resolved: and decided on the placement of feature/idea in the Spotify interface for Artist Media.  Extending it out in my Info Architecture and then the wireframes a little more to cover all of the extra bits.

Watching XD tutorials

3 good to start clips

Overview 3 minutes March 2020

10 things to know - Adobe XD. - very enthusiastic fellow. Brief and useful. 20 minutes Oct 2018

Long XD tutorial Almost 4 hours, August 2019

Think I'll check out Figma and Sketch later in course, but makes sense to go Adobe as I'm an Adobe Suite userrrr. Feeling pretty excited about getting into the UI. 

Links people send me

Designing With Mental Model Diagrams — An Introduction 

Skeleton Wireframes

 Doesn't look like much but I'm actually getting over a big hurdle here. 

I really want to utilise the righthand side bar - but think that keeping in with the tab arrangement will work better. Still considering an option to use that bar. Keeping simple for now as I check through the user flow.

*Katakana: Bill Evans

Post module 8 Zoom meet - key takeaways

Look up 

the Hook model 

(enjoying this glossary of common Product Management terms and definitions)

Software for prototyping:

Protopie.io  

Axure can create a html prototype

Resources

UI kits by Material Design

(free) icons at the thenounproject

Adobe colour accessibility tools

Tutorials

Adobe XD

Figma tutorial 

Articles

 Medium UX Design articles

There is one on Spotify

Main takeaway from this evening. 

My prototype, how does this [it] solve my problem statement?

Lots to cover here. Not sure I'll sleep. Really I need to clear my mind and step by step nut out my wireframes and sketches. More and again. 

Purple Haze: Interaction design

Hazy.

I keep looking at the Spotify app, specifically the Artist √ page.

KG&LW example

Trying to focus on this: 

Our goal is to create a mac-based editor and artist management system for artist content.

My HMW: 

How might we assist the user to promote and enhance the visibility of their new content on Spotify? 

Gorillaz

I'm charging through the project knowing that there is Spotify for Artists app and that a lot of my artist research pertained specifically to that app. Yet I'm not onboard or inside that app - without signing in as an artist and applying for a distributor I can't really work on this project with that app as the focus. 

I'm working with the Spotify app that listeners and artists use. With the assumption my artist management system will work within the Spotify app (not SforA app).

So it is a tad tricky. Tricky aspects are the multilayered complexity of Spotify. The variables that Artists have at their finger tips to set up their Artist page. I'm trying not to design something that is already there. The latter being the trickiest. There is obviously already quite a variety of artist input and management. Gorillaz and King Gizzard & the Lizard Wizard are good examples.

I have focussed on trying to "promote and enhance user visibility" from my research informed HMW.

Even one aspect becomes complex with the multidimensional options that network to each other in Spotify.

Next step, I'll be diving in with one element - focussing on my User Flow Intuitive Design and keep on with the IA and wireframes. Feel I need to keep panning back and forth over the stages.

*playing with theme of this blog. Not there yet.

Comments thread

 Also I'm looking at Instagram. Thinking about YouTube, Instagram have a user post and then the comments thread is limited to that post. 

Can pop comments thread to Artist Pick or Artist Post in same UI
Or add 5th tab on top of this section. 

So not effectively a chat. A chat thread. So I can simplify my ideas - limit the feature that I am designing. Still... am I on a crazy path? Yes I am. This feature would enhance visibility if specific to, lets say a new album. Does it set up a feature for an artist to manage/edit their own content? 

If they are already popping up playlists, images, gigs, albums, latest releases etc ... then this is an added feature to play a role in that. 

again...  am I on a crazy path?

Lots of wireframing should answer this. 

*flips the hourglass
 

UI Design

Looking at the UI design, hierarchy and web conventions of designs on dribble.com. Here are two examples I looked at. Not amazing, but both have aspects that had points of interest for me.

Thought I'd document this here as the last one in particular had me thinking.

Mid Project Overview/ mild documentation

Documenting the progress of a project.

Who reads blogs? No-one. So a perfect place.

A seperate one perhaps. 

Tiny pics lay out a nice overview of some of the work.

*Not quite animation.

Useful links to come back to:

Spotify Music Chat

Spotify Community

Spotify Ideas

Spotify Rock Stars

Spotify Help