— MICHELLADA —
Michellada is a DJ based in San Diego, CA. Michellada’s unique and playful mash-ups of modern pop music have earned her a dedicated fanbase throughout the Pacific Coast. Michellada’s website offers a list of her tour dates, a number of her latest tracks for purchase and download, along with merchandise (“Merchellada”) for purchase.
A new feature in progress on Michellada’s website is a merchandise customization flow, which will allow users to customize each item according to their individual style. Michellada encourages fans to explore their creativity: she aims to create a unique experience for users to express their originality.
Millennials want the creative freedom to customize merchandise but are concerned about price, number of options and convenience.
The Problem
|
Design a merchandise customization flow for Michellada’s website that provides enough features to cater to each user’s individual style while remaining easy to navigate on all devices.
The Goal
|
— RESEARCH —
I am familiar with the demographics of Michellada’s fanbase, as she is a friend of mine and I have attended many of her shows. Assuming that the primary users of her website would be the same or have similar characteristics to her fans, I identified my target audience as young students and professionals who have an interest in both music and fashion. To understand my audience further, I found qualitative research methods most useful. I began by interviewing participants, developing personas, identifying user pain points, and conducting a competitive audit.
Target Audience
To understand more about the target users of Michellada’s merchandise customization flow, I interviewed six participants (three males, three females, ages 18-30) who have had previous experience customizing merchandise online. I kept the questions open-ended, allowing users to elaborate on their relationship between music and personal style, in addition to their thoughts on current merchandise customization websites.
Interview
Responses from interviews showed that users have had some positive but mostly negative experiences with customizing merchandise online. I identified three common paint points shared amongst most users:
Persona Development
| Process: The process of customizing merchandise online can be difficult to follow. Websites are often cluttered with text and images, which can be overwhelming for users.
| Product: Current customization websites do not provide enough options for users to customize a piece exactly to fit their personal style (ex. number of color options).
| Financial: Customizing merchandise online can be very expensive. It is particularly frustrating for users when there are hidden costs associated with “premium” options, such as specific colors and fonts.
Now that I had an idea of users’ feelings towards online merchandise customization platforms, I began to look at how other companies tackle user issues. No companies directly compete with Michellada, as not many DJs/artists offer custom merchandise. However, I looked at popular companies that do offer customizations: Converse, Nike, and Custom Ink.
Competitive Audit
The majority of features on each website are similar, with some main differences:
| Too Many Customization Options vs. Lack of Customization Options
Competitors seem to have a difficult time finding a balance between providing plenty of customization options and maintaining a clean interface. Converse and Nike have limited options for color and pattern choices, as well as sections of fabric to customize. On the other hand, Custom Ink offers so many customization options that the process is overwhelming.
| Many Screens vs. Simplified Screens
Nike and Converse display their customization feature on one initial screen with a carousel for viewing different sections, which involves a lot of back-and-forth navigation. Custom Ink has one main screen with a side-bar navigation, which allows users to complete the main user flow in fewer steps.
| Set Price vs. Price per Feature
Nike and Converse offer one set price for a customized item, which prevents users from being surprised by the cost. Custom Ink calculates the price after users complete their design, which can lead to user uncertainty.
Research supported some of my initial assumptions: users are concerned about the price of customizing merchandise in addition to the convenience of the customization process. Interestingly, a new idea was brought to my attention: fashion as a representation of individuality. While customizing merchandise online is not a process that most users think about in their daily lives, users consider fashion as a tool for expressing individuality. I now realized that, in addition to considering price and process in my design, I must ideate ways to allows users to have more creative freedom on their designs.
Synthesis
Our user is a busy young professional who is a fan of Michellada. She needs a simple, affordable and creative way to customize merchandise online because she wants to create a unique piece for herself that reflects her individual style while also remaining within her budget.
— DEFINE —
— IDEATE —
To begin the ideation phase, I considered ways to address my main user pain points. I asked myself,
How Might We:
How Might We
| Simplify the user flow without sacrificing the amount of customization options available?
| Create a way for users to have more creative freedom on their designs?
| Provide users with better representations of what they can expect?
| Be transparent to users about the cost of customizing merchandise?
| Make the shopping experience fun, easy to use, and engaging?
I proposed a new user flow for customizing and purchasing merchandise online that would allow users to have the option to add as little or as many customizations to their design as they please.
New Flow
I started brainstorming ideas for the design of my new user flow using pen and paper. I completed a crazy eights exercise, narrowed down ideas based on user needs, and consolidated features to include in my low-fidelity prototype.
Sketching
— DESIGN —
Low-Fidelity Prototype
I converted my paper wireframes to digital wireframes using Adobe XD. I created a low-fidelity prototype from the wireframes to get an idea of how the website would function. I wanted to collect user feedback as early as possible in the design process so I could address any major user pain points before adding visual design.
Test
| Less Clicks: Users need design elements to automatically appear on the design workspace instead of having to drag and drop elements.
| Comparing Designs: Users need a way to add and compare multiple designs.
| Better Visual Cues: User need a more intuitive way of resizing and repositioning elements.
In my first unmoderated usability study, I asked five participants to complete the main user flow: add a logo, image, and text to a custom piece of merchandise and complete the checkout process. I discovered three actionable insights from their interaction with the product:
High-Fidelity Prototype
After iterating on my initial prototype, I started to add visual elements to my design. I then connected screens to create a final prototype for testing. I wanted to utilize design elements to create an experience that reflects Michellada’s music and style.
Creating a simple user flow was challenging, as I wanted to offer as many customization options as possible without overwhelming the user with information. To prevent cluttering, I used a progressive disclosure approach. I added a side menu to the customization window that contains three clear labels: “Logo,” “Image,” and “Text.” Each label can be opened to reveal a larger set of specialized options upon request. This allows users to spend time on features that are useful to them and avoid unnecessary information.
Keeping in mind both user and business goals, I wanted to create a way for users to design clothing that reflects their individual style. I had to decide what design options would allow more creative freedom than what current merchandise platforms offer. I decided to add a color wheel, a number of different font options, the option to create custom text and even the option to upload a custom image. In addition, I created a drag and drop feature, which allows users to resize text and images and position them anywhere on the design canvas.
Option 1: Customize Logo
1. Choose Logo Style
2. Choose Custom Color
3. Resize and Reposition
Option 2: Customize Image
Option 3: Customize Text
To help users be more confident in their final design decision, I wanted to provide an accurate representation of what their designs look like. I added a preview window at each step of the customization process to allow for quick comparisons of different fonts, colors, and styles. I created the option to add multiple elements to one piece of clothing so users navigate back and forth on different designs and decide what they like best.
I wanted to be clear about the pricing of custom merchandise in order to avoid any user frustration. As customizing clothing comes with a price, I had to decided between two options: an inexpensive base price with additional fees for elements added, or one set, more expensive, price. I decided to offer one set price. Although the price would be slightly more expensive, users would be certain of what to expect before starting the process.
Final Prototype
— STYLE GUIDE —
I wanted the design of Michellada’s website to mimic a live DJ concert. I used photos of Michellada’s previous concert sets for inspiration and noticed a theme: dark, high contrasting colors, often with pops of bright red. I decided to create a dark ambience by making all background colors black. I made call-to-action buttons a bright red color that contrasts with the background and imitates flashing lights. The main typeface of choice was Impact, a bold sans serif font. I felt this typeface fit the design of the website due to its dark, edgy style.
— TAKEAWAYS —
As a friend and fan of Michellada, working on her merchandise customization flow was very exciting and rewarding. I was able to experiment with new ideas and continue practicing the research and design process. While I tried to tackle as many user issues as possible, more usability studies would need to be conducted to continue iterating on my designs. In addition, I would have to work with merchandise manufacturers to learn more about how feasible my design would be in real life. For example, although I would like to keep pricing affordable, I would need to research more into the costs associated with merchandise customization. I am starting to recognize that while a design may work well in theory, available resources and technology may restrict the execution of the design.
Thoughts & Future Steps
