The product:
Responsive website for Jazz Trio "Moove" from Vevey.
Project duration:
August 2021
My role:
UX designer & UX researcher.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, visual design, interaction design.
The problem:
A very good jazz band from Vevey needs a website that would announce to their audience upcoming events and sell their albums.
The goal:
Create a responsive website with information about the band, events, with functionality to listen to the albums and buy these albums as CDs or a Vinyl LPs.
Understanding the user
User research: summary
I conducted interviews and created empathy maps to understand users I’m designing for and their needs. Primary user groups identified before the research were Millennials and Baby Boomers predominately male who appreciate jazz music. After the research I came to a conclusion that primary age group assumptions were correct. Although I was wrong assuming that female audience won't be as interested in listening to jazz music. It turned out that both were more or less equally interested.
The research confirmed that a successful website is supposed to look stylish, be user-friendly, has clear information flow and not to be overloaded with unnecessary information. The process of buying an album should be easy to follow, with clear guidance and progress indication.
User research: pain points
Bad design and not friendly UX
Many websites dedicated to music bands unfortunately have really outdated design, bad UX and leave a very bad aftertaste. Meaning that one has to be die-hard-fan to proceed with buying an album or swag or find useful information about the band.
Bad accessibility
They are not accessible and they don't support multiple languages.
Abundance of non essential information
The websites dedicated to music bands often have too much of irrelevant information. A successful website should have only the most interesting information for the viewer.
Bad ordering albums experience
Too complicated buying experience with lack of well-defined steps can discourage people from purchasing an album from the website. It would mean a lost financial opportunity for the band.
User research: persona
Problem statement:
Pierre is a 45 year old french designer who loves jazz music and needs to order a special edition of the vinyl on a website because he wants to add it to his collection of LPs.
User journey map
Goal
Map Pierre’s user journey.
Conclusion
Mapping Pierre’s user journey revealed how helpful it would be for users to have a clear and easy to follow through buying album process.
Ideation
Starting the design
Digital wireframes
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of finding information about the band and purchasing an album.
View the low-fidelity prototype
Usability study: parameters
Study type:
Unmoderated usability study
Location:
Remote (online)
Participants:
5 participants
Length:
10-15 minutes
Usability study: findings
Dark mode
Some interviewees suggested to use "dark mode" to reflect Jazz music style better.
Layout
Some interviewees suggested to show the quotes from the band to make the layout more interesting.
Colour
It was suggested to add an accent colour to make the design more impactful.
Steps
Interviewees noted that steps to indicate the progress are very useful. When the process is clear and easy there is a bigger chance that user will proceed with the purchase.
Refining the design
Mockups
I listened to the suggestion and designed the website in a "dark mode" to reflect the jazz music atmosphere in a nice soft-lit bar.
I added an orange accent colour to highlight headings.
I added a Lake Geneva landscape to show the connection with the band's origin.
I made sure that steps and progress are clearly indicated in the purchasing an album flow.
Sitemap
Mockups
High-fidelity prototype
The high-fidelity prototype connected the primary user flow of finding information about the band and purchasing an album.
View the high-fidelity prototype: big screen | laptop | tablet | mobile
Accessibility considerations
The forms were designed according to the Web Accessibility Standards
The colours and contrast are compliant with Accessibility Standards
The website is designed to support assistive technologies
The website has multilingual support
Responsive Design
Going forward
Impact:
The website makes it easy for users to find information about band and purchase an album in several easy steps, it guides user through the process giving clear instructions and showing the next steps.
What I learned:
It’s important to use the grids while designing a responsive website. It can make the design process very easy and adjusting the layouts fairly simple.
Next steps
Create a totally different user flow for selling swag.
Conduct another round of usability study and validate if the user pains points were effectively addressed.
Comments