This blogpost addressed the week’s challenge. Click here to read my take on this week’s content and here to read the weekly reflection.

Challenge Activity - Prototyping

This week the challenge was to take an existing artefact that we found interesting and to prototype it with one of the methods we were introduced to. It was an exercise in reverse engineering, as when you build something yourself you become a lot more aware of all the different design decisions that were made along the way, by pulling something apart you can better see and question the threads that hold it together.

I chose to create a lofi prototype of how you create a Blend playlist between three people on Spotify. A blend playlist is a playlist by at least 2 spotify account holders (and up to 10) in which spotify itself goes through what you listen to and as a result generates and maintains a combined playlist. It will try and put together songs from your personal playlist that have a vibe or style overlap and will also include songs that are in both your playlists. It updates daily depending on what you’re listening to so will evolve with you as your music taste evolves.

I created this walkthrough using Adobe XD, a software that I had been meaning to try out and picked up quickly as I am used to other Adobe software with some help from the tutorial linked below.

https://www.youtube.com/watch?v=oo5EoelQ_DQ&list=PLZ278-N8dlH-L_-tsa7A4L1iFinvkB9qA&index=1&t=1305s

The public link for walking through the interaction is below. Be aware that I decided from the get go that I would not include text in this prototype, this can sometimes make going through the steps confusing. If you can’t find the next interactive element, click within the prototype and they will temporarily highlight blue, the mouse also changes to a hand when over an interactive element.

Spotify fusion playlist - prototype

Detailed breakdown

Here is a detailed breakdown of observations made during the constructions of this prototype through the user journey.

Quick note on vocabulary: I use a few terms within the breakdown below which I will explain here first for sake of brevity in the breakdown.

• affordances - this is the relationship between what an element signifies it can do and the user. You understand that a heavy box affords weight, you know that you require strength therefore to pick it up (Norman 2013)
• signifiers - these are the physical / aesthetic elements of an object that hint at the affordance possible and how you might do it. A door handle that you can only pull on for instance is a signifier that the door affords swinging towards you to open (Norman 2013)
• text hierarchy - the way text is layed out on a surface so that it guides your eye from the most to the least important information the creator wants you to read. This is done through spacing, font size and position. (De Soto 2022)

1)