Empathize

To get into the head's of user's I spoke to various music fans who have experience with buying merchandise online. Their stories revealed crucial pain points that outlined the imperfect online process of ordering merchandise. These frusterations were highly relevant, as my designs would have to take them into consideration. 

User Research

As it turns out, music fans (and EDM Fans in particular), often have a hard time finding the merchandise they want in sizes that will fit them. Most of the time this is because many exclusive items can only be found in person at live music events, and because of high anticipation of merchandise drops. Even when shopping online, prized items can be gone within days and even hours of the drop.

At any given time, entire record labels merch shops will be completely sold out, and will go several months on end without restocking.

Define

After some user research, it became apparent that one of the most tedious occurrence for buying merchandise online is size availability and  quick sellouts. To combat this challenge, I thought of different ways DropShop could keep users informed of upcoming merchandise releases from their favorite artists. This way, users could be informed well ahead of time, and be ready to secure items from their favorite artists as soon as merchandise was released, without having to resort to buying lower-quality, third party merchandise. 

To properly address issues with online merch shopping, the app's design would need at least 2 things:

1. An organized, easy to browse catalogue of items from multiple artists

2. A way for users to set notifications for release dates - so that users can stay informed about new merchandise from artists and collections they love

Ideate

Conducting 'How might we' along with other rapid ideation methods such as "crazy eights", helped me quickly come up with ideas on how to structure the layout of pages as well as the overall user flow for DropShop. I highlighted the most useful element from my 5 different version so I could design an amalgam with only the best parts of each.

Prototype

After ideation, I designed and put together a primary user flow made up of low-fidelity digital wireframes to see if there were any blaring design issues that could be improved in future iterations. 

Initial wireframes can be seen below

The first round of testing revealed several important insights that could point my future designs in the right direction. Having been my first design project, this round of feedback was perhaps the most significant in my experience as a designer.

Mockups

When creating improved mockups, I integrated bigger, more user-friendly buttons and text, while also giving the overall design a unique and attractive color scheme that would be consistent throughout the app flow. I also gave all clickable elements a subtle yellow outline to indicate and instruct the user on what elements were interactable in a stylish way.

Mockups can be seen below

 After testing mockups, feedback indicated that the design was still lacking. Much of the pages were disorganized with both text and buttons being too small. Users on a touch screen smartphone could not be expected to press the small color and size buttons, which would have become an accessibility issue.

Perhaps the most blaring issue however, had to do with the checkout process, which was crammed into a single page without interactive scrolling. The checkout process was then split into two separate screens, with the addition of an order review page so that users could make sure all the shipping, payment and price details were in order BEFORE confirming an order.

Despite the changes made during the mockup stage, my designs were still much too 'website-like' and had yet to be fully optimized for the touchscreen smartphone format. Additionally, I still felt that the app needed a more attractive theme, along with a more consistent flow with integrated navigation elements.

Test

High Fidelity Prototype 2.0

Upon further testing the design with users, and applying some design inspiration, I had a clear vision for the next version of DropShop. After several more weeks of work, I ended up completely overhauling the interface of many of the app's screens, elements and flow to create a more mobile-friendly design.

Bigger images and elements as well as swipable scrolls ensured that users would have a more intuitive experience moving through the design on mobile. Additionally, I took this time to give the app a fresh coat of paint. I went with a sleek, darker blue background theme to help make interactable elements stand out, as well as give the designs more stylish and modern look.

Notification Tracking

The extra time spent honing my designs also allowed me to fully integrate a key aspect of the original design: notification tracking. By choosing to select/add favorite artists from the artist page, users would now be able to manage which artists they receive notifications for when a new item or collection is released. Users would also have the option of being notified earlier, in order properly anticipate release dates.

Checkout

Link to the current prototype:

https://www.figma.com/proto/Whk1QOfmPs4lhiY0ePDwPu/DropShop--Merchandise-App?node-id=287%3A46&scaling=scale-down&page-id=278%3A14&starting-point-node-id=287%3A46