Songbird:
Memorisely
Visual Design
Concept Project
March 2023
ROLE
UX & UI
TEAM
Sole Designer
TOOLS
Figma
In April 2023 I was fortunate enough to attend a 10-week part time visual design course lead by Memorisely in an effort to further enhance my visual design skillset, particularly surrounding Figma and its more advanced features. As part of this course I designed a desktop and mobile website, set up to compete with the likes of Spotify, Apple Music, Amazon Music and Youtube Music.
This course focused initially on competitor analysis (research phase) with various UI exercises before switching to wireframing and high-fidelity prototyping using the more advanced features of Figma (including autolayout, advanced prototyping transitions and advanced grids).
Feel free to interact with the final prototype here!
The Process
Competitors
Having experimented with several of the more versatile and advanced Figma features, I initiated the final project with a process I was comfortably assured with: competitor analysis! This involved diving into the information architecture and visual design of the web and mobile sites for the top leading music apps, including: Apple Music, Youtube Music and Spotify, among others. Many had glaring UI and UX flaws such as incorrect spacing, poor accessibility colours or simply hidden features that expected too much from users new to the site.
User Flows
Subsequent to the competitor analysis I explored the typical user flows featured in many of these apps such as Browsing Music and inevitably playing music or podcasts. This enabled me to understand the necessary information architecture that was involved in creating a music site.
Styles
Wireframes soon followed. Next, the group looked into the more advanced aspects of visual design such as colour theory, type and grids. Having set up design systems previously none of this was new to me, however being able to fully utilise Figma features and tools enabled these processes to be completed much quicker than what was previously expected.
High-Fidelity Prototype
The final couple of weeks focused on producing a high-fidelity prototype, leveraging the advanced skills and features that Figma had to offer. No groupings of elements were ever needed when creating these designs, instead I used auto-layout to position elements within larger elements as part of an atom-based design structure. Component sets were also used to support dynamic sizing and prototyping, enabling the user to select different playlists, pause and play audio and highlight relevant sections when they hovered their mouse over an element. Skeleton-loading screens were used to simulate elements loading as the user changed screens. I sought to improve on the existing music apps currently available, focusing on spacing, colours, accessibility and usability. Admittedly, the end result looks remarkably similar to Spotify, but I hope you'll agree has a unique visual twist!
