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.
James is a civil engineer who needs simple and straightforward navigation because he wants to quickly and easily complete his purchase.
I developed a user journey map to document James' experience on the website, identifying possible pain points and opportunities for improvement.
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.
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.
View Wraith's low-fidelity prototype.
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.
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.
The high-fidelity prototype follows the same user flow as the low-fidelity prototype including changes influenced by the usability studies.
View Wraiths high-fidelity prototype.
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.
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.