Although customization websites aren’t new, this was my first experience working on such a complex product. Throughout the project, I focused on simplifying the design and getting the visual hierarchy right, particularly for mobile users.
Project and Clients
Yakyukan is a Japanese sports gear provider. Their main products are baseball products, such as bats, gloves, clothes, …
The Yakyukan project involved customizing gloves through an online platform, requiring a user-friendly interface that adhered to specific client preferences.
I was responsible for designing their glove customization website, ensuring it’s intuitive for both mobile and pc users.
Challenges
The client requested a website design without scroll functions, using complex nested tabs that created insufficient space for content. Additionally, the development team faced challenges interpreting glove components due to client documentation gaps.
At the start of the project, I received an Illustrator file of baseball gloves with all of its variations. Because of the large amount of the gloves’ components, I had to manage file names and storing with extra care.
Approach
I implemented grouping principles to logically divide the interface into manageable sections by utilizing progressive disclosure techniques instead of nested tabs.
Collaboration
I collaborated closely with the project manager to clarify project scope, timelines, and deliverables, ensuring a mutual understanding of objectives and alignment throughout development.
Furthermore, I also worked with him to clarify the client’s requirements and develop a comprehensive document detailing the glove components.
By having more detailed component descriptions, we had speeded up the development process and eliminated misunderstandings.
Providing Solutions
Despite the client’s request that all information be displayed on a single screen, this approach risked complicating the customization function and overwhelming users. I proposed an alternative design using progressive disclosure techniques, including tabs, choice chips, carousels, and segmented buttons.
Design
After finalizing the layout, I developed high-fidelity designs.
I prioritized choosing a friendly font with a semi-rounded shape, clean design, and multiple weights available.
Design Iteration
We prioritized obtaining prompt client feedback on the design. After presenting the high-fidelity mockups, I made further adjustments based on client input, minimizing visual clutter to enhance focus on essential functions. This resulted in a cleaner, more user-friendly design.
The website needs to be functional on both mobile and PC platforms. So I also focus on creating the mobile interface.
I had to be especially careful when incorporating all the features to ensure they worked well and made sense on a small mobile screen.
Conclusion
We successfully addressed the client’s needs through effective communication and collaboration while creating a streamlined interface for the Yakyukan glove customization project.
We wrapped up the project on time, and both the PC and mobile versions worked great during our tests with real users.