UI Design

HOKA PRODUCT TESTING

Overview

HOKA Product testing Program is designed to allow avid runners and fitness enthusiasts to test and provide feedback on new Hoka products before they are released to the general public. Here are some key aspects of this program:

  1. Product Testing: Participants in the program receive Hoka’s latest footwear or gear to test in real-world conditions. This helps Hoka gather valuable feedback on product performance, comfort, durability, and other aspects.

  2. Feedback: Testers are typically asked to provide detailed feedback on their experience with the products. This feedback is used to refine and improve the products before they hit the market.

  3. Exclusive Access: Members of the testing program often get early access to new products and innovations from Hoka.

  4. Community: Being part of the testing program usually means joining a community of like-minded enthusiasts who share a passion for running and fitness.

  5. Incentives: Participants may receive incentives such as discounts on Hoka products, free merchandise, or other perks as a thank you for their contributions.


Research

Common UI Patterns

I started to create Landing Page for this journey by looking at different but common user interface patterns. I compared Reebok, Saucony, Brooks, New Blance, Allbirds, Adidas, and Under Armour. I found their strengths and started to design based on that result.

Reebok:

• Four simple steps
• Questions are related to product preference, size, interests, and short personal info

Saucony:

• One long page of questions
• Questions are related to product preference, size, interests, and short personal info

Brooks:

• Hard to find their testing program on their site
• Starts with legal and privacy pages and there are many similar pages in between questions
• The questions is not only product related but also asks about user’s income, number of household, level of education, etc

New Balance:

•It starts with sign-up with your email and user needs to wait for the company’s email to go through the process

Allbirds:

• Easy and straight forward questions
• No extremely personal and legal related questions
• Questions are related to product preference, size, interests, and short personal info

Adidas:

• Four simple steps
• Questions are related to product preference, size, interests, and short personal info

Under Armour:

• It starts with signing up with your email and you have to sign a document before seeing any program related questions/forms


User Flow

Base on what I found in my Common UI Patterns, I mapped out the user journey form the entry point of this flow to the end point.


Hi-Fi

In developing this high-fidelity (Hi-Fi) design, I conducted extensive research into common UI patterns and carefully mapped out the user flow to ensure an optimal and seamless user experience. My approach involved several key steps:

  1. Research on Common UI Patterns: I analyzed established user interface (UI) design patterns and best practices to understand what works effectively in similar contexts. This research helped me identify design elements and interactions that users are familiar with, which would contribute to an intuitive and user-friendly experience.

  2. User Flow Mapping: I meticulously mapped out the user flow, considering the various steps and interactions a user would encounter when navigating through the product detail page. This involved creating detailed flowcharts and wireframes to visualize the user journey from entry to checkout.

  3. Integration of Design Patterns: Based on the research, I incorporated common UI patterns into the design, such as consistent navigation elements, clear calls-to-action, and intuitive layout structures. These patterns were selected to align with user expectations and enhance usability.

  4. Iterative Design Process: The Hi-Fi design underwent multiple iterations, with feedback from stakeholders and usability testing informing each revision. This iterative process ensured that the design not only met aesthetic and functional goals but also addressed any potential pain points in the user journey.

  5. Focus on Seamless Experience: My goal was to create a user journey that was as smooth and efficient as possible. This involved optimizing the layout for ease of use, ensuring that key information and actions were easily accessible, and minimizing any friction points that could disrupt the user experience.

  6. Detailed Visual Design: The Hi-Fi design included polished visual elements, such as high-quality images, engaging videos, and interactive features, all presented in a cohesive and aesthetically pleasing manner. This level of detail was intended to enhance user engagement and satisfaction.

Previous
Previous

HOKA Product Detail Page

Next
Next

Cricut Video | Mobile App . Web