Project Summary
Chilled Music is a UK-based music label that represents several virtual artists on Spotify. They had the objective of rebranding one of their artists and giving a comprehensive redesign to the artist's website. This revamp included introducing additional features, notably online programs where the artist provides instruction on fingerstyle guitar techniques through video lessons and exercises. Additionally, their goal was to offer a range of products such as guitar tabs, guitars, and instructional materials to facilitate an accessible and effective journey to mastering fingerstyle guitar.
Project Duration
August 2023 - Ongoing
My Roles & Responsibilities
This was a startup company where I held the sole UX designer position. My primary collaborators were the artist himself and another marketing manager who had a background in UX design. In addition to UX design, my role encompassed various responsibilities such as user research, competitive analysis, market research, some copywriting tasks, and visual design.
I was tasked with translating the gathered insights into tangible user experience (UX) deliverables and subsequently developing wireframes and prototypes. I also contributed to certain aspects of front-end website development. Given the project's high priority, we conducted regular check-ins after each iteration. Currently, the project is ongoing; we've successfully created the MVP, but the website launch is still pending.
Color Palette
Typography
Heading 1 - Avenir Next Heavy
Heading 2 - Avenir Next Bold
Heading 3 - Avenir Next Medium
Body Text - Avenir Next Regular
How did I start?
I was in the final stages of my master's degree, finalising my dissertation project, when I was assigned to this project. The startup company had a need for swift execution, in line with the typical pace of such ventures. Operating in an agile environment necessitated prompt results delivery and adaptability to evolving demands.
I enthusiastically embraced this approach by swiftly refining design concepts and incorporating feedback. I followed a systematic approach to ensure that the end product effectively met both user needs and business requirements. Additionally, following the heuristic principles, I mainly priortisied flexibility and efficiency of use, consistency and standards, aesthetic and minamilsitic design.
Old Site
Before we dive into the design process, let's take a look at the old site first. Regarding the UI, below are a few things that can be seen as issues straight away:
-
Some buttons are unnecessary as they just repeatedly anchor to the later sections of the website
-
Most sections link back to the same thing which can be confusing to users
-
Some interesting pages cannot be seen by users, even through the navigation bar
-
There are multiple forms across the site but all of them have the same purpose
-
The search bar is not responsive
-
There's a cart but it's unclear what can be added to the cart
Market Research & Competitive Analysis
To safeguard the privacy and confidentiality of individuals and organisations involved, specific information regarding the competitive analysis has been excluded. As one of the project objectives is to incorporate online courses on the website while ensuring a design that aligns with our target audience's expectations, my research extended to popular learning platforms like Coursera, Udemy, and Skillshare.
From this research, I learned that the fundamental principles for designing an effective website for online courses to offer a great learning experience revolve around navigation, structure and the course's content. Additionally, it is imperative to incorporate hands-on exercises, supplementary resources, and brief assessments such as small quizzes to facilitate an engaging learning experience.
Site Map
To guarantee comprehensive coverage of all requirements and features, I generated the following sitemap in Miro for presentation to the stakeholders. Given the project's early stage, it's understood by the stakeholders that modifications to the sitemap may be necessary as the project unfolds.
As this is an ongoing project, the coloured bubbles in the corners of each page serve as visual cues for the statuses of those pages, making it more convenient for stakeholders to grasp the current project statuses. These indicators denote whether a page is pending, finalised, or set for discussion, simplifying the tracking of progress.
Medium-Fi MockUps
We kept the limitations of WIX strongly in mind while creating the following wireframes, which were developed based on insights gathered from research and client meetings. These wireframes and mockups are designed to align with the capabilities and constraints of the WIX platform, ensuring a practical and achievable implementation.
.png)
Rebranding Colours & Theme
We underwent multiple iterations to arrive at the branding colours and the overall theme for the website. Ultimately, we settled on a neon purple theme. This choice was driven by our predominantly male audience, their interest in anime, and our desire to evoke a sense of nostalgia and retro aesthetics. Additionally, the artist's primary focus on Anime OSTs covers played a role in shaping this decision.
Main Screens
Once the theme was finalised, high-fidelity mockups were created to ensure that the final deliverable was as precise as possible. This process helped identify any unexpected constraints or issues before the actual implementation in WIX. As the project is still in progress and the implementation in WIX is pending, we will not disclose the remaining screens at this time for privacy considerations.
The original website faced significant challenges related to navigation, design, and the CTA Buttons (Call to Action) leading to the same pages.
-
In the redesigned website, we have introduced a more intuitive horizontal menu bar, making it easier for users to navigate across the site.
-
The footer now includes additional links to pages that are not part of the main menu, enhancing the overall user experience.
-
The CTAs have been refined to provide clear directions to users about their destinations.
-
To improve the artist's reputation, social proof has been incorporated into the homepage, which the previous website didn't have.
In the past, all guitar tabs were presented in a cluttered list format.
-
Now, users have the ability to sort, filter, or search through the extensive collection of guitar tab sheets offered by the artist.
Previously, the website lacked dedicated landing pages for various components.
-
We have introduced landing pages for both guitar tabs and courses, replacing the practice of directing users to external platforms.
Typically, users would receive an email after purchasing a course, guiding them to another learning platform.
-
This redesign includes landing pages for every course, offering users comprehensive information before committing to a purchase.
-
Additionally, all courses are now hosted on the same website, simplifying access to all content.
-
This integration also provides the artist with improved capabilities for analysing customer behaviour.
.png)
-
Current & Next Steps
-
Currently, we are finalising the designs of the site and going through usability testing before we are ready to crawl the existing website.
-
More usability testing and iterations will be carried out. These data will be included in this case study once we've launched the entire website.