DrinkMatchaa Website
Role
User Interface Designer
Tools
Figma
Deliverables
Project Proposal
Prototype
Duration
2 months
Overview
In this project, I developed an informational website prototype using Figma, aimed at creating an intuitive user interface to enhance learning. I focused on ensuring smooth navigations and easy access to information, which facilitates users’ understanding and memory retention. To guide my design process, I employed various laws and principles of user interface design. The final design effectively engages users, promoting a deeper grasp of the educational content while supporting their ability to recall information.
Tesler’s Law
Fitts Law
Zeigarnik Effect
Miller’s Law
The Von Restorff Effect
Project Goal
The goal of this project was to create an engaging and user-friendly informational website prototype that effectively educates users on specific topics. By prioritizing intuitive navigation and clear content presentation, the aim was to enhance users’ understanding and retention of information. Ultimately, the project sought to empower users with the knowledge they need while providing a seamless and enjoyable experience.
Memorable
Intuitive
Understandable
Process
In this project, I developed a proposal outlining how I would apply various laws and principles of users interface design in my final project to create an intuitive informational website prototype. The proposal details my plan to to enhance user experience by strategically incorporating design principles that improve navigation and information retention. By leveraging these principles, I aim to create a cohesive design that effectively engages users and supports their educational journey, ensuring that the final prototype is both functional and user-friendly.
Project Proposal
User Interface Principles
The Serial Position Effect is a psychological principle stating that people are more likely to remember the first and last items in a list than the middle items. In considering the Serial Position Effect, I've included the most information about my website's purpose on the first page, matcha, and I've included a list of the most popular matcha brands that I recommend to my users on the last page. Also on the last page, I have included the current sale or promotion the website is running.
Serial Position Effect
Current sales at the top
Sale Promotion at the top allows viewers to remember the first thing they see.
Zeigarnik Effect
The Zeigarnik Effect is a psychological principle stating that people are more likely to recall unfinished or interrupted tasks than completed ones. Considering this principle, I included progress bars at the bottom of each screen in my final project for each recipe step. As a result, the users can keep track of how many steps there are, which ones they have completed, and how many steps remain.
Recipe Steps
By limiting my recipe to 5 steps, I ensure that users will not become overwhelmed and that they will retain the information more effectively.
Miller’s Law
Miller's Law is a psychological principle that states that the average person has the capacity to hold seven, plus or minus two, items in their working memory. To take advantage of this principle, I limited my recipe steps to 5 steps to ensure that the users are not overwhelmed and can retain the information more efficiently.
Progress bar
Progress bar helps keep track of how many steps they have completed and those remaining.
Final Prototype
In my final project, I developed an informational website that teaches users about Matcha and how to grow their interest in it. My prototype consisted of three parts; Benefits, Recipes, and Products. On the benefit page, you can find a list of matcha's benefits as well as a comparison chart of matcha with coffee. On the recipe page, you will find a step-by-step recipe to prepare iced matcha lattes. On the product page, you will find 6 of the best matcha recommendations.
Takeaways
With the completion of this project, I realized that interface design involves more than just aesthetics. To ensure that I am designing interfaces that manage the amount of cognitive load on a user, it is imperative for me as a designer to understand how the mind and memory function. I should always consider how easy it is for users to find the information they are looking for and how the interface will help them remember it. Additionally, I should consider the user experience and ensure that the interface is intuitive and effective. To sum up, focusing on the user experience and cognitive load when designing interfaces is essential to ensure usability.