Merchandise Customization - Responsive Web Design
Merchandise Customization - Responsive Web Design
Embedded Files
All About Merch is an e-commerce platform specializing in sales of official merchandise of music artists, with wide customization options. The typical user is between 15 - 35 years old, mostly music enthusiasts. Their goal is to promote artist sustainability. This new responsive website aims to provide easy and wide merchandise customization across devices.
This project is based on a design prompt generated in sharpen.design.
All About Merch is an e-commerce platform specializing in sales of official merchandise of music artists, with wide customization options. The typical user is between 15 - 35 years old, mostly music enthusiasts. Their goal is to promote artist sustainability. This new responsive website aims to provide easy and wide merchandise customization across devices.
This project is based on a design prompt generated in sharpen.design.
Project Duration
June 2022 to July 2022
Role
UX Designer
THE CHALLENGE
Available merchandise webstores do not provide or have very limited customization options, and a confusing layout & checkout processes.
RESEARCH
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that most of the target users love to own merchandise of their favorite artists, either to support their musical journey or to keep up with the trends. However, available merchandise websites do not provide or have very limited customization options. On top of that, the shopping experience is affected by the site’s confusing layout & navigation, which frustrated many target users.
SITEMAP
PAPER WIREFRAMES
DIGITAL WIREFRAMES AND LOW FIDELITY PROTOTYPE
USABILITY STUDIES
Findings
Users want better cart interactivity
Users want relevant buttons only and a clean layout
Users want the purpose of the app to be clear
SCREEN SIZE VARIATIONS
Included considerations for additional screen sizes in the mockups based on the earlier wireframes. Since users shop from a variety of devices, it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
HIGH FIDELITY PROTOTYPE
ACCESSIBILITY CONSIDERATIONS
Used headings with different-sized text for a clear visual hierarchy.
Used landmarks to help users navigate the site, including users who rely on assistive technologies.
Used color themes as per Web Content Accessibility Guidelines.
Designed the site with alt text available on each page for smooth screen reader access.
TAKEAWAYS
Impact
Our target users shared that the design was intuitive to navigate through, the merchandise customization process was easy, more engaging with the images, and demonstrated a clear visual hierarchy.
What I learned
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
NEXT STEPS
Conduct follow-up usability testing on the new website
Identify any additional areas of need and ideate on new features
Conduct a design critique session with the team and present the final designs for feedback.
Page updated
Google Sites
Report abuse