Link to Vimeo video of app prototype:
https://vimeo.com/user91332725/review/331572350/06eab2d4fb
Link to Vimeo video of sketchbook tour:
https://vimeo.com/user91332725/review/331677571/f5ef49f930
Sketch booking
This module was the first time I used a sketchbook throughout the entirety of a design project. Because of this I was quite anxious, especially at the start of the module.
In reflection, I’m really happy with how my sketchbook turned out. Using cut-out images and photos alongside sketches makes it look really eye catching and interesting, and I think that you can clearly understand my design process by reading through it. At a few points, for example designing physical devices, there are gaps between pieces of work. This is due to me returning to old ideas throughout the module, which might make reading the sketchbook slightly confusing.
I found keeping all my work for the module in one place – usually I use a combination of sketchbooks and loose paper – made organising my thinking much easier and since all my design process is in one place, it makes reflecting on the module much more simple too.
Storyboard
At first I was unsure what approach to take my storyboarding. I made my first storyboard using sticky notes focused on the concept of a student needing to study for a test the following day. This storyboard didn’t make it into my sketchbook, but I reiterated this and created an alternate storyboard focusing on a user using nature sounds to assist meditation.
I struggle with illustration: although I usually don’t have a problem visually describing my ideas, My drawings are often quite rough and visually unappealing. This is something that I’ve seen improving since I started first year, I am much more comfortable experimenting with different materials and visual styles.
This project is actually one of the first times I used digital illustration. Usually if I’m creating graphics (or something similar) on a computer, I will draw it out physically then use this as reference. When I was making the final storyboard I used Adobe Illustrator; I created individual files for each ‘panel’ of the storyboard, using differently layers to sketch basic shapes, then add details, colour and text, and then composed them all in one image.
Luckily for me, when storyboarding the quality of drawings matters very little. Instead, it is important to focus on how users utilise your design and how the design impacts the user. I actually made a (very rough) storyboard to help with my final storyboard, only looking at the user’s feelings and emotions throughout interacting with Streamer.
Experience prototype
I found experience prototyping very engaging but very difficult. I read the text on using experience prototypes that was uploaded to blackboard (Experience Prototyping by Marion Buchena and Jane Fulton Suri) and used this as reference throughout my design process.
I intended to include another part of the experience prototype that could either help increase the understanding – specifically the role of the product and how it reconnects people and nature – of the interaction as a part of the rest of the prototype, or could act as a standalone experience prototype.
I could either compose this as informative or interpretive research. Informative data is in depth information that clearly details what a user does and why, which can be used to inform design decisions. Interpretive data is generally collected data that is void of much or any detail or description and allows the designer to interpret the information in more creative and abstract ways. For example if I was to compose an experience prototype intended to collect informative data This could entail a fake microphone that the user would deploy, and they would make a photo of where they deployed it and why they chose this spot. They could even use their phone to record a sample of the audio at their chosen location. This would increase the understanding as a designer as to how users are using this product, allowing for changes to be made to accommodate factors such as damage though wear and tear, alternative charging methods and investigating if this artefact encourages people to physically engage with their surrounding environment more. If I was to collect interpretive data however, this could be carried out in a very similar way except instead of a user noting, recording and reporting on where and why they placed their fake mics, a user might simply take a photo of the location or an audio recording, without the explanation.
In retrospect, I wished I could’ve improved on my experience prototype more before the final hand in. I spent much more time focusing on the Adobe XD app prototype. Although there isn’t anything wrong with the PDF prototype, I feel that if I could’ve put more time and effort into it, it would’ve been more visually appealing and possibly easier to understand without any context.
App prototype
I created an app prototype using Adobe XD, to address the ‘look and feel’ of the experience prototype. I have never used this software before but found it really intuitive and easy to use.
I took a couple different approaches to my app layout, initially I wanted a ‘carousel’ effect, where the user could swipe across the screen (similar to swiping album artwork on the Spotify app to change songs) to change streams or settings, but found that although XD is capable of this effect, it is ill-suited for more than 3 ‘tiles’ to swipe between, and is very confusing to design.
I then looked at a layout that showed streams in a long list. Although this was an improvement, it wasn’t very visually appealing. The text-dominant interface looked cluttered, and there was also no hierarchy. I used a list design similar to this for the ‘friends’ section of the final app prototype.
I am vey proud of my app prototype. I think using a UI design centred around visual tiles makes it very easy to use and aesthetically appealing. I established a hierarchy using typeface weight, size and colour. A consistent colour scheme also contributes to making the app look good.
Logo
I wanted to create a logo that reflects the minimalist UI design of the app that could be used within the app prototype – I used the logo for the ‘home’ screen – and that could also be used as an app icon.
I wanted to use bold, simple shapes to create this logo. Initially I wanted a design including a drawing of a tree, to emphasise the focus on nature, but wanted to make it more relevant to this actual app. I tried to create a winding stream between two mountains but struggled with creating this illusion.
I used two cut-out pieces of paper to try to figure out how I would create this effect, and when I was happy with the logo, I used the paper cut-outs as refence and remade the logo using Illustrator.
Summary board
I left my summary board until the last fortnight or so of the module, as my approach to my design kept changing so much throughout the project. The image in the background of my summary board was taken during the Tentsmuir visit. I wanted the layout to reflect the minimalist design of the app and interaction as a whole.
I wanted the focus of the summary board to be on the feeling of ‘retreating to this natural space, especially when stressed or anxious. I wanted to convey the utility of this interaction for working people too, hence using a man working at a computer as the silhouette. The main focus is obviously the audio however, I wanted to focus more on the aspect of the user listening to the audio rather than using a phone to stream the audio. This is why I chose to only include the headphones, without any other devices visible.
