The Group Critique was very useful, it is always good to get as many eyes on a design project as possible and it was good to see others work. It was especially fascinating to see all the different approaches people had taken to what had initially seemed quite a restrictive brief, with all the music apps on the market being very similar in their offerings.
For my app in particular, the feedback was mainly positive and the time I had spent getting the basics right in terms of alignment, spacing etc. had paid off and was noted. There were a few issues pointed out, such as the home screen where I ask users to give information via four sliders. It was noted this may overwhelm users, as well as making the sliders too small and therefore hard to use. I felt this was accurate and the advice to split this process into a four-step onboarding to the app made perfect sense and does seem like the right way to go. I had been having issues trying to work out how to explain the concept of the app, which offers music recommendations based on four questions with such little space, now by adding in the extra screens I feel I will be able to make this much clearer to the user which will improve the app and user experience.
The other feedback I received mainly centred on the favourites screen, the design for which I hadn’t fully finalised before the critique, so this was expected and this will be completed now. There was also an issue due to the animations I had placed in my prototype, that were causing the bottom navigation bar to move as the screens changed, when it should remain completely static. I will need to do some research into the cause of this to rectify it, as I think it will probably require me to use components and variants, and I have not used that technique before. However, it will be a good learning experience and a chance to advance my prototyping skills.
With all my feedback written down I started the process of making the alterations suggested in the critique or finding a way to fix issues myself. I decided to start with the most simple issue that came up. This is where I had put certain elements such as song lyrics into card elements, it was suggested that this was not making good use of the space available on my screen and made these elements feel squashed and restricted. It also added another colour onto the screen and this did not fit very well with the overall app aesthetic. Another issue these cards had created was that they had meant the tab buttons to change the content shown, were right beside each other, this could be an accessibility issue as it would be very easy to hit the wrong button, which would frustrate users and negatively impact their user experience.
To combat this I removed the background and spaced the buttons more to allow their to be clear padding between each one to help prevent this from happening. You can see the result of the alteration below and I do believe it has improved the look and user experience of the app.
One piece of feedback I did not fully agree with was the choice to use my more decorative typeface BMX Radical on the buttons. I also use it on the page titles (at the very top of each screen) and it was suggested it might be too much to use it on both. I do not agree with this, it was definitely too much when I tried using it for all the text on a page but I feel using it sparingly as a label on the buttons works well and fits in with the theme of the app. I will not be altering this for this reason as it is readable unlike some more decorative fonts and gives my call-to-action buttons a bit more differentiation from the other elements on the page.
Another really quick and easy to implement piece of feedback was to add circles behind the arrows in my illustrations on the gig listings screen, this made complete sense as they were quite hard to see and by adding the circles it is much clearer to users that they are there and are buttons to reveal gig listings from another venue. You can see this alteration below:
The biggest alteration by far was changing the home screen, my original version had asked users four questions which they could rank on a slider between two icons. This presented two issues one was that the sliders were quite small and could therefore be very hard to use. The second issue was that I had no space to explain to users what the idea of the app and the sliders was all about, it is designed to generate music recommendations according to their answers, but without explanation this could easily be confused and it may just seem like the app is asking some very strange questions. The answer here is to give each question a screen of its own, this will allow me to increase the slider size and provide an explanation of why they are there and what they will do. If I was to develop this app for use, users would go through this process on their first use of the app and then would be prompted to do it again at a timed interval (perhaps once a month). They could also choose to do it again at any time of their own choosing, but for this prototype I will show the whole process, as it is an idea I have not seen in other music apps I have researched so it is a unique aspect of my app I would like to keep.
Below you can see my new home screen and my four question screens:
The last alteration I needed to make was to the favourites screen, I had considered making some more icons to indicate these were the number one artist and song, but this felt unnecessary. For the critique the screen I presented had poor alignment as I had left space for the icons I had now decided not to create. As well as this in an attempt to make the images; which I had sourced online, equal in size I had placed them in frames with my red brand colour at a low opacity value. It simply did not look right and I was not surprised to receive this as feedback. To fix the issues and create a much simpler and cleaner looking screen, I downloaded new images, resized them to be equal in Adobe Photoshop (I made sure to select images in the correct aspect ratio this time) and placed them onto my favourites screen. I then aligned the images and spaced out the text equally to create the much better screen you can see below:
I have now fixed the vast majority of issues flagged in the group critique and have a much better designed app. The only issues I am now left with are those to do with the prototype and the moving bottom navigation bar. I can cure this quickly by changing the animation to instant or dissolve as this leaves the navigation bar in place. However, I would like to see if their is a way to have a push animation and retain the static navigation bar. Even if I do not use it in the end on this project I feel this would be a useful piece of knowledge moving forward. I also have some issues with Figma’s Smart Animation tool to work out and a style guide to create for the app (I have all the components). I simply need to compile them into a style guide and this will completed before I hand this project in for marking.