User Experience Design
Project Overview
Wraith is a renowned rock band that has garnered a significant following over the years. As part of their online presence, the band seeks to develop a responsive website that caters to their target audience. The primary objective is to provide a seamless platform for fans to stream and purchase music, ensuring a user-friendly experience for their tech-savvy and professional fan base. This case study was created as part of Google UX Design Professional Certificate program.
My Contributions
As the UX designer in charge of the responsive website design for the Wraith project, I led the entire process from start to finish. My responsibilities included conducting user research, analyzing competitors, creating wireframes (both on paper and digitally), developing prototypes, iterating on designs, establishing information architecture, and implementing responsive design. My goal was to deliver a website that offers fans a convenient and intuitive platform to stream Wraith's music.
wraith website mockup on an iMac

The Process

Understanding the user

User research

User research was conducted through interviews to gain insights into the needs and preferences of Wraith's target audience. The findings revealed that the majority of users are accustomed to streaming and purchasing music online. They expressed a strong desire for a website that is simple, easy to navigate, and offers a clear and quick shopping experience. These insights highlight the importance of creating a user-friendly platform that prioritizes simplicity, intuitive navigation, and a streamlined purchasing process.


persona describing James Reeves. it includes a short bio, his goals, frustrations, and a quote.

Problem statement

James is a civil engineer who needs simple and straightforward navigation because he wants to quickly and easily complete his purchase.

User journey map

user journey map showing the steps James take to purchase

I developed a user journey map to document James' experience on the website, identifying possible pain points and opportunities for improvement.

Starting the design

Digital wireframes

wireframe for wraith's homepage
wireframe for homepage of wraith's website sized for a mobile phone

After selecting key elements from my paper sketches, I translated the information to digital wireframes. I prioritized an intuitive navigation and a clean layout with simplified content. I developed screen size variations, adapting the design for mobile-friendly presentation. The image carousel allows users to easily navigate on a smaller screen.

Low-fidelity prototype

To facilitate user testing, I developed a low-fidelity prototype that connects the main user flow allowing users to purchase albums and/or individual songs The prototype serves as a preliminary representation of the app's functionality and allows for valuable insights during the testing phase.

screenshot showing the connections between different frames

View Wraith's low-fidelity prototype.

Usability studies

  • Study type: unmoderated usability study
  • Location: United States, remote
  • Participants: 5
  • Length: 15–20 minutes
  • Finding 1: Users indicated that the "Music" screen was overly cluttered and visually overwhelming.
  • Finding 2: Users expressed a desire for additional navigation options to access specific "Album" screens more easily.
  • Finding 3: After adding an item to the cart, users expressed the need for a direct navigation option to access the shopping cart.

Refining the design


shows changes made to the albums page from wireframe to mockup

Based on insights from the usability study, I made changes to enhance the Music screen. I simplified the design by removing the play and add to cart buttons. Additionally, I repositioned the album title and release year to overlay the image, allowing for larger album cover images and creating a cleaner, more visually appealing layout.

shows changes to the homepage from wireframe to mockup

Based on participant feedback provided during the usability study, I added an additional menu level to allow users to navigate directly to the album of their choice. By adding the additional menu level, users now have two ways to navigate between albums above-the-fold in addition to the thumbnails with direct links below-the-fold.

mockup for the album page
mockup for the checkout page

High-fidelity prototype

The high-fidelity prototype follows the same user flow as the low-fidelity prototype including changes influenced by the usability studies.

screenshot showing the connection between different screens in the mockup

View Wraiths high-fidelity prototype.

Further Considerations


In the design of the website, I prioritized accessibility considerations by establishing a clear visual hierarchy through typography, incorporating headings and varying text sizes. To enhance compatibility with assistive technologies, I implemented landmarks within the website's structure. Additionally, I implemented a high-contrast color scheme to improve legibility and ease of use for individuals with visual impairments.

Next Steps

The next steps in design process include conducting additional usability studies to ensure that the app effectively caters to the needs of non-profit organizers. Furthermore, implementing filters that allow users to sort events based on the required skillset will enhance the app's functionality and user experience. Additionally, integrating a history statement feature will enable users to easily track and share their volunteer hours, promoting engagement and a sense of accomplishment. These steps will contribute to further improving the app's usability, customization, and engagement for both users and non-profit organizers.

Wraith’s target users found the website easy to navigate and appreciated the simple, graphic layout. This case study taught me the importance of paying attention to small details that enhance the overall user experience, ultimately making simple designs more useful and enjoyable for the users.