Class Project
User Interface Design II
Molly Tea
A informational website designed to promote Molly Tea products as well as demonstrating user interface fundamentals.
Bringing Molly Teas Brand to the Screen
For this project, I designed an informational website prototype that teaches and promotes users about Molly Tea. By applying UI laws and principles throughout my process, I designed the website with smooth navigation and presentable information in mind. The result is a prototype that introduces visitors to what Molly Tea is and what they have to offer.
Overview
Methodology
Principle Driven Design
Duration
10 Weeks
Focus
Informational
Roles:
Interactions,
Prototyping, Lead Designer
Timeline:
May 2026 - October 2026
Tools:
Figma
Team:
Oscar Ding
Project Goals
"How do I design while considering 20 different principles, laws, and effects in mind."
The goal of this project was to practice and demonstrate my ability to apply core user interface fundamentals in order to promote a brand or product through a website prototype. I set out to design an interface that users could navigate effortlessly, present information in a clear and memorable way, and put the UI laws and principles I learned into a website.
Project Proposal
I started this project off with a project proposal that laid out which UI laws and principles I planned to use and how each one would guide my final design. The proposal was used to also described the content I wanted to include, the overall look and feel of the brand, and how each design choice would help visitors learn about the brand.
Create a roadmap in which I could fully lay out my understandings of user interface principles to later on execute within the project.
User Interface Principle (Miller's Law)
Miller's Law states that most people can only keep seven, plus or minus two, items in their working memory.
To take advantage of Miller's law, I kept my promotional overview page down to three items, jasmine tea, oolong tea, and gardenia tea, making it easier for a typical user to remember where they are and what comes next.
User Interface Principle (Multimedia Principle)
Multimedia Principle states that people learn more effectively when texts are integrated with visual elements rather than text alone. I applied the multimedia principle by pairing an image of each drink with its description so users can better understand what product is being promoted and what that product looks like.
User Interface Principle (Hick's Law)
Hick's Law states that the time users need to make a decision grows with the number and complexity of choices. Taking Hick's law into consideration, I decreased the number and complexity of choices on my tab navigation into jasmine tea, oolong tea, and gardenia tea so that users can better
Lessons Learned
Communication within a team environment is vital to having a coherence design. Working with different levels and mindsets of design work makes it hard to understand what you need to build and how that build should look.
I believe that we could have communicated better together to better understand what our app actually was. I also think we should have established how our app was going to look before we dove into actually making anything.
It took more time than it should have to go back and edit every text style and color style. If we established what things should have looked like before we made anything, it would have made designing a lot easier. Things being, what color cards are, what colors all buttons should be, what the corner radius of every curved component should be, etc.
Understanding spacing, placement, and size of different elements is instrumental to having a well looking and aesthetic design.
I still feel a bit uneasy about the spacing, placement, and sizing of buttons, interactable elements, and icons. I think that with more iterations, I would have shrunk everything down and create more whites pace to have a cleaner looking design.
Working faster and asking more questions is key to getting better iterations.
Getting comfortable with asking questions allows me to learn more about the context of the work required, the expectations of people like designers and stakeholders, and personal development. If I had to restart this project all over again, I would be asking 10 times the questions of my groupmates and professor.