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 distinguished 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.
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.
IMPACT
33%
User testing indicated a 33% boost in the website's 'Ease of Use' from my website redesign.
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.
After examining how similar streetwear brands approached their e-commerce shopping experiences I deduced what key features were necessary to a e-commerce shopping experience that informed users and guided them into the checkout process.
User Interviews
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.
Avery, 27
"I shouldn't have to open each product just to check if a style is available or what the price is."
Skyler, 25
"Every item I wanted was out of stock and the browsing experience was too slow."
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.
