Project info
Duration: 3hrs +/- per element
Client: Passion Project *Special thanks to Daily UI Challenge for element ideas.
Role: Visual / UI Designer
Mediums: Figma, Procreate, Photoshop
To understand the user-centered reasons behind crucial UI elements in product design, I decided to study each in pocket-sized pieces. I have grouped handfuls of elements together with similar branding I had previously developed to lessen branding work. I will add these pocket-sized studies as I complete them – stay tuned!
Research
For each UI element, I research best practices in existing designs, current trends and find what has proven to be tried-and-true… often looking for design patterns on Mobbin, Behance and Dribbble. I take my research and ideas to the iPad and list everything required, breakdown the hierarchy, and plan how many screens it will take to convey my design completely.
Wireframe Sketches
Each UI element begins as a wireframe sketch in Procreate as it allows for the layering I need to move/shift things around. Once I feel it’s ready enough to be refined, I use them as underlays in Figma, Sketch or Adobe XD.
Results & Lessons Learned
There are many principles one must apply in UI design besides color and typography. One also needs to address hierarchy, alignment, white space, proximity & grouping and to check for consistency across all elements.
In addition, I pay extra special attention to my layouts being responsive for multiple sized devices, and also ensure all designs are inclusive and address accessibility through color choices and mindful microcopy and UX writing. (I recommend taking all of Dr. Katharina Grimm’s UX writing courses on Skillshare if interested. They helped immensely.)
These quick pocket-sized UI element studies are insightful and would highly recommend trying it to sharpen design skills.
11 Flash Messages
Pocket-sized takeaway:
• Flash messages are useful in UX to help lessen the users confusion, and can offer immediate feedback to actions. There are varying levels of importance which could be classified as low, medium or high.
Low: badges, status, success – allows the user to move forward Medium: acknowledgements, warnings – allows the user to move forward with caution High: alert, exceptions, errors – allows the user to move forward once an action is taken
10 Social Share
Pocket-sized takeaway:
• As the user, they may want to share beyond the options given. Including a “more” option gives them this ability.
09 Music Player
Pocket-sized takeaway:
• The features in the “Now Playing” screen should be influenced by what the overall user experience of the app is geared towards. For example, if it is designed for sleep sounds, a timer might need to be present. If it is designed towards sharing tracks, social share might need to be prominent.
08 404 Page
Pocket-sized takeaway:
• Cut the navigation down to keep the user focused on getting back on track.
• Ending up on a 404 page is never pleasant, but could end up being a brand ambassador if it’s the first page they see. Keep the tone/voice on brand, and the copy clear, kind & simple.
07 Settings
Pocket-sized takeaway:
• Group similar items together for easy scrolling.
• Use clear titles and pair with an icon if it helps the user identify a setting quicker.
06 User Profile
Pocket-sized takeaway:
• The bottom tab bar should have no more than 5 destinations and it’s important to show which one is active.
• Using layout columns while designing is crucial for the alignment of many elements.
05 App Icon
Pocket-sized takeaway:
• App icon rules are different for iOS and Android.
• Avoid using text in app icons as it is usually rendered illegible.
04 Calculator
Pocket-sized takeaway:
• Micro copy is important for guiding the user when there are multiple fields/inputs.
03 Landing Page
Pocket-sized takeaway:
• Landing pages are different than homepages. The goal of a landing page is to convert users into customers.
• Cutting the navigation down will keep a user focused on conversion.
02 Credit Card Checkout
Pocket-sized takeaway:
• Keeping screen titles concise and clear of other elements lessens cognitive load.
• Having multiple payment options lessens the chance of a customer leaving the checkout flow.
01 Sign Up
Pocket-sized takeaway:
• Signup screens are different from login screens. Signup identifies you as a new user whereas login describes you as a returning user.
• Importance of retaining field labels even when information is entered.
Disclaimer: The thoughts shared in this blog are solely my own and do not represent the perspectives of my professional relationships or clientele.