PianoGroove
role / services
UI
UX
Web Design
description
PianoGroove is an online course for piano players dedicated to play jazz piano. I worked with Hayden, the course founder since 2017, when the first time I was approached and asked to improve the site course organisation as well as improving the user interface.
year
2021
the challenges
Throughout the years of working for PianoGroove, the UI had to be bold and with a high grade of readability. The course is aimed to experienced players, most of them above 40 years old.
The site had always to look a bit classy but fresh at the same time. Another factor to consider was student’s devices. Most of them use a tablet placed over the piano so the design had to be optimised for an horizontal tablet fruition.
Over the years, I always tried to enhance the interfaces, make them modern and in line with the current design trends without restyling the Ui completely each time.
The following visuals are the latest designs made in 2022 with Hayden, founder of PianoGroove.
homepage
The homepage presents a classic landing page structure which is made of the following:
- Main statement and preposition on the header of the website which includes the potential user photo and also social proof
- One Call-to-Action visually consistent on the page
- Product features sections to highlight the piano teachers of the course, most of them are well known in the jazz music scene teachers
homepage
Still looking at the homepage, in the section further down the page we can see:
- More product features with screenshots of the the real course into action
- More social proof to remark the positive feedback from students
- Mention of the community that is building behind the course with students and teachers
- Syllabuses to help student in their learning journey
Buy Courses page
On this page the users will see all the courses offered in the course. These are single courses rather than membership:
- Courses have been categorised in music genres
- Each card has a title, course description, price and level of difficulty
- The top of the page shows a featured course.
Single Course page
Like any other e-commerce page, here we show the product before purchase. It works slightly differently than a classic e-commerce because there is no cart and the product picture is replaced by a video.
course journey
On the screens below, you can see the UI design that was made for the Membership part for the course. Students can buy a monthly membership and then access all the courses available.
Here you can see in order:
- The course page: here the is looking at the courses available divided by level of difficulty
- The individual course page with the actual lessons and other indicators for the students to see their progress
- Popup that appears once the course is finished
- The dashboard for the student were they can check the status of the courses the
Teachers page
Teachers also have their own sections for student to find out more about them.
Here :
- Meet the team page with list of all the teachers
- Individual teacher page with tabs showing the teacher biography, courses, media files and tutoring
Other screens
Here is a collections of other screens that I designed to complete the website like the search result page, 404 page, comments and marketing landing pages.
