UX/UI Design
Edward Fingerstyle
A website that offers fingerstyle guitar lessons, exercises, and instructional materials, along with related products like guitar tabs and guitars
Timeline:
August 2023 - December 2023
Tools:
Figma, Miro, Adobe Creative Cloud, WIX, Kajabi
Role:
UX/UI Designer, UX Research
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.
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.
The old site had unnecessary buttons and redundant links, causing confusion for users. Key pages were hidden or hard to find, multiple forms served the same purpose, the search bar was unresponsive, and the cart function was unclear on what items could be added.
💻
Unnecessary buttons and redundant Links
🧐
Key pages were hidden or hard to find
🔎
unresponsive search bar
The Solution
The redesigned website is built to deliver a seamless and intuitive browsing experience, making it easier for users to navigate and engage with content.
It removes unnecessary buttons and redundant links, enhances search functionality for faster and more accurate results, and simplifies the cart system to clearly indicate available items.
With improved navigation, consolidated forms, and a refined layout, the site ensures that key pages are easy to find while providing a cohesive platform that effectively showcases the artist’s work.
Old Site Pain Points
Before we dive into the design process, let's take a look at the old site first. We conducted a thorough analysis of the old site to identify the pain points users might be encountering. This evaluation provided valuable insights into areas that needed improvement, which became the foundation for the redesign and rebranding efforts aimed at enhancing user experience and streamlining navigation.
1️⃣
Some Buttons Are Unnecessary as they just repeatedly anchor to the later sections in the website
The design will include CTAs that provide clear directions to users about their destinations.
2️⃣
Most sections link back to the same thing, confusing the users
The design will have improved labeling and organisation which will make it easier for users to find what they are looking for without encountering repetitive links.
3️⃣
users cannot see some interesting pages, even from the menu
The design will introduce a more intuitive horizontal menu bar, making it easier for users to navigate across the site. The footer will also include additional links to pages that are not part of the main menu
4️⃣
Users Struggled to find the desired guitar tabs as they are all cluttered in a list
The design will allow users to have the ability to sort, filter, or search through the extensive collection of guitar tab sheets offered by the artist.
5️⃣
There's a cart but it's unclear what can be added to it
The design will include landing pages for every course, offering users comprehensive information beforecommitting to a purchase.
6️⃣
the search bar is not responsive
The design will ensure that the website is responsive across different screen sizes
Starting The Design
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.
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.
Rebranding
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.
Wireframes
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.webp)
Study Type
Unmoderated Usability Study
Participants
5
Duration
10 - 15 minutes
1️⃣
Users expressed that the hero section does not seem professional and trustworthy as a skilled guitarist
2️⃣
The website is fully responsive, adapting to various screen sizes and devices, while maintaining accessibility across mobile, tablet, and desktop for all users.
3️⃣
A high-contrast colour palette is implemented to improve readability for users with visual impairments, particularly for text and important elements like buttons or links.
Usability Study
The purpose of this observation was to gather see how users interact with the website naturally, in order to gain authentic feedback. This is important as it helps us identify pain points and areas where they struggle, helping to create a smoother and more intuitive experience
Mockups: Before And After Usability Study
Before
After
The hero section was polished to achieve a more professional appearance. To highlight the artist's services and products effectively, I incorporated them directly into this section, ensuring users are immediately aware of what he has to offer. Additionally, we reduced the coluor palette from three to two main colours, creating a cleaner and more cohesive look.
Before
After
Users expressed their dissatisfaction with the horizontal scrolling section designed to showcase course benefits, prompting us to remove it. In its place, we introduced a comprehensive course overview section, allowing users to easily access and understand the information they need.
Final Improvements
1️⃣
Introduced a more intuitive horizontal menu bar, making it easier for users to navigate across the site
2️⃣
The footer now includes additional links to pages that are not part of the main menu, enhancing the overall user experience
3️⃣
The CTAs have been refined to provide clear directions to users about their destinations
4️⃣
To improve the artist's reputation, social proof has been incorporated into the homepage, which the previous website didn't have
5️⃣
Users have the ability to sort, filter, or search through the extensive collection of guitar tab sheets offered by the artist
3️⃣
Introduced landing pages for both guitar tabs and courses, replacing the practice of directing users to external platforms
Final Mockup Designs
Accessibility Considerations
1️⃣
Clear, concise, and consistent navigation labels to reduce cognitive load and make it easier for users to locate different sections or resources without confusion.
2️⃣
The website is fully responsive, adapting to various screen sizes and devices, while maintaining accessibility across mobile, tablet, and desktop for all users.
3️⃣
A high-contrast colour palette is implemented to improve readability for users with visual impairments, particularly for text and important elements like buttons or links.
Outcomes
The redesign was a success, aligning perfectly with both the business goals and user needs. The artist has received positive feedback from users, who have expressed their appreciation for the intuitive layout and how easy it is to navigate and find content related to guitar lessons and tabs. This has strengthened the connection between the artist and his audience, enhancing the overall user experience.
Learnings
This project has been a valuable learning experience, particularly in overcoming various limitations to achieve success. A thorough analysis of the old site, combined with monitoring new web analytics to understand user behavior, was essential in guiding the redesign. While we faced constraints that prevented conducting formal user research before the design phase, the positive feedback from both existing and new users, along with the increase in product sales, highlights the impact and effectiveness of our approach.
What Would I Have Done Differently?
If given the opportunity, I would have prioritised conducting comprehensive user research before the redesign to gather insights directly from our target audience. This would have provided us with a deeper understanding of their needs and preferences, allowing us to tailor the design more effectively. Additionally, I would have allocated more time to user testing during the design process to gather real-time feedback and make necessary adjustments.
