stephanie vasko: tapes and synths
responsive website
project overview
”Stephanie Vasko: Tapes and Synths” is a responsive website that allows you to download and stream Stephanie Vasko’s music, as well as get information about the artist and her tour dates. This project was built for Course 6 (Course 6: Responsive Web Design in Adobe XD) of the Google x Coursera UX design certificate.
Project Duration: January-February 2022
The Problem: As an emerging artist, I need a website for new fans and customers to engage with my sounds.
The Goal: Design a responsive website for Stephanie E. Vasko that allows for album streaming and downloading.
Target Audience: Adults who stream and/or purchase music online
Key Challenges/Constraints: Create a responsive website mockup for album streaming/downloading that is easy to use and represents my personal brand. User interviews and usability study had to be completed virtually. This project had zero budget.
My Role: UX designer and researcher creating a responsive website with album streaming and downloading capabilities for my sound/music side project from conception to mockups.
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping in Adobe XD, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
The process
User Research
I conducted interviews and created an affinity map to understand the users I’m designing for and their needs. A primary user group identified through these interviews was music lovers who stream music and want to make sure artists are fairly compensated.
From these interviews I also identified three user pain points:
Competition: Most users already have a streaming platform of choice (Spotify and Bandcamp were the two most popular among these users)
Ease of Use: Users want an easy to navigate, functional experience
Artist Compensation: Users are concerned with compensation (and transparency about compensation) for the artist.
I also used the interviews to create a persona, John. John is a music lover who needs a transparent, easy to use streaming and purchasing experience for his favorite artist because he wants to support musicians without hassle and frustration. I created a user journey map for John as well; mapping John’s user journey revealed how helpful it would be for to have multiple options for the user to ensure their best downloading and listening opportunities.
Ideation: Paper Sketches for Homepage
Creating the paper sketches for the homepage allowed me to explore a variety of options for designing the homepage. For accessibility concerns and ease of navigation, I chose the bottom left-hand option.
Sitemap
From the user interviews, I created a sitemap for the responsive webpage. I chose a hierarchical structure for the information architecture to make the website clear and easy to navigate.
Digital Wireframes
For initial digital wireframing, I referred to the sitemap and the information from the user interviews.
Using the completed set of digital wireframes, I created a low-fidelity prototype. I created user flows for streaming and downloading audio, as well as for finding out more information about the artist and about her tour dates.
Click here to view the low-fidelity prototype for Stephanie Vasko: Tapes and Synths
Usability Study
I conducted one round of usability studies on the low fidelity prototype. Findings from this study helped guide the designs from low-fidelity wireframes to the mockups and high-fidelity prototype. Primary findings were:
Users appreciated visual style of font but wanted a clearer font for the website
Users liked different options for download/streaming
Users might enjoy additional information explaining subpage content
Mockups
Early designs provided basic navigation and information, but after the usability studies, I changed the fonts to enhance the accessibility. I also revised the design to include specific streaming options for the user.
Deliverables
Key Mockups
Responsive Design
I created mockups for both web and mobile screen sizes.
High Fidelity Prototype
The final high-fidelity prototype presented a clear user flows for listening to and downloading an album. Click here to view the high fidelity prototype.
Accessibility Concerns
For the final mockups, I addressed usability study concerns and used legible sans serif fonts for navigations and actions. I also increased navigational cues, for example, i indicated that home page carousel could be navigated via click with arrows and dots
takeaways
Impact
The responsive website would allow users to download and stream Stephanie Vasko’s music, as well as get information about the artist and her tour dates.
Lessons Learned
As both the designer and client for this product, I found this particular project interesting in terms of learning to balance my needs, assets, and preferences with those of the user.
Hypothetical Next Steps
Conduct another round of usability studies with a larger amount of participants across a wider variety of demographics to evaluate the high fidelity prototypes.
Create functional version of website to test actions like download features and in-website streaming.
Add additional content and links