You Wear Me Out
Portfolio Project | E-Commerce Site Design | UX Case Study | View Prototype
Tools: Adobe XD, Illustrator
Scope: UX Research and Testing, UX/UI Design for homepage, search results page, product detail page, and checkout process, branding and style guide
Overview
You Wear Me Out (YWMO) was established in 2022 as a lifestyle brand and e-commerce destination for band tees, featuring bands from the 90s and early 00s. Inspired by the recent rise in appreciation of 90s and 00s aesthetics, YWMO’s focus on the nostalgia of the early millennium is an answer to the rapidly evolving definition of what is considered “vintage” in today’s world.
Research found that many places already exist to cater to fans of music from the 50s - 80s. Most general department stores sell shirts for popular 70s and 80s bands, with exceptions for popular 90s grunge and pop artists. The choices aren’t nearly as expansive for people who grew up to 90s radio hits or finding their favorite bands while crashing their family desktop computers in the early days of downloading and streaming. Named from a lyric in a popular early 00s alt anthem, YWMO is both a literal description of the t-shirts offered as well as an ode to millennial angst.
Behind the Design
Logo
Representing the resurrection of this era, the logo features a ghost overlaid with the YOU WEAR ME OUT banner and a heart. Inspired by late 90s/early 00s online aesthetics and iconic band logos (e.g. Nirvana’s yellow smiley, Blink-182’s x’s and arrows smiley, Radiohead’s geometric bear) the logo’s art style channels what could be found doodled on the inside of a notebook or the first custom layout on a Myspace page.
Brand Voice
For accessibility, communications should be clear and easy to understand by any reader. YWMO should be authentic and genuine, with language that feels more like a conversation between friends about their favorite records instead of a sales pitch.
Interface Design
The e-commerce site features a primary palette of Black Wash and White Smoke to align with the long-standing relationship the colors black and white have with alternative music lifestyle apparel brands. Daphne Blue, Seafoam Green, and Shell Pink are used alongside the primary palette as a nod to the colors of guitars featured on stage by many of the bands and musicians idolized by members of the YWMO community.
The colors connect the aesthetic of the album art and instruments representative of the early aughts to the YWMO brand, and are interwoven into design elements when possible but do not detract from the product imagery.
Lifestyle shots of live music and concerts, photos of relevant bands and their associated art, and product imagery that highlights the available apparel is critical to the site’s design, to emphasize the feeling of turning up your favorite song as loud as you can and letting everything go. A mood board was developed with imagery reflective of the genres embraced by YWMO.
UX Evaluation Process
Evaluation Objectives
Usability Testing was conducted to determine the usability and effectiveness of the You Wear Me Out interface via user interaction with a functional prototype of the site. The primary objectives of the test were defined as follows to better inform the testing approach:
#1 Conduct a User Task Analysis to validate usability of YWMO’s interface
Indicator of success: The user participant is able to successfully complete a path to purchase on You Wear Me Out’s site with a provided scenario.
#2 Conduct a post-test survey that captures anecdotal results of user’s feelings and emotions while navigating YWMO’s interface
Indicator of success: YWMO’s site design captures the intended audience’s attention as an authentic place to purchase band tees.
Testing Approach
To ensure accurate results of the test and better understand the user experience, five users were selected to participate in a remote usability test based on the requirements informed by the research on the YWMO target audience.
User Task Analysis
Usability testing was conducted remotely via individually scheduled Zoom sessions and Google Forms over the span of a one-week time period to capture initial data for review.
During each user’s scheduled individual Zoom session, the participant shared their screen as they engaged with the prototype based on a provided scenario:
Purchase the available Linkin Park Meteora t-shirt navigating from the Bands A-Z category featured on the YWMO homepage
User behavior was monitored for:
Instances of error or confusion
Requests for help or guidance from observer
Verbal feedback (positive or negative)
Duration of task
Successful “completion” of a purchase
User Task Analysis Results
100% of users were able to successfully complete the scenario of purchasing the specified shirt from the You Wear Me Out website without requesting help, guidance, or additional cues from the observer during the test.
Additional user data captured in the observation to further inform design also indicated an overall positive shopping experience with potential for design adjustments related to the checkout process.Usability Test Survey
Immediately following the completion of the User Task Analysis, participants were asked to complete a 7 question survey (using Google Forms) about their experience with the YWMO site.
Sample questions focused on users’ opinions of the site’s design, navigation, checkout process, and whether or not users recognized the bands carried on the site and if they would complete a purchase from the site.
Usability Test Survey Results
Completion of the post-task analysis survey revealed 100% of users liked the YWMO site design and would purchase from YWMO in the future.
Additional user-provided feedback from the short answer questions identified areas to re-address in further iterations of the site design, including the payment process and the product page.
Summary of Findings
Usability Testing of the You Wear Me Out prototype indicated the design was successful in terms of functionality, layout, and aesthetics. All users were able to navigate the site without error or confusion and all users indicated they would complete a purchase on the You Wear Me Out site if given the option.
The results of the Usability Testing helped inform the following updates to the design:
Reduced amount of product images per category page
More emphasis on product description and information on product page
Added clarity to the checkout process
Key Design Updates
Category Page: Less is More
User feedback generated from the survey indicated overall satisfaction with the layout and design of these pages, but the duration of user time spent on this page to locate a specific shirt identified room for improvement.
To avoid possible decision fatigue, the amount of available products featured per page was reduced from 12 to 9, with an increase in product image sizes and additional free space between products.
Product Page: Emphasis on Information
User feedback generated from the survey indicated satisfaction with the product description and images, but the short-answer survey suggested a desire for more emphasis on the product sizing.
To better showcase this information, the “Trending” items bar was removed from the bottom of the page in favor of emphasizing the product section to eliminate redundancy (since “Trending” is a primary category on the homepage and users can already sort results by “Best Sellers”), add a call to action to the size guide, and maintain variations of the product on a singular page.
Checkout: Easy as 1-2-3
Feedback observed and collected in the task analysis and survey indicated concern with the length of the checkout process. Previous un-tested iterations of the prototype featured 5 steps vs the current 3 steps.
Additional consideration of the data revealed:
No errors or hurdles in completion of checkout tasksUser time spent on checkout did not fluctuate between users who positively ranked the checkout process and those negatively ranked the processAll users confirmed they would complete a purchase, indicating the checkout process did not deter users from the objective
