Golf Wang Case Study

Laptop and smartphone displaying the GOLF clothing website with models wearing casual outfits, against a desert landscape background.

Improving Golf Wang's Conversion Rate Through Strategic Product Card Redesign

It started with a 'schedule only' app

Golf Wang, the streetwear brand created by Grammy-winning artist Tyler, the Creator, is famous for its rare collectible-edge of fashion garments. While items are sold in flagship stores and at concerts, the website is the main source of revenue.

Despite this, Golf Wang's current web design approach creates usability gaps for users. Hidden pricing and unclear stock availability created friction in the purchase journey, leading to high cart abandonment rates. This signaled the opportunity for a redesign that would best guide users into the checkout process.

PROJECT TYPE

DesignLab Capstone Project

DELIVERABLES

User Research

User Journey

Usability Testing

UX/UI Design

Prototyping

IMPACT

33%

User testing indicated a 33% boost in the website's 'Ease of Use' from my website redesign.

JUMP TO PROTOTYPE

Redesigned product listing page that helps guide users into the checkout process.

CHALLENGE

Discover the design gaps in the user journey and create opportunities to improve conversion rates.

Golf Wang's e-commerce platform loses potential customers at critical moments in the shopping journey leading me to first define the design issues through these questions.

Yellow sticky note with the text 'Where did Golf Wang’s website miss the mark against its competitors?'

Yellow sticky note with the handwritten question: 'What features do users need to complete their purchase?'

Project Impact

33%

User testing indicated a 33% boost in the website's 'Ease of Use' from my website redesign.

JUMP TO PROTOTYPE

Toggle to see a quick glance of my redesign.

Challenge

Discover the design gaps in the user journey and create opportunities to improve conversion rates.

Golf Wang's e-commerce platform loses potential customers at critical moments in the shopping journey leading me to first define the design issues through these questions.

Define

Reframing adoption as a utility problem

Competitive Analysis

I analyzed how similar streetwear brands structured their e-commerce experiences to identify what users needed to feel confident moving through checkout. The essentials came down to visible pricing, color options preview, product name displays, and availability indicators.

User Interviews

I then tested these assumptions by interviewing four participants and observing their shopping behavior. Tracking where they paused or dropped off revealed exactly which features users needed to move confidently from browsing to checkout. The research confirmed that without upfront product information, users abandoned their journey before ever reaching the cart.

Smiling woman with curly hair adorned with flowers, wearing an orange and white striped shirt, standing with arms raised at an amusement park.

Avery, 27

"I shouldn't have to open each product just to check if a style is available or what the price is."

Person with long curly hair and glasses on head wearing an orange Deathworld t-shirt and black pants outdoors.

Skyler, 25

"Every item I wanted was out of stock and the browsing experience was too slow."

ideate

Reframing adoption as a utility problem

My ideation phase began with empathizing with the users’ needs to be well informed throughout the shopping process. This How Might We statement served as the focal point for my design desicions.

Text with brushstroke highlights saying, 'present product details' and 'complete their purchase.'

Priority Feature List

To guide my sketches, I created a priority feature list that tackled what Golf Wang's design was missing: upfront product information. This kept my solutions focused on addressing the exact friction points causing users to drop off.

Low Fidelity Wireframes

I sketched out low-fidelity wireframes to explore how to incorporate the priority features into the product listing experience. This let me quickly test different approaches and figure out the most intuitive way to present pricing, availability, and color options upfront.

Hand-drawn wireframe sketches of two mobile app screens: left screen shows a golf swing landing page layout with menu, stats, and video sections; right screen shows a product listing page with multiple product placeholders organized in a grid.

Building & Prototyping

Reframing adoption as a utility problem

After sketching, I moved into high-fidelity wireframes, refining how each priority feature would look and function within the product cards.

White eye icon centered on a yellow circular background.

Display key product details upfront

To include essential details for users early in the shopping journey, I enhanced the product cards on the product listing page by adding the product’s image, name and price. This met user’s expectations of seeing the price of an item while scanning through the website.

Before

Golf Wang’s current product cards only feature the product’s image.

After

My new design includes the product's name and price.

White octagon with an X symbol inside on a yellow circular background.

Clearly indicate unavailable items

Marking if items are sold out was important to the user because it assisted them in refining their shopping journey. In place of listing the price of an item, I listed items as sold-out allowing users a familiar way to recall details of an item.

Before

Golf Wang’s current product cards only feature the product’s image. Leaving customers with an additional step to find its availability.

After

The new product card design will display "Out of Stock" in place of it's price. This will inform the user throughout their journey.

White four-square grid icon centered on a yellow circular background.

Enhance product scannability

To reduce friction during product browsing, color options were added to the main product card and made visible on hover. This adjustment aligns with user expectations from other modern e-commerce sites and reduces the number of steps needed to compare items.

Before

The lack of details on the product page added time to the shopping experience leaving user's to discover what colors were available fo reach product.

After

On hover, users are able to see what colors are available for each product adding fun to the shopping journey.

White smartphone icon centered on a yellow circular background.

Responsive mobile design

To ensure a responsive experience, I optimized the mobile design to maintain feature parity with the desktop version. I added color options directly to the redesigned product cards, giving mobile users a mirrored experience to the Web version.

Before

Golf Wang’s product cards for mobile left product cards with only the product’s image.

After

Product cards for the mobile site include the product's name, price or availability, and the color options.

Building & Prototyping

Reframing adoption as a utility problem

After creating my prototypes, I facilitated usability testing with four participants to evaluate the usability and functionality of the redesigned user flows on both web and mobile. The sessions helped identify key pain points and validate areas of improvement based on direct user feedback. Results showed a positive impact in clearly informing users throughout the shopping process, confirming that thoughtful design decisions led to a more intuitive and satisfying experience.

Slide titled Research methodology listing two points: Ran remote usability tests with 4 previous GolfWang shoppers, and tests rated by ease of use on a scale of 1 to 5.

Person in a pink jacket with text showing an ease of use score of 4 out of 5 stars.

Scenic desert landscape with red rock formations and three quotes about testing displayed in rounded speech boxes.

User feedback section with an arrow icon and text about improving color swatch buttons on mobile for better usability.

Iterate

Reframing adoption as a utility problem

Testing confirmed the design was headed in the right direction, but users pointed out a key friction point—the color swatch buttons were too small to tap accurately. I went back and increased the size of each swatch and added more spacing between them. This simple change made a huge difference in how confidently users could interact with the feature.

White arrows pointing diagonally outward within a yellow circle.

Improve accessibility of color swatch buttons

During testing, users found it difficult to select color swatches due to the small size and limited spacing of each color swatch icon. Increasing both the icon dimensions and the padding between them was identified as a key improvement to enhance visibility and selection accuracy.

Before

Users had issues with the color swatch buttons. Sometimes accidentally pressing it or having trouble switching between them.

After

Increasing the size of the color swatch buttons improved both visibility and selection accuracy.

Conclusion

Reframing adoption as a utility problem

After refining the design based on user feedback, I built interactive prototypes for web and mobile that demonstrate how users can now shop quickly and confidently with essential product information upfront.
This project taught me that great design isn't about adding more; it's about revealing what matters most. Golf Wang prioritized aesthetics over accessibility, but the two don't have to compete. By focusing on what users needed to make decisions, I created an experience that feels intentional and effortless. The 33% boost in usability proved it: clarity and purpose drive results.

Key Takeaways with three points: Accessibility design reduces frustration, User-first thinking drives results, Concise and direct flow drives engagement.

Next Steps

Now that this design streamlines Golf Wang’s shopping experience, the next step is to honor the brand’s roots as a magazine. Based on my research, Golf Wang has a unique opportunity to showcase more photography from past and current drops. Here's how I envision the Home Page with a refreshed way to utilize editorial photos of the products.

BACK TO THE TOP

NEXT CASE STUDY

let’s buildsomething great

let’s build
something great