Embedded Files
This project marked the beginning of my Figma journey and my entrance into the world of UX design. It was a significant milestone in my journey, where I showcased my newfound skills and passion for crafting fun user experiences.
For this project, I was given the prompt "create a merchandise site for a punk band".
My Role.
I took all roles and responsibilities in the design process such as user research, wireframing, prototyping, mockups.
The Problem.
Band merchandise websites are often either too bland or confusing. They’re always a “2nd thought”.
My Responsibilities.
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Goal.
To create a merchandise site that is both easy to use and aesthetically pleasing.
User Research.
User Research.
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research were fans in their 20s who were all mildly annoyed with how bands currently sell their merchandise.
This user group confirmed initial assumptions about BAND’s fans but research also revealed that there was a lot more than visual aesthetics that bothered users. Band sites often don’t show enough details of their design and were sometimes hard to navigate.
Persona.
Persona.
Name: Veronica
Age: 23
Hometown: Salem, MA
Family: Lives with father and 2 sisters.
Occupation: Student / Waitress / Vocalist
Goal: Support and represent smaller bands.
Frustrations: Slight vision impairment, hard to see shirt designs on small previews.
Quote: “My wardrobe is pretty much a collection of about 50 different band shirts".
Bio: Veronica is a very busy student that attends Salem State and manages to squeeze enough time to work and play in her band. While she owns several band shirts, she states that she is extremely picky and that current website designs for bands are very frustrating because they often do not show enough.
Pain Points.
Pain Points.
Aesthetics.
Aesthetics.
Band merch sites often don’t match the aesthetics of a band, or the vision.
Ease of Use.
Ease of Use.
Some sites are often confusing to use, or hard to find specific items.
User Journey Maps.
User Journey Maps.
I created a user journey map of Veronica's experience to help identify possible pain points and opportunity's to improve.
Design.
Design.
Paper Wireframing.
Paper Wireframing.
From the very beginning, I aimed to keep the site simple and I wanted it's features to be big, bold and in your face to really showcase the items in detail. Pictured beside, is my first attempt at sketching some landing pages.
Digital Wireframing.
Digital Wireframing.
I went with a very sharp aesthetic, keeping the design very aggressive to match the general vibe of the band.
Low Fidelity Prototype.
Low Fidelity Prototype.
Usability Study.
Usability Study.
Parameters.
Parameters.
Study type.
Study type.
Unmoderated Usability Study.
Participants.
Participants.
5 volunteer participants.
Location.
Location.
Global, remote via discord.
Length.
Length.
30 Minutes Maximum.
Findings.
Findings.
Some users found the search function too hard to reach.
Users had a hard time reading the final page after check out.
Users wanted an order summary to be visible before hitting check-out.
Refining the Design.
Refining the Design.
Before.
Before.
After.
After.
Moved all interaction to one place, including the band logo that doubles as a homepage button.
Since there isn’t enough content yet, I decided to enlarge the featured item.
Mockups.
Mockups.
High Fidelity Prototype.
High Fidelity Prototype.
Accessibility considerations.
Accessibility considerations.
Massive buttons for ease of use.
Bold text and designs. Contrast is very strong.
Search feature to help visually impaired find exactly what they’re looking for without physically looking through the site.
Conclusion.
Conclusion.
While I aimed for an aggressive and bold look, the merch site is also very clean and easy to use.
I had a ton of fun creating this mobile site and I wanted to so much more, but for the sake of the class I am keeping it as is and may revisit and improve upon this in the future. Although I will say, my plans were very ambitious and I had discovered that I need to spend more time on foundation and not to get too ahead of myself.
Page updated
Report abuse