Point Taken Music Website
This website combines album purchasing and streaming options to allow busy users to directly support a musician in a flexible and affordable manner.
The Challenge
Users want to easily find tracks from a musician's latest performances and support the musician with music streaming and merch purchases on a variety of budgets.
The Goal
This project seeks to offer a central hub for fans to discover the musician's latest releases and performances, while making listening and purchasing accessible for a variety of spending levels.
Role
UX Designer and Researcher
Sponsor
Google UX Design Certificate
Project Duration
August 2023- March 2024
Tools Used
Adobe XD, Figma, Procreate
Design Process
The design process begins with understanding the users and defining the problem to be solved. With a clear picture and goals, the designer ideates potential solutions with How Might We exercises. These ideas are refined and turned into paper wireframes and low-fidelity digital wireframes in Adobe XD. Finally, once enough wireframes are completed, a digital prototype is created and tested with users. The feedback from the usability testing is analyzed to form insights that drive the next iteration. This process is repeated through multiple iterations.
User Research
User research is the foundation of building empathy with the website's potential audience. Five music listeners, aged 22-59 years old, were interviewed on a variety of music listening, purchasing and discovery topics. These interviews were distilled into several empathy maps and, ultimately, two user personas. Key pain points from those personas are highlighted below.
Pain Points
Music app forces separate log-in in a different browser to edit payment details.
Users were frustrated because their favorite music streaming app redirected to an external website to manage their account and log in.
Music app changes its interface and user flow in different circumstances.
Users were confused because their usual music streaming app automatically enters a simplified user interface when it detects the user may be in a car.
Music and podcast finding is disorganized and lacks hierarchy.
Users were annoyed by their normal music streaming website's lack of differentiation between playlists and albums across genres.
Cannot replace a social media account for sign-in and payment.
Most users liked logging into a streaming service within their existing ecosystem. However, some users were disappointed that their music app disallowed changing their log-in and payment platform after sign-up.
User Journey
The data analyzed from the user research informed the creation of user journey maps and storyboards to illustrate key music listening and purchasing user flows.
Paper Wireframes
Initial paper wireframes were drawn for each screen. Then, red asterisks were placed next to several promising elements. The highlighted elements were collected and integrated into refined paper wireframes.
Prototyping and Testing
Low-fidelity digital wireframes for both desktop and mobile platforms were created based on the refined paper wireframes. These wireframes were connected to create low-fidelity prototypes in Adobe XD.
One round of usability testing and one round of A/B testing were conducted on both prototypes. The results led to insights, ranked Priority P0 (crucial to user flow) to Priority P1 (lower priority change), which informed the creation of refined low-fidelity prototypes.
Desktop Insights
Moderated, remote usability testing was conducted using video conferencing and audio and screen recording. This testing was intended to test the early user flow and led to the following insights.
Priority: P0
Users need easier access to the dedicated album screens from the Home page, possibly in place of the current experience.
Users need a new store experience on the Home page, which presents album purchasing options clearly.
Users would benefit from an interactive track list element with integrated music controls.
Priority: P1
The Home page should guide users to the album thumbnails on first glance.
The next prototype should implement the planned navigation and editing features in the checkout user flow.
Mobile Insights
The mobile prototype was tested in the same sessions as the desktop prototype. It led to these insights.
Priority: P0
Users need a new store experience on the Home page, which shows album purchase options clearly.
Users should be able to access the search bar without first tapping the hamburger menu.
Users need easier access to the dedicated album screens from the Home page, possibly in place of the current experience.
Users would benefit from an interactive track list element with integrated music controls.
Priority P1:
A consistent use of grids with small icons would allow users to comfortably view store collections.
Users need to see the album collection as the initial focus, above the fold, on the Home page.
Visual Design
Style Guide
Selecting a typeface for this project required filling a gap in the Point Taken branding. Lexend was chosen to complement the band's existing branding while producing readable fonts for desktop and mobile.
Point Taken's brand colors, violet and indigo, failed WCAG contrast tests. After consultation with the band, new brand colors were derived from the originals for this project. The brand colors used in this project meet WCAG guidelines and maintain brand identity.
Components
Multiple interaction states were designed for reusable, flexible components. Among the most used examples are buttons, chips, and lists.
Accessibility
Color Contrast
The color palette was selected to conform to WCAG contrast guidelines. Brand colors were adapted to pass these standards.
Content Hierarchy
A clear hierarchy for content and text is used to support screen readers and general readability.
Photos and Alt Text
Photos are added to support text content and lists wherever possible. All photos would have alt text on the final launch.
High-fidelity Designs
The insights gained from low-fidelity testing were paired with critique sessions from fellow UX Designers, Web Developers, and Point Taken. The final, high-fidelity prototypes incorporate key usability and visual design refinements.
Easy-to-find Performances
Users often discover music after seeing a musician’s performance. By prominently featuring recent performances on the home and music pages, this project encourages users to explore and engage with the music of Point Taken.
Streaming-quality Music Controls
Users want intuitive controls for playback and audio. Most peer physical music purchasing websites offer minimal music controls, while most streaming websites offer no ability to purchase. By bringing these features together, this project allows users to engage with Point Taken’s music however they wish.
Express Checkout and Auto-Fill
Users feel that paying with trusted partners increases the the speed, convenience, and safety of a transaction. By integrating a variety of third-party payment platforms, this project builds trust with users.
Desktop User Flow
Mobile User Flow
Moving Forward
Takeaways
Impact
This project resulted in a responsive design, which equally accommodates music streaming and purchasing. For listening, it encourages users to control media playback on-screen or with their device's physical controls. For purchasing, it provides express checkout and auto-fill to suit a variety of preferences. Finally, the finished visual design expands on Point Taken's branding guidelines to increase accessibility and maintain brand recognition.
What I Learned
Users often manipulate media controls, such as volume, using physical buttons on their device. On-screen controls should be minimized to avoid redundant visual clutter.
UX Design can expand an organization's brand guidelines, especially when improving color contrast for accessibility.
Designing a small set of flexible, reusable components as a base for more complex patterns saves time and builds consistency.
Next Steps
- Final Approval from the Client
Present the final designs to Point Taken to ensure that the visual design mets their expectations.
2. Send Assets to the Developer
Upon approval, transfer all required assets to the development partner to build and launch the website.
3. Prepare for Future Iterations
Gather data during post-launch support to make recommendations on further design improvements.
See More
Google UX Design Certificate
Fulbright Korea
