Team
Individual
Role
UI Designer
Tools
Figma
Photoshop
Illustrator
Duration
2 months
Overview
In my User Interface II class, I created a website promoting Poppi, a healthy soda alternative, to demonstrate User Interface principles. Guided by key design laws, I focused on crafting an intuitive and engaging interface with smooth navigation, making it easy for users to explore and retain information. This project showcases my ability to design user-friendly experiences that effectively communicate key content.
Project Goals
My goals for this project were to design an interface with intuitive, seamless navigation, present content clearly for easy understanding and retention, and effectively apply the UI design laws and principles I learned throughout the semester.
Project Proposal
I presented a project proposal for a promotional website for Poppi, a healthy soda alternative. In the proposal, I outlined how I would apply key UI principles in the final design to create an intuitive and engaging user experience.
The link below is my final project proposal on each term.
User Interface Principles
Miller’s Law
Miller’s Law is a principle that a person can only obtain about 7, plus or minus 2 items, in their working memory at once. Taking Miller’s Law into consideration, I have decided to have up to 5 different flavor options only verse the 12 poppi has.
Fitts’s Law
Fitts’s Law states that the time required to move to and select a target is a function of the distance and size of the target. Taking advantage of Fitts’s Law, I wanted to create buttons that are big enough for the user to click on and not need to be precise.
Multimedia Principle
The Multimedia Principle states that people learn better through text and images than words alone. I applied this principle by incorporating images and text of flavors/ingredients found in each Poppi can and having an arrow and text pointing to the can.
Jakob’s Law
Jakob’s Law states users prefer sites that are like other sites they already know. Adhering to Jakob’s Law, I wanted to have the navigation bar on the right side of the page while the logo is on the left. Also, I added a landing page that is more like other e-commerce sites, with schema markup applied to enhance data organization and improve search engine understanding.
The Serial Position Effect
The Serial Position Effect refers to the tendency for users to remember the first and last elements in a sequence. Taking advantage of the Serial Position Effect, I made sure the first page and the last page of the website had information that is memorable. The navigation bar will aid users in memorizing the information or tabs on the website efficiently, which facilitates retention for long-term memory.
Prototype
For my final prototype, I designed a promotional website for Poppi with a balanced approach to its vibrant colors, aiming to enhance rather than overwhelm the viewer. My goal was to apply UI principles thoughtfully, starting with a concise "About" section on the homepage. The design allows the user to navigate through the site in a logical order starting with introducing flavors, followed by the health benefits of key ingredients, and finishing with locations to buy Poppi. This structure ensures a clear, engaging experience for users.
Reflection
Throughout this project, I learned that designing a website or app goes far beyond aesthetics; it’s about guiding users seamlessly through the interface and ensuring functionality. User Interface principles play a crucial role in understanding how users interact with designs and how the human brain processes visuals. I’m excited to carry the lessons I’ve gained into future projects as I tackle more complex interface designs.