01 The Situation
What is Shirt.Woot?
Shirt.Woot is an arm of Woot.com, which itself is a subsidiary of Amazon.com. They sell graphic t-shirts, showcasing an independent artist's design every day. Their designs are chosen by the art directors, or selected by users in a weekly t-shirt derby.
Why a Usability Evaluation?
Shirt.Woot has an entirely different business model from other Woot.com websites. As a result their more unique features are left behind when other Woot sites are updated. Two of their most prominent features, the shirt catalog, and t-shirt derby, are not mobile friendly. Site use, and site sales, are suffering as a result of outdated web design practices.
I will use qualitative and quantitative analysis to evaluate current task flows, uncover errors and pain points, and give data driven suggestions to stakeholders on how to improve the overall user experience of Shirt.Woot.
02 Generative Research
Establish Feedback Loops
I have organized a communicative system for shirt.woot artists, art directors, staff and other stakeholders to directly engage in an ongoing discussion about possible usability issues. Current issues to be explored are:
● Lack of mobile friendly Derby and All Designs (product catalog) pages.
● Reduction of community involvement. Possibly due to the Community button being relocated.
● Reduction of t-shirt Derby involvement. Possibly due to out of date web practices which have made the process unclear to newcomers.
● Outdated/ineffective product photo layouts which do not show enough details of the t-shirt designs.
03 Click Test - Derby Button
What was Tested?
Shirt.Woot's t-shirt contest allows artists to submit designs to a weekly themed "Derby". Users and artists can then vote on which designs they think should be sold. My first step to evaluating the Derby task flow was the Derby button itself. I suspect not every user will know what that button means at a glance, so I needed to test that hypothesis.
I made a click test on UsabilityHub.com of Shirt.Woot's homepage. I sought out users who had never seen the Shirt.Woot website before and asked a single question:
"Where would you click to view the t-shirt contest?"
As seen on the blue dots below, only 1 out of 13 users clicked the Derby button. And the one user who did click the Derby button answered my follow-up question, "Do you think you found a suitable link to the contest?" with "i have no idea. i didn't see any mention of a contest."
While I will certainly examine this issue more closely, the problem seems to be the word “derby” in itself does not mean "t-shirt contest" to unfamiliar users. I informed the Shirt.Woot team that they will likely need to rename that feature, or provide guidance on the main page in order to attract new users to participate in the t-shirt submission and voting process.
04 Usability Test - Derby Page
I performed five, in-person, usability tests with users who were already moderately familiar with Shirt.Woot and the Derby feature. These were short tests meant to explore the task flow and potential pain points.
Test Tasks and Questions
● Task 1 - From the homepage, find the t-shirt contest.
Follow-up Question 1: What are your thoughts on this (the Derby) page?
● Task 2 - Can you tell me when the next derby begins?
● Task 3 - Can you tell me what the next derby theme is?
● Task 4 - Let's assume you would like to enter your art into this contest, how would you begin that process?
Follow-up Question 2: Based on the information of the submission page, can you describe what you think the process for submitting would look like?
Most tasks were completed with relative ease. However, I discovered information which was not present on the Derby page, and identified a few other pain points. The main ones are listed below:
● Only 1 of 5 users could find when the next derby begins, and the information they found was out of date.
● All 5 users mentioned the word "cluttered" or "busy" in regards to how the derby information is presented.
● Derby rules are incomplete or unclear.
I provided preliminary suggestions which can be quickly implemented. Most involved adjusting formatting and wording to create a more structured hierarchy of information. Clearly stating the rules and end/start times was another priority.
These changes conform to the existing layout restraints. I will be exploring more innovative options as time allows.
05 Mobile Breakpoint - Derby Page
Derby participation has been steadily declining for a variety of reasons. The derby requires high voter participation in order to properly assess the popularity and potential ROI of designs. The current derby page is not mobile friendly, and it requires users to pinch and zoom in order to understand and use the contents. Mobile first-time visitors will have difficulty understanding the purpose of the derby, discouraging participation.
I created a mobile breakpoint mockup with the same contents as the current page using sketch+craft and InVision. Information is presented in a logical hierarchy, and buttons are positioned and sized using best mobile practices.
Other Points to Consider
I will assess if more onboarding for first-time users is necessary to ensure they understand the derby features.
06 Next Steps
This project is just getting started. My current areas of focus are:
● Creating mobile breakpoint mock-ups of All Designs page.
● Further usability tests of the Derby page and submission process in order to create a more newcomer friendly process. And increase number of successful print file submissions.
● Make iterative changes based on stakeholder feedback as well as further preference and click-test results.
Thanks for taking a look at my current project!