Golf Wang, the streetwear brand by Grammy-winning artist Tyler, the Creator, is famous for its striking designs. While items are sold in flagship stores and at concerts, the website is the main source of revenue.
Golf Wang's unique and distinguished web design approach comes at a cost: hidden pricing and unclear stock availability created friction in the purchase journey, leading to high cart abandonment rates and signaling the need for a user-centered redesign.
PROJECT TYPE
DesignLab Capstone Project
DELIVERABLES
User Research
User Journey
Usability Testing
UX/UI Design
Prototyping
IMPACT
33%
Boost in ease of use (3/5 to 4/5) through strategic UX improvements, transforming hesitant browsers into confident buyers.
CHALLENGE
Golf Wang's e-commerce platform loses potential customers at critical moments in the purchase journey.
To uncover the responsibilities and challenges of this project, I listed the key challenges we needed to answer in order to design our best solutions.
Next, I examined how similar streetwear brands approached their e-commerce experiences. This research established industry benchmarks and revealed opportunities to enhance Golf Wang's shopping journey.
User Interviews
To identify obstacles preventing purchase completion on Golf Wang's website, I interviewed four participants and observed their shopping patterns. By tracking where they paused or dropped off during their journey, I pinpointed the key features users required to feel confident adding items to their cart and finishing the checkout process.
"The browsing experience is really slow. I shouldn't have to open each product just to check if it comes in blue or what the price is."
SYNTHESIZING RESEARCH
Critical UX Gap Identified
The absence of essential product information—pricing, color options, product names, and availability—on the main shopping pages forced users to click through individual product pages repeatedly.
My ideation phase began with empathizing with the users’ needs through this HMW statement:
Priority Feature List
To guide my sketches, I created a priority feature list. This helped me focus on ideating solutions that would speak to the entirety of user’s issues and take full advantage of the opportunity to improve the experience.
Low Fidelity Wirefames
This checklist guided my low-fidelity wireframes, ensuring clear product visibility, minimizing navigation, and helping users quickly assess if an item fits their style and budget without extra clicks.
After sketching, I worked on creating high-fidelity wireframes that spoke to each priority feature.
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.
Current design:
New design:
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.
Current design:
New design:
Enhance product scannability
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.
Current design:
New design:
Responsive mobile design
To ensure a responsive shopping experience, I optimized the mobile design to maintain feature parity with the desktop version. I incorporated color options directly into the product cards, allowing mobile users to easily view and select different variations without extra navigation.
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.
After sketching, I worked on creating high-fidelity wireframes that spoke to each priority feature.
Improve color swatch buttons
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.
Once I implemented the iterations taken from user feedback, I prototyped my design solutions to further emphasize that adding product details allows for a more efficient shopping experience for users. The design changes made offer users the ability to conserve time, and browse through and discover items with ease.
I set out to improve the Golf Wang shopping experience by making product details easier to find, reducing friction, and creating a smoother browsing flow. Through research, testing, and iteration, I was able to address key pain points such as improving the visibility and tap targets of color swatch icons on mobile. This project reminded me how important it is to design with clarity and usability in mind so that users can explore and shop with ease.
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 an "editorial magazine" treatment.
