The aim of the brief was to create a website for a classic XL Recordings album (Editor X). The website needed to be ‘the next big thing’ and to attract music lovers and new potential customers to listen to music from the past. We had to find a way of joining these two audiences by creating a must see/ experience website with a unique UI and UX.
Considering Editor X’s passion in collaboration, the brief also needed to focus on the unity of music and how it can join us together. The website needed to be simple to use and to celebrate the anniversary of an XL artist’s album. The brief had a list of artists to chose from with their albums: Peaches, Teaches of Peaches; MIA, Kala; The Prodigy, The fat of the land; Bobby Womack, The Bravest Man in the Universe.
After listening to each album, I noticed how I could connect to two artists the most with their tone and message, these two were Bobby Womack and MIA.
MIA’s album Kala is energetic and colourful while also sending powerful messages of heartache and challenges throughout the lyrics.
I’m broke, I’ve got indefinite stay,
You can’t touch me like leprosy,
I hustle tough from here to Sri Lanka,
My mum told me to be an accountant,
But I wanna work in a corner shop,
Hussel, MIA (Kala)
The album bleeds with meaning, yet it still keeps the beat catchy for the listener to dance to and enjoy the musical melodies throughout. While brainstorming, I could see potential in the colour and patterns of the album and the momentum of the tunes. Ideas came like using spinning CD’s and moving images on the home page with dancers spinning in time with the beat. The energy and commotion MIA’s album has would make the website UI vibrant and inspiring to connect with, and consequently the UX would need to be just as entertaining.
Bobby Womack’s album ‘The Bravest Man in the Universe’ is a reflection of the soul legend’s heart-ache and fears moving towards the end of his life. By this point he had many difficulties with his health, and this album was released just two years before he passed away. The grit and melody in his voice is warming to the listener’s ears and expresses hardship and determination which inspires and intrigues fans to listen on.
This album also contains collaborations with Lana Del Rey, Gil Scott-Heron, Warp studio wiz Kwes, and more. These other voices give another level to this album and knowing their input inspired me to think of how to represent their work visually on the website. Lana Del Rey is well known across Gen Z and Millenial audiences, so having her voice in the mix will definitely spark more attention for younger listeners.
Bobby Womack’s ‘The Bravest Man in the Universe’
In order to know more about the audience’s opinion about soul music and Womack’s album, I created a survey on Google Forms which asked specific questions relating to the brief.
Before creating the questions, I noted what I wanted to achieve from the survey so my answers would connect to my insight. This technique has helped me create better structured research through surveys in my projects. Below you will find the survey questions and answers. https://forms.gle/Ran7CHjSBxjymmky5
Analysing these responses inspired further research into idea development. I used the a simple method of jotting my thoughts down onto paper so I could better visualise my ideas.
The strongest idea was to have a website homepage which had an interactive musical instrument to greet the viewer with the option to play a Guitar-hero style game. The music and theme would all be linked to Womack’s album, this way the viewer could interact and connect with his music by being involved with the entertainment. This game would be accessible across all devices and could eventually be used across other webpages D&AD want to create for the Editor X artists.
Musical Games and Incentive Research
To better understand the achievability of this idea, I researched for other games that are similar to Guitar-hero but which are accessible on PC’s and mobiles. One video which particularly inspired me (below) showed an array of different options across PC and VR programs. One in-particular stood out called ‘Osu!mania‘, created and developed by Dean Herbert in 2007, which is free to the public and has explored various avenues of interactive online gaming.
Osu have a piano game that users can play intime with the music, like Guitar-hero but a simplified version and free all. I wanted to use this game for the website, but with updated graphics and theme.
Each chord or sound played on the keyboard would be inputted by using the computer keyboard (from 1 to 9 and the space bar). In order to make this simpler for the audience, I decided to keep the keys to 6. On other tough screen devices, the audience would simply touch the keys in time with the music once highlighted. The song would be 1 minute long and the users can choose the level to play with (easy, medium, difficult).
In order to create a reward aspect of the game, the audience would first input their name, complete the game and then be given a customer profile for their effort depending on their score. There would be four customer types:
90% – 100% – Soul Bearer
Player who can play in time and completes a very high-score is a master of Soul.
70% – 89% – The Temptation
Player who kept in time with the beat but missed some notes. Name inspired by soul band ‘The Temptations’.
50% – 69% – Staccato Stigmata
Player who performed with each note sharply detached from the others and not in time with the song however did hit some notes correctly.
0% – 49% – Dissonant Genius
Player who played didn’t play well, but has the potential to do better!
Having their name inserted in the profiles makes the user experience personal and therefore spark for organic interest. There would also be a 3D character to match the score wearing the merchandise for sale on the website. This would promote the items for sale as well as creating a sharable figure to connect to for users.
Visual Research
The latest eye-catching website designs today maintain a consistent art direction with familiar buttons and navigation tools. All of the examples above show this technique while also mixing in their brands own personal message or product. While researching for website types and styles, I was always interested in those which has a 3D element to the design. I decided to use this in this brief response.
Website Prototype Creation
Before creating the website, I had to consider the user flow and objectives of the website. The main points to cover were the gaming section and the incentive to buy the merchandise (via the shop).
Having a section at the top of the screen with the ‘Home, Play, Shop, Contact and basket’ buttons means the customer can click to their desired page at any point in the user journey. A line under the selected page and bold lettering shows the user which page is active.
The Home page is clean and comprehensible, advertising the album while pointing the audience in the direction of the game. The button underneath the main body of text is bold and visible guiding the customer journey.
The second page is the ‘Play‘ page which greets the viewer with a bold title and a background of the universe, inspired by the album name. They would insert their soul name and press the ‘start game’ button to begin. Once pressed, the navigation moves the viewer down the page to the instructions section where they would be shown how the game works, which buttons to press on their keyboard or mobile etc. There is an option to ‘skip tutorial‘ on the bottom right to speed up the process.
Once completed or skipped, the customer will go straight into playing the game. There will be a video of Bobby Womack playing ‘The Bravest Man in the Universe’ song, and the player needs to tap the keys when the notes button comes towards them. This game was inspired by Guitar Hero, however is a much simpler version and is only accessible via the website. The song will last just one minute and gets progressively more difficult throughout the song.
Once the game has finished, the player will be given their score out of 100% with a name based on their success (as previously mentioned earlier on in blog). The customer has the option to play the game again by pressing the blue button, or they can use their 10% off voucher code to buy the website merchandise by pressing the ‘shop now’ button. This page is a reward page which congratulates the player (building customer satisfaction) and guides them to the next step. The character on the left advertises the brand merchandise while giving a face to reward page. Below you will find all of the pages mentioned.
After creating the website wireframe, I created a deck for the submission where the insight, idea and execution is discussed and analysed. I remembered at this stage to keep the visuals big and let them dot he talking rather than the text annotation.
Reflection
The D&AD (Editor X) brief was created and developed independently and was completed in two weeks. The aim was to create a website that would be ‘the next big thing’ and attract committed fans and new potential listeners while finding a connection that brings them together. I used Figma and Photoshop to complete this website.
I thoroughly enjoyed working on this brief as I put my creative skills and thinking to the test. After learning the basics of Figma in a previous task, I was able to experiment and work more flexibly with the tools and areas of the program to fulfill the brief. By creating a survey earlier on in the process, I was able to analyse the target audience’s habits and opinions from the very beginning which gave the rest of the project a strong foundation to build from. I learnt valuable skills to think from the customers perspective in order to frame the outcome around their wants and needs.
Creating this website prototype has inspired further research on UX and UI website designs and I will definitely be using the skills gained in this task in future projects. If I could do this project again, I would create a moving image of the game to bring the wireframe to life so the client can visualise the concept better.
References
Music games:
Osu mania, Guitar hero – https://youtu.be/gNVAr-IcKxI
https://www.interaction-design.org/literature/topics/interaction-design
https://dribbble.com/shots/15562476-Playit-E-sports-Tournaments-Landing-page
https://www.webdesign-inspiration.com/web-designs/industry/gaming
Womack Research:
https://www.youtube.com/watch?v=wKNTCf-tx0o
https://www.youtube.com/watch?v=34s_xRpExGw&t=604s
https://pitchfork.com/reviews/albums/16721-the-bravest-man-in-the-universe/
https://www.discogs.com/artist/10463-Bobby-Womack
Photos on website:
https://thriveglobal.com/stories/why-you-need-a-workplace-jazz-culture/
https://theconversation.com/curious-kids-are-there-living-things-on-different-galaxies-98562
https://www.freepik.com/free-psd/3d-girl-character-jumping-air_17888282.htm
KatiesBlog 