Fig 1.1

Fig 1.1 shows a flowchart I created to present a walkthrough a user would experience when using my A.R. streaming service addition. It was really useful to create this chart as I was able to organise what I would like to focus on creating. I realised that rather than focusing on creating a homepage/navigation prototype, I would like to display how a user can interact with albums and playing their music.

Wire Framing

Wireframing is a technique used in UX design to create the structural level of website/application/A.R. experience. It was really useful to create the above wireframe as base for how a user would view a track list of their selected album as it allowed me to organise and experiment with different layouts quickly and efficiently- rather than including details I can insert in my final concepts.

Fig 1.2

Fig 1.3

Fig 1.3 shows my first wireframe experiment. I attempted to create an interface that resembled the Spotify layout including a very angular, flat which defined each button and option; an overall dark, grey-tone colour scheme and a vertical track list which the user could scroll through. However, I want to take advantage of the A.R. technology I am hypothetically using and did not like how this interface felt disconnected from the environment the user is within.

• First level square base has a high transparency the smaller rectangles which will hold the song title/info
• User feedback: (interface inventory) (current song playing, first) rectangle is a lighter shade of grey than the rest and a lower transparency
• Glow around each individual shape to stand out against the real-world setting

Fig 1.4

Fig 1.5

After my first attempt at wireframing, I decided to make a similar layout that is more immersed in the real-world environment. I increased the transparency of each individual tile on Adobe Illustrator allowing the background image was still visible. I also created a side view which shows how the track list tiles would appear as a layer which stands in front of larger grey background rather than having a flat single cube. This would create a 3D effect that draws attention towards the focal point which is the songs they are selecting to provide an overall more exciting view.

Fig 1.6

Fig 1.7

I have also included a wire frame in which the track list rectangles break out from the background (Fig 1.6 & 1.7) to further enter the environment, rather than being contained within a cube. I considered not including the background cube at all however the track lists alone would be stand out or be visible against a real-world environment without this darker, block of colour.

Fig 1.8

Fig 1.9

Figures 1.8 and 1.9 show other concepts I considered all including the ability to pause and play music by touching a play button that is currently used on the Spotify software. I decided against continuing to include this button as I think it would be unnecessary and clutters the interface which I want to be as simple as possible. Instead, the user will be able to click on the track currently playing to pause it/ pause by double tapping e.g. an AirPod/ earphone or by using voice command into a microphone.

 

Fig 2.1

 

Fig 2.2

I began to also create wireframe experiments showing how albums would be accessed by the user before they can even view the track lists. I adapted the Spotify interfaces ability to easily gesture left and right on the mobile app to scroll through songs on Spotify (Fig 2.2) an ability similar to flicking through stories on Instagram’s app. This visually informs the user of other albums they can preview. I was inspired to consider transitions and moving between frames after watching the Netflix documentary Abstract: The Art of Design episode on Digital Product Design. The episode follows Interaction Designer and previous head of design for Instagram, Ian Spalter. It was a really interesting documentary in which Spalter discusses features such as what a transition between stories on Instagram looks like and how this can effect the users experience. This prompted me to consider how the user can drag different albums and move albums around the vision.

Fig 2.3

Fig 2.4

I considered how feedback can be provided to the user to inform them which album is currently selected like a hands free version of a mouse hovering over a button on the desktop. I decided to create a glow around the central album (fig 2.3 & 2.4) and edited the other background albums to have a higher transparency to draw attention to the currently selected album.

Fig 2.5

Fig 2.6

Fig 2.7

I continued to also create prototypes that allow the user to interact with album art and also how album art could interact with the user’s environment. I include a clip (Fig 2.5) which shows how an album could begin to move if left for more than an allotted amount of time without user’s interaction and in Fig 2.6 I show how this album could integrate itself into the user’s environment. (Fig 2.7) I also sketched how a user could manipulate and manoeuvre iconic album art.

 

Fig 2.8

Fig 2.9

Fig 3.1

Voice Command

I decided that gesturing to open homepages and menus was a lot unnecessary hassle for users to gesture through in order to reach their goal of playing music. Therefore as demonstrated in the below images, I decided to utilise voice command technology used by companies like Apple (Siri), Amazon (Alexa) and Microsoft (Cortana). This would allow the user to orally express instructions like “Show me e.g. Taylor Swift’s most recent albums” (Fig 3.1) while they are on the go (e.g. walking down the street), providing less obstruction and allowing the user to browse the most exciting features of the modification.

Fig 3.2

Fig. 3.3

I continued to work on how the album could integrate itself into the user’s environment, taking inspiration from films which inserted their sound track into scenes by showing the fonts against the environment (Fig 3.2). Taking inspiration from the tone of the album I included in the previous screenshots (Fig 3.1) of Taylor Swift’s album: “Folklore“, using photoshop I created a greyscale filter which the Meta glasses would layer over the user’s surroundings that matches the album art’s colour scheme, emulating the tone of the music the user is streaming similar to music edits created on YouTube which insert rain over songs. I also digitally drew trees that feature heavily in the forest imagery of the album, experimenting with how I could insert objects or scenery from the album into the user’s environment as they are on the go.

 

Fig 3.4

 

 

Fig 3.5

In the above clip (Fig 3.5) was inspired by my study of vinyl records and how a consumer physically interacts with a copy. I think that gesturing to move the album cover tile by dragging it away to reveal a circle disc inspired by the shape of a vinyl would be an effective way to show the track list would be a successful way to transition from one to the other fluidly while also pay tribute to previous eras of music listening.

 

Fig 3.6

Fig 3.7

Fig 3.8

Fig 3.9

Fig 4.1

Fig 4.2

(Fig 4.2) The above is an experiment in which the track listing take a more 3D form however I preferred the flatter wire frame in Fig 4.1 and will continue to develop my idea using that interface.

Fig 4.3

As shown in the above, I used Phoebe Bridger’s “Punisher” album art and decided to continue with this theme including another image taken from her album’s photobook while using Adobe Illustrator I was able to layer on top of the circle disc- another call back to the image/art included in the centre of vinyl discs. On Adobe I was also able to use a higher transparency on the top and bottom tracks shown in Fig 4.3. I did this to de-clutter the user’s vision, allowing them to focus on the centre three tracks (currently playing, immediately before and immediately next) that they are more to want to interact with.

Fig 4.4

Fig 4.5

On the Spotify desktop the length of the track is included on the track bar however I want to keep the information on the A.R. tracks as minimal as possible while still reflecting the Spotify interface. I excluded the timing at the end of the bar as I did not think it would be necessary for someone who is on the go (but if I were to continue working on this design, I could include a way in which the user could gesture to view more information about the track?). Instead, to provide the user with some feedback on how far through they are in a track, I included a transparent green tile layered onto of the central ‘currently playing’ track (in a bolder font than other tracks in the list). I matched this to the Spotify’s green and if in action, gradually expands across the tile as the song progresses similar to the feedback when listening to songs on the music streaming service SoundCloud (Fig 4.5).

Fig 4.6

Fig 4.7

I decided to take advantage of the circular disc that sits behind the track listing which was previously going to just be a background layer and inspired by the ‘Click Wheel’ used on older versions of the Apple iPod (Fig 4.7), I created a mock up in which the user gestures to swipe the disc allowing them to scroll through the tracks as though they were spinning the vinyl (show in motion in Fig 4.9). I also included a clip ( 4.8) in which the disc behind the tracks spins as a vinyl when played on a turn table, indicated by the image layered on top spinning however I think that this combined with spinning the disc to scroll through tracks would be too disorientating for users. Therefore, I decided to keep the “Click Wheel” feature.

Fig 4.8

 

Fig 4.9

Fig 5.1

Fig 5.2

Fig 5.3

I also combined my wire frames to create the above example in which the user gestures to pull the track listing to the right (Fig 5.3), exposing the disc below for the user to spin and scroll (Fig 5.3) as discussed earlier. I experimented with this concept as it would be easier for the user to see the disc edge they are gesturing over to scroll down. However, this modification would add another gesture to the user flow.