The product
A soccer website highlighting the top three best-selling cleat brands—Adidas, Nike, and Puma—features their history and detailed descriptions of each cleat model.
Project duration
June 2024 to July 2024
Role
Lead UX designer, UX researcher
Responsibilities
User research, wireframing, prototyping
1.
Project Overview
Problem statement
Tanner is a young soccer player seeking to gather information about different types of cleats and their history in order to find the perfect pair for his needs.
Goal statement
Our SoccerCleatHead website will help users find the perfect cleat by showcasing three curated options, providing detailed knowledge, history, and background on each brand. We will measure effectiveness by analyzing the views and engagement with each option.
2.
Paper wireframes
I start by sketching out the basic structure of the interface, focusing on the layout, navigation, and key elements to ensure a clear visual hierarchy. This process allows for quick iteration and feedback, helping to refine the design before moving to digital prototypes.
3.
Digital wireframes
I concentrate on creating the foundational layout and structure of the user interface, ensuring that core components and functionalities are well-defined and logically organized. Additionally, I emphasize user experience by thoughtfully positioning interactive elements to improve usability.
4.
Low-fidelity prototype
I prioritize fundamental layouts and interface elements to swiftly visualize and refine design concepts. This method highlights functionality and user flow, enabling quick adjustments based on feedback over detailed aesthetics.
5.
Mockups
I refine visual design by incorporating brand elements and ensuring the layout and components meet user needs and project goals. Additionally, I add interactive elements to simulate user experience, facilitating the identification of potential usability issues before development.
Before usability study
After usability study
Before usability study
After usability study
6.
High-fidelity prototype
I create detailed and interactive mockups that closely resemble the final product, incorporating precise visual elements and realistic user interactions. My designs focus on accuracy and user experience, ensuring every interface component is thoughtfully integrated.
7.
Takeaways
Impact
"I enjoyed reading about how the cleats continue to get better and better year after year" - Ryan usability tester
What I learned
I learned the importance of thorough research and attention to detail in presenting brand histories and product descriptions accurately. I also gained insights into the significance of user-centered design in enhancing user experience, ensuring the website is intuitive and engaging. Additionally, I understood the value of iterative testing and feedback in refining the prototype to meet user needs and expectations effectively.
8.
Link