Golf Wang: Responsive Website

Elevating Tyler the Creator's Golf Wang Website through fluid solutions.

My Scope

End-to-End
UX Research
UX Design
UI Design
Prototyping

The Team

Product Designer - Me
UX Academy Mentor - Peter Ndirpaya

Tools

Figma, Google Suite, MilaNote

Overview

Intro

Tyler, the Creator, is an American rapper, singer, songwriter, record producer, and fashion designer. He is the leader and co-founder of the alternative hip hop collective Odd Future. In 2011, he launched his own clothing brand, Golf Wang, which has gained popularity for its streetwear-inspired designs. Golf Wang has collaborated with brands such as Vans, Converse, and Lacoste, and has released limited-edition items that have become highly sought after by fans. The brand is known for its unique aesthetic, which often incorporates bright colors, bold graphics, and playful motifs. Tyler, the Creator, has become a cultural phenomenon who promotes creativity and individuality.

Problem

The Golf Wang website currently faces challenges in functionality, accessibility, and user experience. Despite Tyler, the Creator’s numerous accolades—such as Music Innovator of the Year (2019), BET’s Cultural Influence Award (2021), and two Grammys for Best Rap Album (2020, 2022)—the site’s aesthetic fails to reflect the bold, luxury lifestyle his music promotes. This presented an opportunity to redesign the website, aligning it with Tyler’s elevated image while maintaining accessibility and inclusivity for all shoppers.

Design Process

Empathize

Competitive Analysis

My Competitive analysis allowed me to identify the benchmark of competing streetwear brands and their e-commerce websites. The key findings lead me to believe that an improvement to the UI would be an investment in modernizing and improving user experience. Here were the main UI changes I felt should be prioritized:

Optimizing the navigation through each page.
Designing for a seamless responsive experience.
Strengthen brand reputation and ethos through photography real estate.
Enhance the information architecture for easy browsing.

User Interviews

I was able to interview 3 people for this project. This research helped me understand the pain points of user which could be summed up to the following:

Consistency and Visual Appeal: All three respondents raised concerns about the cluttered appearance and unconventional layout.
Product Presentation: Users express dissatisfaction with the product page layout, particularly regarding the need to click on each item to view details. They also pointed out that the font sizes and item descriptions could use improvement.
Checkout Process: The checkout process is standard, but some enhancements to streamline the process and improve user experience can be improved.
Homepage and IA Improvement: The homepage can be updated by tailoring engaging and relevant information.

Define

User Personas

Following user interviews, I created user personas to synthesize key findings and better understand the diverse needs and behaviors of Golf Wang’s customers. These personas represent target users, highlighting their pain points, motivations, and interactions with the site. By grounding the design process in these personas, I was able to prioritize solutions that directly address the unique challenges and desires of the users, ensuring a more personalized and effective experience.

Feature List

Based on key insights from user interviews and competitive analysis, I developed a feature list aimed at elevating the Golf Wang website's user experience.

How Might We

Planning began with key "How Might We" (HMW) questions that guided the exploration of challenges related to user behavior and business goals. These questions sparked innovative ideas to refine the site’s layout, improve usability, and create a cohesive experience across devices, laying the foundation for actionable, research-driven strategies that bridge creativity with practicality.

Mood Board

To finish the "Define" phase of the design process, I created a mood board that would help me understand the current state of Golf Wang's brand aesthetic. Through this process I could assess what visual solutions would serve the user best.

Test

User-Testing

I conducted usability testing with three users, asking them to rate two flows on both web and mobile: navigating the landing page, searching for items, adding to the cart, and completing checkout. Using a 1-5 scale, with 5 being easiest, Flow 1 received an average score of 4.6, while Flow 2 scored 4.3.

Iterate

My user testing guided me into the iteration phase. With these changes made, I feel I was able to design the best solution for Golf Wang.

Color Swatch Sizing

Users felt that the color swatches for the PLP were a bit too small and inaccessible, so I’ve gone ahead and enlarged them.

Added Details

I added a tab for “Shipping and Returns” information on the PDP page to help inform the user of finder details they may impact their transaction.

Accessible Scrolling

Finally, on the mobile experience, a user pointed out that the category filter on the PLP could be more accessible if it hinted at content available to scroll.

Final Web Frames

Final Mobile Frames

Takeaways and Reflection

Through this project, I gained a newfound appreciation for every stage of the design process, recognizing the significance of even the smallest details when conceptualizing user-centered solutions. The project also highlighted the crucial role of Jakob's law in ensuring that designs effectively achieve their intended goal, rather than solely focusing on aesthetics. - I’ll let the clothing do that job for me.

back to the top

next project