Brand Interface Design



Promoting Onitsuka Tiger









Timeline

Jan - Apr 2024

Role

UI Designer


Tools

Figma
Adobe Suite

Deliverables

Project Proposal Prototype



Overview


This project involves the creation of a promotional website for Onitsuka Tiger, a Japanese footwear brand that specializes in casual shoes and classic sneakers. The website will feature sections highlighting popular aspects of Onitsuka’s most popular and well-known sneaker, the Mexico 66 sneaker. The website will also offer purchasing tutorials and ensure a friendly user experience. Throughout the process, I created an interface that would allow users to navigate smoothly and intuitively and that would present content in a way that would be simple for users to comprehend and retain; all while adhering to various laws and principles of user interface design. The following are some of the principles used:

  • Miller’s Law
  • Fitts’s Law
  • Zeigarnik Effect
  • The Multimedia Principle





Project Goals


The primary goal of this project is to design a promotional website for Onitsuka Tiger that effectively showcases the brand's popular Mexico 66 sneaker as an effective, reliable, and stylish sneaker choice. By utilizing UI principles and following best design practices, the website seeks to engage users through intuitive navigation and educational content about the advantages of the products. The ultimate goal is to create an aesthetically pleasing and user-friendly platform that promotes Onitsuka's products and encourages sales.




Project Proposal


Initially, I created a project proposal outlining the laws and principles of user interface design that I intended to apply in my final project. I outlined in my project proposal how I intended to apply each User Interface (UI) guideline to my finished design. View my final project proposal and see a more detailed explanation of how I intended to apply each UI principle by clicking the link below.






User Interface Design Principles


Miller’s Law


Miller’s Law states that the average person can only keep seven (plus or minus two) items in their working memory. With this principle in mind, I designed each tutorial in each section to contain only six steps. I contained one less step from the average seven, so users could navigate and remember the steps slightly easier.




Fitts’s Law


Fitts Law declares that a target's size and proximity determine how long it takes for a user to obtain and interact with it. To utilize this law, I used auto layout to set the distance and size of each graphic button to be the same across all pages, allowing users to interact with each button.





Ziegarnik Effect


The Zeigarnik Effect states that users remember uncompleted or interrupted tasks better than completed tasks. To use this effect, I included a task bar at the bottom of each step that guides the user along each task and fills up as the users complete more and more steps.




The Multimedia Principle


The Multimedia Principle states that users learn better from both text and graphics than from text alone. To help users understand this, I gave users text-based instructions and visual graphics overlaid on top of the images.




Final Prototype


For the final prototype, I created a promotional website for Onitsuka Tiger. The website featured sections highlighting details of its most popular sneaker as well as purchase tutorials. I used industry-standard design concepts throughout the process to make sure the user interface was welcoming, professional, and intuitive.








Takeaways


By integrating principles and concepts of user interface design into my design, I was able to maximize its usability. I was able to design a product that is more easily understood and intuitive, by understanding the way the user's brain processes materials. I'm excited to use these concepts in next creative endeavors.




        Last updated: December 2023