Y1 Specialisation
Specialisation Portfolio: Revamp Website
Persona
My persona is a music lover and is an active user of the website I am revamping, Lyrics Translate. My persona enjoys music of different genre and language and enjoys going on Lyrics Translate to understand the meaning of songs in another language. As some websites have to scroll to the end to play the audio and video, my persona could not listen to the song while looking at the lyrics.
The empathy map helped me to empathise with my user and is an addition to the persona. The empathy map shows how my user experience is with Lyrics Translate website. It also includes what my user has heard from other people's experience.
Original Website
The original website has images here and there and has a lot of navigation. I realised that the language change option is not very obvious for users and found the website cramped. The website for songs with multiple languages has two sections and these are five pages I chose to revamp.
Artists List
List of artists that can be filtered.
Register
Registration page with all element aligned to the left.
Song Lyrics (English)
Lyrics of a English song or a song in it's original language.
Song Lyrics (Foreign)
Lyrics of a song in another language.
Artist
Artists' profile on the website
Wireframes
Artists List
Artist lists has a filter bar to allow users to sort by popularity. Users can also sort by alphabet by clicking on the alphabets above the filter bar. The language that users prefer to view the website in is accessible to change at the navigation through a drop down.
Register
Centralised the registration page and gave the register and login coloured buttons so that users know which page they are on through the navigation.
Song Lyrics (English)
Song Lyrics (Foreign)
Added titles to the song parts such as chorus and verse. Video have been fixed to bottom right of the screen so that user can listen or watch the song's video at any moment on the page. Added a photo of the singer so it is easier to differentiate when there's multiple singers.
Artist
Made the artist profile resemble more of an identification card so that it looks more organised and enabled a filter bar so that users can sort by different categories.
Actual Screens
Improvements
I have added images to the song lyrics and made the information more organised. The bottom right has a fixed video for the user to play or watch while looking at the lyrics. There is a large data based on Lyrics Translate, so I added a filter for artists and for songs to make it much more easier for users to search. There is a search bar for searching by names.
Final Thoughts
I felt like I could have selected a better colour scheme that can suits various type of music genre and has a versatile theme. This helped me gain experience for designing websites in general despite the fact that I am revamping it.