Merchmkr
UI/UX Design for mobile artist merchandising platform.
Project Overview –
For my Google UX Design Professional Certificate portfolio project, I chose the design prompt "Design a merchandise app for a Punk band."
This app is a merchandising platform that assists modern artists and musicians, connects them with their fans, and helps them succeed.
Problem
Modern artists have taken on responsibilities traditionally handled by record companies, marketing firms, and video production companies in addition to generating creative output. The current tools on the market insufficiently recognize the user's creative nature, are time-consuming, and require additional learning.
Users need a more cost-effective & time-efficient way to create merchandise, connect with fans and generate income.
Why is this project important to me?
Creativity requires ample time for play and expression with as few interruptions as possible. Modern artists have to take on all of the business responsibilities traditionally handled by record companies, marketing firms, and video production companies to promote and monetize their work. This is in direct conflict with uninterrupted creative time.
I feel strongly about recognizing an artist's creative nature. My goal is to create an aid that helps them focus their time and energy without any undue learning curves or exploitive business models.
The Solution
I conducted three rounds of wireframing, prototyping, and user testing. My final design was successful with the user based on my primary criteria; to engage artists with immediate answers to their questions with minimal distractions. Offer purchase options for artists' specific needs, uses, and budgets.
The Process
User Research
Summary
I spoke with several working musicians who are navigating the uncharted territory of monetizing artist output in the 21st century. My assumptions were that the undue burden of the individual artist replacing the traditional industry structure of record label, production, marketing, legal, etc., infringes on the time and energy necessary to generate creative output.
User Research: Pain Points
Costs 💵
Users are faced with unmanageable costs either to themselves or their audience. Competitor products are made to order and typically priced too high for an unknown artist.
Time ⌛️
Artists must now be the marketing & design teams. There’s a significant learning curve to this. Time needed for creating art must not be compromised with the tedium of marketing.
Samples 👕
With only two primary models, users don’t have an effective or efficient way to sample their products. There are high upfront costs and long wait times to test a product.
Venue 🎙
Even young tech-savvy users have to bridge the gap between competing social media platforms to reach potential customers. In the case of Teespring, a creator needs to have a high threshold of subscribers on their YouTube channel to access the banner ads below their video content.
Problem Statement
Musicians and artists need a better way to create merchandise for their fans because they want to focus more on creative output and have to less time on marketing.
Personas
User Journey Maps
Design
User Flow
The two main objectives of the user flow are to allow user freedom to move in whatever direction they desire and simultaniouly keep their path clear, focused and uncomplicated.
Sketches
Paper wireframes provided me the opportunity to ideate and imagine the basic structure for what would become the Merchmkr app.
Digital Wireframes
Low Fidelity Prototype
User Testing
Testing Round 1 | Findings
For most users, the UI was not intuitive and created a feeling of confusion by the time a participant reached the "Design" page. The "Design" page itself created lots of frustration for most users, particularly the "Upload Image" and "Edit/Preview" buttons. Users expected to see the image they were uploading displayed on the T-shirt they were designing. The interface did not perform this action in the manner that users expected. Some users wanted more options for ordering and navigation as well. Overall the design failed to perform its most basic function.
Update to Digital Wireframes
Testing Round 2 | Findings
Some users found the "Home" screen was still a bit too unconventional. The "Design" page performed closer to users' expectations. However, on the "Product Description" " Preview & List" and "Confirmation" pages, scrolling was not clear to many users. I added floating action buttons to preempt this but, the results were hit-or-miss at best.
Overall the user flow was much smoother. But, almost every user clicked on the T-shirt image box to upload an image first rather than the " Upload Image" button.
Before and After Mockups
These mockups reflect the process of iteration and weaving user feedback into the design. Pictured below are versions 1, 2 & 3 of the "Home," "Design," and "Confirmation" pages.
Design Updates
Design Update 1 | Onboarding
I redesigned the home screen to look closer to some of its competitors. This makes the “app” appear more like a website. This was a compromise but, I believe it achieved the goal of clarifying affordances for the user. The home screen is now laid out in a scrolling fashion. In addition to the original sections “Quick Start,” “Brand Designer,” “Templates” and, “Campaigns," I added sections for choosing by categories, ordering in bulk, and payment plan options. Each section of the home screen is an action the user can engage with. I carefully chose images and wrote brief descriptions aimed at addressing questions users most commonly have in mind when setting out to create merchandise for their fans.
Design Update 2 | Clickable Elements
One important pain point was “Clickability.” I redesigned many of the pages to have multiple click points. The primary example of this is the product design page. Here I made each point of the t-shirt an access point for the intended action. Users can now start from wherever is most natural to them. They can also add images and text to either side of the T-shirt. And they can see each change they make in real-time.
Design Update 3 | Keyboard Interactions
In my early wireframes/ prototypes, I had not yet added the keyboard overlays for the "Product Description" page(s). For the early testing, I assumed that simply clicking the screen and having the text appear would be sufficient. But, users found this too unfamiliar, often taking them out of the experience. I redesigned these pages with all of the appropriate keyboards and created interactions for each one to mimic a “live” app as closely as I could manage. I did a small round of testing to see if the additions created a more realistic and seamless experience for the user. The results were positive. No one experienced any confusion or frustration with the updates.
Design Update 4 | Confirmation
The option to scroll down a page was unclear in my initial designs. Particularly on the "Review & Publish" and "Confirmation" pages. My first solution was floating action buttons (FABs) that would appear after arriving on the page. I thought giving the user a moment to scan the page and then seeing the "Next" or "Scroll" button appear would be a great cue and would also help keep the layout of each page more consistent through the app. Testing results were mixed and did not reveal any clear insights regarding the FABs.
My final solution was to opt for the conventional approach. I redesigned these pages so that portions of the images and text be offscreen. Now users would immediately know that they could scroll down. This is the best approach to this because it is natural and intuitive to users.
For the "Product Description" page, I left the "Next" FAB at the bottom right of the screen. Instead of using animation to indicate action, I left it greyed out until all the appropriate steps are completed. Once the user has entered all the information, the "Next " button now changes colors to the brand purple to indicate an active button state and cue them to continue to the next step.
For the "Confirmation" page I also updated the sub-menu. I made the font bolder and added icons to each section. I believe this will also be a natural cue for users to click on either the text or the images.
Design System
Accessibility Considerations
Final Design
High Fidelity Prototype
What I learned
A considerable amount of research and planning went into the initial phase of this project. However, it was the user testing that illuminated the pathway forward.
I conducted most of the usability studies via Zoom. Watching each user's interaction with the prototype was so fascinating! It revealed to me how unique and individual each person's approach and, the thought process was. Despite arriving with the same basic goal, to create band "merch", everyone had very different wants, needs, and expectations from the app.
In the first two studies, as I watch users get confused and frustrated with the app, I felt myself beginning to absorb their emotions. As silly as it sounds, it was heartbreaking in a way. I had let them down and what was worse, because of my design they felt confused and perhaps that they were not smart enough for the task. That is something I never want to do again. It was my design that was flawed, not the users.
My takeaway from this is; to ask for the most candid feedback possible. Ask for it often and from as many different people as possible.
Next Steps
Pages
Several pages are not yet complete. Features such as the "Brand Designer," "Templates," etc., all need to be designed completely with interactions.
Testing
As new pages are designed and completed, several new rounds of user testing will be necessary.
Expand
This app currently supports iPhones only. It will need to be updated for responsiveness accross multiple devices.
