Brand Interface Design
Promoting Onitsuka Tiger
![](https://freight.cargo.site/t/original/i/b008bc1a9603000a4906a0e119dc2d29ec8e88ffaa267c7d41f8bdba36948309/Product-Display.png)
Timeline
Jan - Apr 2024Role
UI DesignerTools
FigmaAdobe Suite
Deliverables
Project Proposal PrototypeOverview
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.
![](https://freight.cargo.site/t/original/i/0767ba5f4801bd7a073c9299a7eea4eae597dc757a7a94464a2fa0403ca351be/Screenshot-2024-04-08-at-12.37.57PM.png)
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.
![](https://freight.cargo.site/t/original/i/224d80821a7dd2d2ffa2f02e4e3f0704efeb28cb2324af72a80500895dc19522/16.png)
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.
![](https://freight.cargo.site/t/original/i/71a2aeacee93540f1e165e1e6ab4764204cf0e55109591208341c88ddd499047/fitts.png)
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.
![](https://freight.cargo.site/t/original/i/9ef1c47604c43b03a91f884149052765e2b3d48dc4f0d61d6f81dfe4055a435b/18.png)
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.
![](https://freight.cargo.site/t/original/i/d5b1585bcc0e6f6ee454597a8a00c5e326e1eb66179a8b8c9517ac513b5f076b/19.png)
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.
![](https://freight.cargo.site/t/original/i/b008bc1a9603000a4906a0e119dc2d29ec8e88ffaa267c7d41f8bdba36948309/Product-Display.png)
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.