Project Overview My project is to design an album listening & ordering flow for a punk band, JohnsonX is a fictional artist I created for this project.For this project, the typical users are those people who's into punk music and people who l
Persona: Iris Problem statement: Iris is a busy project manager who needs an intuitive music shopping website to explore new music because she listens to music all the time.
User Journey Map I created a user journey map of Iris’s experience using the site to identify possible pain points and improvement opportunities.
Sitemap The primary pain points for users to browse online were confusing navigation and insecure checkout process, so I use that as my knowledge to create a sitemap. My goal was to make information architecture that would improve overall naviga
ABC.jpg
Paper Wireframes - Part 1 Next, I sketched out paper wireframes for each screen for my responsive website, keeping the user pain point about navigation, browsing, and checkout flow in mind. Stars were used to mark the elements of each sketch tha
Paper Wireframes - Part 2 The screen on the left is the combined stars version of the initial wireframes would look like. The home screen paper wireframes variations to the right focus on optimizing the browsing experience for users.
Paper Wireframes Screen Size Variations Because JohnsonX’s customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital Wireframes Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful button locations and visual element placement on th
Digital Wireframes Screen Size Variation(s)
Low-Fidelity Prototype To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an album to the cart and checking out. At this point, I had received feedback on my designs from members of my
Mockups - Part 1 Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes I made was adding the option to edit the quantity of items in a user’s cart using a simple “+” or “-” option.
Mockups - Part 2 The another change I made was to update a “return” button in order to help users to return to previous page.
Mockups: Original Screen Size
Mockups: Screen Size Variations
High-Fidelity Prototype My high-fidelity prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study. View JohnsonX’s Album high-fidelity prototype Accessibility Consider
prev / next