Prototype

❣ Chile in a Photography ❣
No title available
Show & Tell

No title available
Keni

Kiana Khansmith
almost home
h
let's talk about Bridgerton tea, my ask is open
official daine visual archive
KIROKAZE

pixel skylines
Sade Olutola

No title available

shark vs the universe

JVL
occasionally subtle
cherry valley forever

izzy's playlists!

oozey mess

seen from Malaysia

seen from United Kingdom

seen from Türkiye

seen from United Kingdom

seen from Japan
seen from United States
seen from United States

seen from France

seen from Singapore

seen from Bangladesh

seen from Armenia
seen from France

seen from United Kingdom

seen from Ireland
seen from Argentina
seen from United States

seen from United States
seen from United States

seen from South Korea
seen from Bangladesh
@hauntedbirbinterface
Prototype
Iteration: Colour Scheme Feedback
I managed to get my Tutor to take a look at this. I was expecting some criticism on my choice of colour for the padlock on the profile icon, but they were pleased with the clear indication of the user not being allowed access unless they signed in first.
They were concerned on the grey colour favourite and playlist icon with the padlock. It didn’t contrast too well with the purple background which is fairly dark. I got rid of the background image that I used for most pages of my prototype. Other than those few issues they didn’t seem to have a problem with the colour scheme or aesthetic of the app.
Iteration: Colour Scheme
I wanted to try and change a small amount of the colour scheme. I wanted to give off the hint of what features would be available or unavailable by the difference of shade and colour when looking for what’s interactive. I would love to see how this is received by other users when taking a glance. I tried using a darker purple shade for the signing in page. The favourite and playlist icons have a darker shade and lock icons so that the user knows that you can’t have access at all. The icon picture has a blueish lock rather than the white lock.
Iteration: Feedback, Observation and Reflection
I tweaked the icons and logo to make sure that they didn’t clash as much. I hoped that by changing the appearance of the icons. People that interact with the prototype would know that these options aren’t available unless they sign in. I took a participants feedback into consideration and decided to keep the task bar for all the pages rather than the home page.
I wanted to observe this time around when testing out my prototype. Of course, I still instructed them on what type of scenarios to carry out as usual. As I as as watching them explore the prototype. I noticed a few issues they had struggled with:
When I requested them to search for a song, they would at first have some trouble finding the search button and click the metal music sub-categories. When they did eventually click the search icon they would click back to the home page and try to click the sub-categories again.
When I requested them to try to message someone, they did manage to lick the message icon right away. However, when I asked them to edit their profile, they clicked the friends icon by mistake before finding the profile icon.
There’s a good chance that I would like to be able make the metal sub-categories interactive just in case a problem like this ever happens again. May be I can change some colours on the main page as well. Most of all, I should fix the typo that I have had for the song for a while now.
Iteration: High Fidelity Prototype (Feedback)
I had decided to move onto the high-fidelity prototype. Based on feedback received from my low-fidelity (paper) prototype, I decided to add on new features for showing that it was a app where you could discover, favourite and create playlists for this music service. For the vibe of the Metal music service, I wanted to go for a grunge and cool atmosphere for Metal and selected a font that suited the vibe of Metal music as well. I eventually wanted to show my design to other people see any improvements that it might need.
Feedback from other people:
The logo clashes with the background and would be better off with blending in instead.
Metal aesthetic is fitting for a app that provides Metal music.
The task bar down below should stay for easier navigation.
They should be a home icon to go back to the default page when the app is opened.
Instead of using locks to show unavailable features, giving the unavailable icons a faded colour would be better.
Varied backgrounds would be preferable.
They had a bit of trouble locating the cross right away.
The Gmail logo could be changed to stand out.
The profile icon wasn’t spotted right away until instructed to search for it.
The icons contrast well with the colour scheme.
Font is stylish, but could be tweaked.
The search bar should go on the top rather than stay at the bottom.
Background isn’t distracting.
Icons are good for identifying purposes and function.
The background image clashes with the images for the sub-genres of Metal music.
Task bar icons were easy to understand.
Expected to click the search button on the keyboard layout to get results.
Make task bar darker to match logo.
With this information, I should be able to make changes and improve the functionality of the interface and hopefully tweak the visual theme as well.
Iteration: Feedback for new Prototype and Possible Solutions
I managed to sort out the technical flaws that I had to deal with before. Once that was done, I decided to go to more people in my age group to get any sort of feedback to hopefully improve the interface and aesthetic design of my prototype. I wanted to make sure that I could make any more changes before getting to the high-fidelity prototyping stage.
I went for testing the prototype on younger people who are close to the age of my target demographic. Young peers that provided feedback towards would mention:
They were happy with the crosses prominent on most of the pages that you would be able to close. This is great for simple navigation, but would prefer an option to sign out as well.
When opening up the profile page, the background art takes too much space. Taking up only a third of the total space on the profile page would be better.
When the visualiser for playing a piece of music is on, the display makes it seem like a music for discovery, not casual listening. I would be better of adding on a playlist and favourite feature.
The FAQ page could have more interactive features and a colour scheme would be nice. I could implement this feature in the polished up prototype in the future.
Iteration: Feedback and Possible Solutions
I finally made it into a digital prototype for other users to interact with. I’ll be honest. I was tempted to leave the prototype alone and show it to no one, but I needed to be able to get feedback highlighting any design flaws. When I showed this to a family member (that fitted my target demographic), they mentioned a few design flaws:
When they exited the friends’ message page, it took them back to the home page instead of the main page for the friend tab.
After they selected a genre and song, they would have to close a few tabs before returning to the home page. This was because the music search bar would show up after closing the audio playing page.
They didn’t really have any issues with the overall layout.
I wanted to be able to make some changes to my digital prototype in order to avoid that problem again. I started with uploading some replicas for a few wire frame photos and making different links to other pages. I want to be sure that the user won’t have to be annoyed at having to be sent straight back to the beginning over and over.
Iteration: Wire framing and Visualiser Concept (based on concept sketches)
When I had a clear understanding of what I wanted to produce. I needed a neater version to present when I introduce my first prototype to a few users. I thought a cleaner sketch would be easier on the eyes for the users.
Based on the feedback I have gotten on my sketches for my interface, I wanted to change the visualiser interface for when a audio track plays. A few people had commented that it looked like a sun with eyes before. I didn’t want that first impression when other users would interact with my music service product. This design could still change in the future if it isn’t successful with my demographic.
Iteration: Making Sketches for my Metal Music Service
Well, this was bound to happen. In class, we needed to sketch our designs for our concept. The main objective of focus is functionality. The visuals will be designed at the very end when I eventually create a polished mock-up of my music service. I would look back onto my mood board and Soundcloud for ideas of what features would be recognisable to the user fo their function and navigation purposes. I did show a few people in my class.
Feedback
When I had viewed my images and explained what each picture represented. My Tutor had commented on the use of market research and persona to plan and design the rough interface. They were happy with the discovery (friends and messaging them) feature I had implemented. I had taken into account that user often want music that fits their preferences as accurately as possible. I considered that friends can recommend a song whilst chatting with you.
Showing this to my peers had sparked confusion. A few of them had thought that the visualiser I had sketched for when a song plays resembled the sun, but they still appreciated it from an aesthetic viewpoint. They have said that it maybe because of the current appearance at the moment. They were fine with the ‘x’ button feature for a page to be closed when you are finished and want to return the main page. They were happy with the guest option (being an optional choice) when signing in.
Iteration: Mood-board
To get started on my design for my interface, I wanted to take a look at a few mobile designs. The captions for these images are my own thoughts reflected based on what I would want to do, but I will take into account what other people of my target demographic would prefer for the layout when I get down to designing.
Iteration: Preparing My Audience Persona
This was done using my market search collected from conducting interviews and questionnaires. I was aware that I needed to start designing my product soon enough. By creating this, I have a clear image of my target audience and what they would roughly expect in a music service. I have never used any of these music services in the brand section of my persona sheet. I have only ever looked at reviews or asked other young people for opinions on these music services.
Iteration: My Market Research (part 2)
I did some more research since the interviews never gave me enough information. I decided to create some questionnaire sheets for other people to answer. This time I wanted to get my target demographic’s outlook on their current music services, what they didn’t like, what they would want out of the music service aimed towards them. I wanted ideas for visual design and interface to implement when I get to the wire framing and prototype stage.
This time it focuses on the visual aspects for my interface design. I wanted to have an image of what my target audience wanted that is commonly associated with Metal Music. I would ask questions regarding what images come to mind when certain words are displayed. Other questions were similar to my interviews.
Iteration: The Beginning of My Market Research
I had started recapping the my brainstorm from the last time. I wanted to look at the highlights and downsides of my ideas. From my discussion from my Tutor, I had already decided to create a mock-up of a metal music service. I remember going through observation techniques with my Tutor and classmates. Interviewing participants was one way of gathering information from your demographic of your product.
I had only managed to interview a few people who were metal music fans. Keep in mind that this isn’t the only information I will rely on. I might try to carry a focus group as well.
There were only four questions that I had asked each of these people and their answers.:
1. When you think of/listen to metal music, what colour scheme would come to mind in terms of the mood/atmosphere it gave off?
People wearing darker clothing (preferably wearing their favourite band t-shirt.
Alternative clothing, black and white. Piercings, studs, tattoos, rings, spiked bracelet, flamboyant dyed hairstyles etc.
Dark colours-red, green, and sometimes more colourful schemes.
Black and white make up.
Black (in terms of black metal)
2. When listening to your preferred music streaming service, were there any issues you have had with it?
Uses Spotify, but it doesn’t have their favourite band Tool. Paying for membership is annoying.
Had used Spotify and Deezer, but got annoyed with paying membership.
Music isn’t categorised properly and is censored.
3. What would you want to achieve from a music streaming service?
Wealth of sound, good quality sound.
Clean download (fast and efficient).
Wanted to listen to music offline and online.
To listen to music uncensored.
4. What is your attitude towards music streaming services that charge money for membership or play ads?
Ads are necessary to make money. Bands and tracks are released and people have easier access to it.
Ads aren’t a huge problem.
As long as there is an option to skip them, there isn’t a problem.
Understanding User Research
This was a great opportunity to gain some knowledge about user research when designing a product towards a target audience. We needed to be able to identify our target audience through a researching their desires and needs when designing a music service for them. In my case, I would need to appeal to metal music fans on a broad scale.
I had originally intended on interviewing a few people I know who are metal fans, but after discussing the pros and cons of interviews, I decided to consider other observation techniques.
Iteration: Learning User Experience and Ideas for My Music Service
This was quite beneficial for me. In order to understand what type of experience my target audience would want, I need the product to be able to cater to their needs, have a good layout, the interface should be simple and painless to use. The customers shouldn’t have any issues with navigating through the product to get what they desire.
The honeycomb structure in my notes was taught to us to make sure we would understand what makes a good product.
Before even beginning my market research, I decided to brainstorm some concepts which would be a possibility for me to create within the amount of time we even have to finish this.
A few concept included:
K-pop music platform
Kids bop music platform
Metal music platform
I had to be as realistic as possible when it came down to selecting an idea. After a discussion with my Tutor, I was given the perspective of how I would be able to find the target audience of each concept. I had realised that finding metal music fans would be easier to find than kids or teenagers that enjoy k-pop and kids bop. I figured after discovering that my Tutor listens to metal music themselves, I have considered with progressing with the metal music platform.
Intro to Experience Design
This is just a summary of what I have learned in my one-hour lecture. This knowledge should help me with Iteration Design when designing a music service towards a target audience. I haven’t quite decided what I would do for my concept or which demographic my product should appeal to yet. This was a good start for understanding how I should approach this assessment when studying outside of my lectures and workshops.
Focusing on specifically (for assessment): -Concept (worth 15% of total marks)- I would need to observe other people related to my target demographic to be able conjure up concepts.
-Iterative Design (worth 40% of total marks)- I can prototype and test my ideas to people that match my demographic. By doing so, I can diagnose any flaws in my wireframes that I can improve.
-Quality of Minimal Viable Product (worth 30% of total marks)- Once, I have created multiple prototypes and wireframes, I can create a mock-up of my final product.
-Presentation of Portfolio (worth 15% of total marks)- This blog will be the portfolio for all the documented development of my music service.
I would need to put most of my focus on development for creating my own music service, even if it means going through a rollercoaster of trial-and-error to reach the criteria that I need in order to pass.