casual collections
Solo User Interface Designer
ROLE
Project Proposal & Prototype
DELIVERABLES
TIMELINE
2 Months
Figma
TOOLS
OVERVIEW
I was given a task to create an app/website to teach users something new. I decided to create casual collections: a web app prototype that teaches users about Pokémon cards, specifically about basic and advanced rarity types. I created my prototype taking many different laws and principles of user interface design into consideration, carefully constructing my design around them in order to produce an efficient and simple interface where users can learn something new with ease.
GOALS
My goals for this project were to mainly create a smooth, easy-to-navigate interface that helps users learn something new. I wanted my tutorial to be intuitive and simple and not to overwhelm users. I also wanted to seamlessly incorporate as many design laws and principles as I could to create the most efficient and palpable experience for users. I wanted to focus on my design being:
This project had a few different steps:
Before jumping into the project, I wrote a project proposal that described which design laws I was planning to use in my project, what they mean, and how I wanted to implement them.
Then, I created my project based on the various design laws and concepts. I presented my prototype and got sufficient feedback from the instructor and classmates.
Based on the critiques I received, I revised my project add made changes that better conveyed the design laws I wanted to represent.
PROCESS
Jakob’s Law says that users prefer websites to work the same way as websites they are already familiar with and know well. Because of this, I made sure my design follows common user interface conventions to match the users’ schema, or their prior knowledge of websites; the navigation bar is at the top and the home button will be in the top left corner like most conventional websites.
USER INTERFACE PRINCIPLES
Jakob’s Law
Miller’s Law states that the average person can only remember seven (+/-2) items in their short term (working) memory at a time. In accordance with this law, I made sure to keep my website concise by only including five pages explaining basic card rarities and five pages explaining advanced card rarities.
Miller’s Law
The Zeigarnik Effect states that people often tend to remember tasks that are incomplete better than tasks that have been completed. I included a progress bar at the bottom of every page to help the users know where they are in the informational gallery and how close to the beginning and end they are.
Zeigarnik Effect
The Spatial Contiguity Principle explains that people learn best when text and relating visuals are integrated, or close together physically. I made sure my project adheres to this principle by inserting text/directions in my graphics very close to the related visual. I also used short lines to connect the text to the specific parts of the visuals to make sure users can see that they are connected.
Spacial Contiguity Principle
FINAL PROTOTYPE
For my final project, I created an informational gallery teaching users about different rarities of Pokemon cards. I split my project into two sections: basic and advanced rarities.
LEARNINGS + REFLECTION
This project taught me an immense amount about user interface design as well as common design laws and concepts. Learning, understanding, and applying 20+ design concepts to a project was difficult, but I believe it strengthened my design skills and gave me a deeper understanding of how psychology is integrated into UX.
Key learnings:
Consistency of text sizes throughout a design is critical
Adhering to design principles correctly is more important than aesthetics
A main goal should always be to help reduce the user’s intrinsic cognitive load