At this stage, we used the finalized landing page iteration as a reference for the visuals our hi-fi wireframes would have. My team and I focused primarily on building out the mid-fi wireframes we worked on previously, as we were familiar with them at that point, and lent support when needed. On the Artist Shop page, I designed product mockups to make the screen more faithful to a fully built-out shop. Since concerts are unlikely to sell a huge variety of merchandise to be on par with traditional retail e-commerce, I opted to allow users to scroll down and load sixteen items at a time instead of paginating the shops. Then they could come back to the top instantly with a "back to top" button. I also added a dropdown menu and tags to allow for simple sorting, with valuable insights from my team members to make sorting clear and remain consistent with the Artist Shop backend pages.

When designing the preview page, I wanted to make it a quick and unintrusive way to add an item to your cart. There would be a default color selected, along with the image of the color shown, so someone in a hurry to order it would get exactly what they see and be able to change it if they wanted to. The only obstacle to adding the item to their cart would be if they didn't select a size; the color won't matter if the item doesn't fit.

I designed another dropdown menu for the About page's FAQ, and the individual product page's size guide. It can be tricky to create a dropdown because you have to be mindful of if and how it should affect the contents around it-- while the About page was fairly simple, many size guides are built as pop-ups in similar product page layouts. I opted to make it a dropdown though, because a pop-up could frustrate users trying to make an on-the-spot purchase, and the size dropdown is not very long or obtrusive.