Leo Vogel — Design Blog

Textbar: Ben Franklin's Virtues

2018-04-01T00:00:00Z

"In 1726, at the age of 20, Benjamin Franklin created a system to develop his character."

This system was his 13 Virtues; which he practiced throughout his life. I have found that putting this information in OmniFocus feels like task manager clutter as I'm not really acting on the information, it's more of a reminder to myself. I decided I wanted a way of simply seeing the current week's virtue at all times, regardless of what I'm doing on my Mac, along with the virtue's full explanation.

I came up with this script using the app TextBar to put the text in the Mac menubar:

set currentWeek to do shell script "date +%V"

if currentWeek is in {"01", "14", "27", "40"} then
	return "TEMPERANCE
	Eat not to dullness;
	drink not to elevation."
end if

if currentWeek is in {"02", "15", "28", "41"} then
	return "SILENCE
	Speak not but what may
	benefit others or yourself;
	avoid trifling conversation."
end if

if currentWeek is in {"03", "16", "29", "42"} then
	return "HUMILITY
	Imitate Jesus and Socrates."
end if

if currentWeek is in {"04", "17", "30", "43"} then
	return "RESOLUTION
	Resolve to perform what you ought;
	perform without fail what you resolve."
end if

if currentWeek is in {"05", "18", "31", "44"} then
	return "FRUGALITY
	Make no expense but to do good
	to others or yourself;
	i.e., waste nothing."
end if

if currentWeek is in {"06", "19", "32", "45"} then
	return "INDUSTRY
	Lose no time;
	be always employ’d in something useful;
	cut off all unnecessary actions."
end if

if currentWeek is in {"07", "20", "33", "46"} then
	return "SINCERITY
	Use no hurtful deceit;
	think innocently and justly,
	and, if you speak,
	speak accordingly."
end if

if currentWeek is in {"08", "21", "34", "47"} then
	return "JUSTICE
	Wrong none by doing injuries,
	or omitting the benefits that are your duty."
end if

if currentWeek is in {"09", "22", "35", "48"} then
	return "MODERATION
	Avoid extreams;
	forbear resenting injuries so much as you think they deserve."
end if

if currentWeek is in {"10", "23", "36", "49"} then
	return "CLEANLINESS
	Tolerate no uncleanliness in body,
	clothes, or habitation."
end if

if currentWeek is in {"11", "24", "37", "50"} then
	return "TRANQUILLITY
	Be not disturbed at trifles,
	or at accidents common
	or unavoidable."
end if

if currentWeek is in {"12", "25", "38", "51"} then
	return "ORDER
	Let all your things have their places;
	let each part of your business have its time."
end if

if currentWeek is in {"13", "26", "39", "52"} then
	return "CHASTITY
	Rarely use venery but for health or offspring,
	never to dulness,
	weakness,
	or the injury of your own
	or another’s peace or reputation."
end if
set currentWeek to do shell script "date +%V"

if currentWeek is in {"01", "14", "27", "40"} then
	return "TEMPERANCE
	Eat not to dullness;
	drink not to elevation."
end if

if currentWeek is in {"02", "15", "28", "41"} then
	return "SILENCE
	Speak not but what may
	benefit others or yourself;
	avoid trifling conversation."
end if

if currentWeek is in {"03", "16", "29", "42"} then
	return "HUMILITY
	Imitate Jesus and Socrates."
end if

if currentWeek is in {"04", "17", "30", "43"} then
	return "RESOLUTION
	Resolve to perform what you ought;
	perform without fail what you resolve."
end if

if currentWeek is in {"05", "18", "31", "44"} then
	return "FRUGALITY
	Make no expense but to do good
	to others or yourself;
	i.e., waste nothing."
end if

if currentWeek is in {"06", "19", "32", "45"} then
	return "INDUSTRY
	Lose no time;
	be always employ’d in something useful;
	cut off all unnecessary actions."
end if

if currentWeek is in {"07", "20", "33", "46"} then
	return "SINCERITY
	Use no hurtful deceit;
	think innocently and justly,
	and, if you speak,
	speak accordingly."
end if

if currentWeek is in {"08", "21", "34", "47"} then
	return "JUSTICE
	Wrong none by doing injuries,
	or omitting the benefits that are your duty."
end if

if currentWeek is in {"09", "22", "35", "48"} then
	return "MODERATION
	Avoid extreams;
	forbear resenting injuries so much as you think they deserve."
end if

if currentWeek is in {"10", "23", "36", "49"} then
	return "CLEANLINESS
	Tolerate no uncleanliness in body,
	clothes, or habitation."
end if

if currentWeek is in {"11", "24", "37", "50"} then
	return "TRANQUILLITY
	Be not disturbed at trifles,
	or at accidents common
	or unavoidable."
end if

if currentWeek is in {"12", "25", "38", "51"} then
	return "ORDER
	Let all your things have their places;
	let each part of your business have its time."
end if

if currentWeek is in {"13", "26", "39", "52"} then
	return "CHASTITY
	Rarely use venery but for health or offspring,
	never to dulness,
	weakness,
	or the injury of your own
	or another’s peace or reputation."
end if

Save the script as a file named Ben.scpt in a folder named "scripts" in your home folder, then set the script to osascript $HOME/scripts/Ben.scpt; I also set the refresh interval to 10000 so it's not constantly running the script unnecessarily.

Enjoy!

6 Mac Tools for UI Designers

2019-10-27T00:00:00Z

Work smarter, not harder. With all of the decisions we need to make as designers, it's helpful to find ways of streamlining our workflows so we can think more about the work itself.

All of the below apps have great keyboard shortcut support for power users.

🤩 Check out the bonus tip at the end to learn how to get all of these apps, an $83 value, plus 150 more paid apps, for less than $10 per month.

PixelSnap ($25)

The fastest tool for measuring anything on your screen

Has integration with Sketch and Adobe XD!

Get Here

Cleanshot ($19)

Users of Skitch rejoice! If you've been looking for a simple yet powerful screenshot tool to replace Skitch, this is your answer.

Capture your screen in a superior way!

Integrates with PixelSnap above.

Get Here

Sip ($10)

I use this countless times every day to grab the colour of anything visible on my screen.

A better way to collect, organize & share your colors.

Get Here

Noizio ($9)

I find lyrical music too distracting for tasks with a heavy cognitive load.

Ambient sounds app to set the right mood

To get your AirPods connected in lightning speed setup a keyboard shortcut using ToothFairy ($5).

Get Here

Paste ($15)

Once you've used a clipboard manager you'll never go back. Directly displays colours grabbed using Sip. Paste feels like part of macOS — any Mac I use feels broken without it.

The new way to copy and paste on Mac and iOS

Get Here

🤩 BONUS TIPS 🤩

All of the above apps, and 150 more paid apps, are available through a SetApp subscription for only $9.99/month.

If you find your menubar filling up from all of your fancy new tools, use Bartender ($15) to clean up that visual noise; it's also available through a SetApp subscription.

Improved Task Flows for Avid Kindle eBook Readers

2021-05-03T00:00:00Z

Udacity Course Project

View Prototype ↗ · Download In-Depth Case Study ↗

Industry Recognized Case Study

★ Featured in the Sidebar newsletter (40,000 readers) on May 5, 2021.

★ Read over 600 times on Medium, published on the Bootcamp blog.

Overview

Avid readers need features to support their large libraries and reading habits. These users want a single library for all of their ebooks (including audiobooks). By providing an easy and exceptional e-reading experience, users will be loyal to Amazon Kindle. However, there are several areas of frustration — particularly with large ebook libraries — that are pushing avid readers to other platforms.

Problem

Users with large libraries containing hundreds to thousands of books need features that help them more easily browse and sort their ebook libraries, so they can better plan reading time and have a better awareness of what is currently in their collection.

Three Major Pain Points

Browsing — finding books in large, unorganized libraries
Reading 2+ books in parallel — no native support for switching between active books by mood
Downloading — no way to auto-download all ebooks for offline reading

Research

Findings

5 user interviews
21 academic articles reviewed

Avid readers who actively switch between 2–4 books depending on mood have hundreds or thousands of books and get frustrated when they can't find a book or remember why they added it to their library. They want to spend their time reading, not sorting books into folders. Readers also have genre-specific needs and preferences that are not being met.

Personas

Travis the Student Traveler

"Fiction is my leisure reading. Nonfiction, I have to be in the headspace for it."

Travis wants to easily switch between his class textbook, science fiction novel, travel guide, and self-improvement book depending on his current activity and the time of the school year. He likes to be surprised when a fictional book ends — so doesn't want to know the page count — but needs powerful annotation, memory, and navigational tools for his textbooks, and wants to know how much time a chapter will take to read.

Natasha the Mystery Sleuth

"A lot of the time, as I have so many books, I forget exactly what it might be called. So I have to go line by line to find the book that I want."

Natasha wants to read more of the books in her existing library, keep track of the ones she's read, and discuss books she and her husband are reading together. She also wants to easily switch from a fantasy novel to a historical memoir depending on how tired she is.

Ideation

How Might We improve the offline reading experience for avid readers with large quantities of books — within the library and within the book — to address the unique needs of different genres so that users can read more books with better recall?

Vision

Primary Goals for Design Phase

Add support for readers who switch between several active books depending on mood throughout the day and week.
Redesign library view to support easier find-ability through sorting, filtering, and additional book metadata.
Add support for automatically downloading existing and new user content.

Secondary Goals for Design Phase

Explore a spine-based progress and contents UI to improve memory of book chronology and in-book navigation.
Add support for controlling book and chapter progress indicators at genre and book levels.

User Stories

As an avid reader I want to switch between multiple active books so that I can read whichever genre I'm currently in the mood for.
As a traveling reader I want to automatically download all of my books so that I can read any book when on an airplane without thinking about which to download ahead of time.
As an avid reader with a large library I want better sorting and filtering options so that I can more easily and quickly find books.

Design

Task Flows

Paper Sketches

Annotated concepts from the idea generation stage. (View Miro Board ↗ for detailed view.)

Low-Fidelity Wireframes

Home is redesigned to put more focus on the user's books and reading goals. Book suggestions and active books — now in the Bookshelf — are placed in the lower, easier-to-tap area. IA is improved to make actions easier to find.

Library is updated with automatic genre categories, additional user filtering and sorting options, and quick actions for each book. It is also easier to quickly switch view modes.

In-Book navigation is updated to include the book cover and quick access to the Bookshelf. Navigation items have been moved to the bottom for easier tapping on modern, tall-screen devices. Additional Book Settings are available for progress.

High-Fidelity Wireframes

Testing & Validation

Moderated remote usability tests were conducted with 5 participants on a clickable low-fidelity prototype.

Final Solution

Problem 1: Browsing Large Libraries

Redesigned library view to support easier find-ability by automatically categorizing books, increasing sorting and filtering options, and adding book blurb and time-to-read metadata to book list view.

Automatic Organization
Amazon's existing book metadata is used to automatically organize purchases and user content into standardized categories.

Improved Filtering
Additional filter and sort options have been added — including opening a random book.

Book Blurb Added
A description helps remind users what the book is about.

Time-to-Read Added
Time-to-Read is calculated based on each user's past reading speed.

Problem 2: Reading 2+ Books in Parallel

Improves flow for users reading multiple books in parallel through the introduction of a new concept: the Bookshelf, which replaces the Kindle's current single active book.

Users are able to switch between active books and plan their next reads in the Bookshelf by creating queues — ordered lists of books around any theme or topic the user wants.

The existing recently read/opened collection on the home screen becomes a smart queue always shown first in the Bookshelf; this smart collection contains books not added to a queue manually.

Problem 3: Downloading Large Libraries

Readers want access to all of their books in offline areas such as airplanes. The existing app offers the option to auto-download only audio books. This can be solved by adding an additional control to automatically download all ebooks.

Final Prototype

View in Figma ↗

Takeaways

Academic papers are a great source of knowledge — including learning about potential problem areas — when exploring new industries for design projects.
Figma is a superior tool compared to Sketch for prototyping, collaboration, and developer inspection, making it my preferred design tool going forward.

Next Steps

The next step in this project would be usability testing on the high-fidelity prototype.

In the ideation phase, many additional solutions to user needs were generated beyond the 3 main areas focused on here. The ones chosen were low complexity and high value — solutions that could be implemented quickly with significant UX improvement. There is a lot of untapped potential in the Kindle app worth exploring further.

2022 in Review

2022-12-30T00:00:00Z

2022 is coming to a close! What an incredible, amazing year—one of the best years of my life...possibly the best! A year in which I reinvented almost my whole life every 3 months as I travelled around the USA and Europe as a digital nomad.

The year of 2022 in numbers:

🌎 7 countries
🌆 18 cities
✈️ 14 flights
📏 11,000+ miles / 17,700+ kms travelled
🎤 21 concerts
🥾 3 Via Ferrata hiked
🎮 3 videogames finished
📘 7 books read
🥰 endless memories

I celebrated my 32nd birthday by attending Eurovision in Italy.

As planned in my annual review last year, I achieved many long term goals including getting LASIK, ordering custom in ear monitors, learned my blood type, became a digital nomad, and met a centenarian. I also spent time visiting friends and family across USA and Europe. And I renewed my passport and received global entry.

Thank you to all of my friends and family for making this year so memorable and fulfilling.

Goodbye 2022. I already have my overall theme set for 2023 and most of my locations where I'll be living sketched out. The year ahead is going to be a wild ride. I'm excited for all of the memories and adventures to come, especially jumping off a dam and hiking along the side of a cliff with nothing but air below me.

You only live one life, don't waste it. Love, laugh, read, and explore. Be kind to yourself. Be kind to others. Memento mori.

See you on the iron paths,

Leo 🇺🇳

Gear 2022

2023-02-10T00:00:00Z

👉 Check out ALL of the gear I travel with here!

This post is inspired by Tynan's gear posts. Below are the gear additions I've made for this year. Links to purchase each item are included; in full transparency, many links are referral links.

Tech

Chipolo Keyring Item Tracker

Replaces an AirTag on my keychain which now lives inside my check bag.

Buy at Amazon

Chipolo Wallet Item Finder (x2)

One for tracking my passport, one for tracking my wallet.

Buy at Chipolo

Switch Joycon Grip

This replaces the 8bitdo Pro 2 controller I had been using before. I found that the very little time I spend playing pancake games didn't justify the weight and space of the Pro 2. So I'm now using my two Switch joycons with this for PC gaming. This extra pair of joycons can also be used for two player or four player Switch games like Mario Party.

Buy at Amazon

USB Charger for AA and AAA Batteries

This is the lightest and smallest AA and AAA battery charger. Works great. Wish it was USB C but I have USB A ports on some of my wall chargers including the MiniX so I've compromised on USB A over C here for weight and space gain.

Buy at Amazon

140W PD 3.1 USB-C Charger With Adapters

This replaces the official Apple charger. It is lighter, smaller, and includes three ports. This comes with international adapters which are more secure in wall sockets than using a generic adapter.

Buy at Hyper

MiniX 66W 3-Port Charger

Compact GaN charger that comes with international adapters. This stays in walls more securely than a USA charger with a generic wall socket adapter.

Buy at Amazon

CR2032 Rechargeable Batteries and Charger

Many of the smaller electronics I have use CR2032 batteries. This lets me recharge them all using the above MiniX charger.

Buy at Amazon and Amazon

Nebula Capsule 3 Projector

Replaces my previous projector. This is the smallest and lightest true 1080 projector on the market. Charges via USB C and has an HDMI port which I use for playing Switch and PC games. My only complaint is that they don't offer a version with no built in battery. So much of the weight of this is for battery which I don't need as I always use it at home.

Buy at Amazon

Projector Lens Protector

This is actually a smartwatch screen protector but I've repurposed it as a projector lens protector. I wrap my projector in my changing towel (mentioned lower in this post) when moving to a new destination. Using this lens protector and towel system I can eliminate the need for a case.

I have found that device-specific cases only used for moving to a new destination add weight and space that are best saved for items I will use at the destination itself. Device cases just sit in my luggage.

Buy at Amazon

MacBook Tre

Replicates the keyboard and trackpad configuration of a MacBook using a magic keyboard and magic trackpad. This is for using with the Roost v3 laptop stand for better ergonomics.

Buy at Etsy

ZAGG Pro Stylus

Lost my Apple Pencil (I have since found it after writing this blog post; but it's good to have a backup). This was a cheaper replacement. It charges via a built in USB C port; unfortunately it doesn't charge with the magnetic charging the official Apple Pencil supports. If Apple Pencil came in black I would have paid for the first party product again.

Buy at Amazon

Kindle Screen Cover

This replaced a case I had been using. I switched to this to reduce weight in my bags but it also makes for a more pleasant reading experience.

Buy at Amazon

Alarm Clock

Needed for reliably waking up. I don't trust my phone; especially for early flights. This was the smallest and lightest travel alarm clock I could find. Powered by CR2032 batteries.

Buy at Amazon

Bathroom

FlatPak Toiletry Bottle

Using one of these to carry sunscreen. These take up much less space (and likely weigh less) than the container sunscreen comes in. They're easy to refill too.

Buy at Amazon

FlatPak Soap Bar Case

Was originally intending to use this to carry solid soap in use. This was initially the use but in Lisbon I found some solid shampoo in the grocery store to try. The solid shampoo now lives inside this case with the soap. This is made of some kind of black magic as when it lets out water without getting everything else wet and doesn't cause the contents to smell.

Buy at Amazon

Toothbrush Cap

See title 😅

Buy at Matador

Refillable Toothpaste Tubes

Rather than throwing away unused toothpaste I can take it with me using these refillable tubes. The smaller one is great for taking on side trips.

Buy at Matador

Water Flosser

I've never liked traditional flossing. This has been much easier, faster, and more comfortable. I still use traditional floss but it's less needed with this. Charges via USB C.

Buy at Amazon

Travel Razor

This gives me razor redundancy as a backup for my main razor. It plugs into my iPhone battery bank. It doesn't charge on its own and must be plugged into a power source when in use. This is great for weekend side trips where my full razor is too much weight and space if I just want to travel with my shoulder sling bag.

Buy at Amazon

Fulton and Roark Soap

Decided not to bring much of this with me as it was too much weight. Love the scent. If I can cut weight in other items I will consider bringing more of this with me. Not thrilled with solid soap in use though. I want to try finding a solution to this. Please reach out if you have any suggestions.

Buy at Fulton and Roark

Fulton and Roark Deodorant

Same scent as the soap. My intention was to have a consistent scent across toiletries but this so far has proven more impractical than I expected. This deodorant container is metal and far too heavy than necessary. I need to research alternatives.

Buy at Fulton and Roark

Fulton and Roark Solid Cologne

Replaced my liquid cologne with this to reduce weight. The container is also far too heavy for nomad travel. I'll be researching alternatives. Ideally Fulton and Roark would offer a lighter container for the deodorant and cologne. Or maybe someone will create 3D printer containers.

Buy at Fulton and Roark

Kitchen

Trader Joe's Sponges

Some airbnb sponges are less clean than would be preferred. One Airbnb I couldn't find the sponge. Hotels don't have sponges. So these are great to travel with as a single pack contains 12. They come compressed flat, and expand when first used.

Buy at Amazon

Humangear Utensils

Replaces my heavier metal utensils. I've used my own utensils regularly during my travel and will never travel long term without my own utensils now. Not fully happy with these though. I will be exploring other options. I'd like to travel with more than just one of each.

Buy at Amazon

Aeropress Metal Coffee Filters

My old metal mesh filter had gotten too discolored. This included three different size hole filters which I hoped might be good for getting better flavour coffee. Need to experiment more with the different filters and pre-ground coffee as I don't travel with a coffee grinder (if you know of a light and high quality grinder please reach out).

Buy at Amazon

Flat Pasta Strainer

Ravioli is a quick and easy meal to make at home. Not all of my AirBnBs have had a pasta strainer. This packs light and takes up no space in my bag as it's flat. This was a great purchase.

Buy at Amazon

Collapsible Measuring Cups

I'm used to US measuring cup sizes. These include both US and European sizing. Many airbnb are setup for short term travelers who aren't doing much cooking. I tried making a dish from scratch in Milan and wished I had these with me. Problem solved.

Buy at Amazon

Nanobag Shopping Bag

Motivated by one of my gear principles (sustainable) I purchased FOUR of these bags and have loved using them so far. They pack down to the size of AirPods Pro. I can take all four of them with me in my jacket pockets and they're almost unnoticeable.

Buy at Nanobag.net

Clothes

Rip Curl Global Entry Walk Shorts

This is my second pair. These are incredibly versatile. Work as a swimsuit and as shorts. Many pockets for good EDC organization and carrying various items when going out for short trips when I don't want to take my backpack or shoulder sling.

Buy at Amazon

Arcade Ranger Belt Midnighter

More adjustable than my previous belt. This also has a style that works better for casual wear. My previous belt looked too formal for casual occasions.

Buy at Amazon

Outdoor Research Rain Jacket

Purchased for Portugal as it was supposed to be rainy here. Haven't used it once since. Wish I had this in Italy last year. Purchased yellow as I liked the look of the yellow rain jacket in Dark and it makes it easy to differentiate from my main black jacket.

Buy at Amazon

Unbound Merino Long Sleeve Shirts (x2)

Converting all of my nomad clothing to merino wool for its versatility and warmth to weight ratio.

Buy at Unbound Merino

Unbound Merino Socks (x5)

Converting all of my nomad clothing to merino wool for its versatility and warmth to weight ratio.

Buy at Unbound Merino

Merino Wool V-Neck T-Shirt (x3)

Converting all of my nomad clothing to merino wool for its versatility and warmth to weight ratio.

Buy at Unbound Merino

Health

Ear Wax Removal Camera Tool

Useful for medical diagnosis to check potential symptoms but primarily used as a safe earwax removal method. I use IEMs and AirPods Pro regularly which combined with genetics results in earwax buildup that I've discovered needs to be cleaned every few months.

Buy at Amazon

Pocket CPR Masks

Replaces my bulky mask which I never carried with me. Now I have one of these in each of my bags. You never know when you might need to save someone's life.

Buy at Amazon

Wellue BP2A Bluetooth Blood Pressure Monitor

Part of my suite of medical tracking/analysis devices to measure health and diagnose potential problems.

Buy at Amazon

Kinsa Quickcare Smart Bluetooth Thermometer

My old Kinsa thermometer (which worked through plugging it in with the headphone to lighting adapter) stopped working. This is powered by a CR2032 battery which I've replaced with a rechargeable one. I hope Apple Watch adds a body temp sensor so I can get rid of this.

Buy at Amazon

Fitness

Beast18 Ultralight Technical Backpack

My Matador packable daypack is great for walking around but for an adventurous hike I wanted something with more pockets, structure, and functionality. I haven't had a chance to use this yet on a hike but it packs very flat and should hold all of my Via Ferrata gear plus any additional hiking gear, food, and water. Excited to use this in Switzerland.

Buy at Matador

Flatpak Dry Bag

When out on boats and kayaks there are items you want to bring with you for shore excursions or to have with you for an onward journey. This keeps those dry.

Buy at Matador

Packable Towel Poncho

When I visited Kravice Waterfalls in Bosnia there was a single changing station easily accessible. I decided then that I needed a way to change in and out of a bathing suit without waiting in a line for a changing station. This achieves that while also doubling as a towel.

Buy at Matador

Swim Goggles

For water activities. Planning to buy an advanced snorkel system to pair with this.

Buy at Amazon

Water Shoes

Haven't used these yet but I was very unhappy with the water shoes being sold at tourist shops in Dubrovnik so I picked these up which pack down very small and hopefully perform better.

Buy at Amazon

Loop Resistance Bands

I've been using these with FitBod and bodyweight to get back into a workout routine.

Buy at Amazon

Bike Helmet

Purchase white or yellow as they're the safest based on research studies.

Buy at Amazon

Climbing

PETZL Sitta Harness

Climbing harness that is ridiculously lightweight and compact. Compresses down into a bag about the size of a small water bottle. I don't plan on doing much, if any, rock climbing — this is for hiking Via Ferrata trails.

Buy at Amazon

Via Ferrata Kit

Safety system for climbing Via Ferrata trails.

Buy at Amazon

PETZL Tandem Speed Pulley

For zip lines on Via Ferrata.

Buy at Amazon

Screwgate Carabiner

Backup.

Buy at Amazon

Nylon Sling Runner 48"

Used as a resting system or as a backup safety system.

Buy at Amazon

Nylon Sling Runner 24"

Used as a resting system or as a backup safety system.

Buy at Amazon

PETZL EASHOOK Open Carabiner

Combined with the sling runner to make a resting system.

Buy at Amazon

Other

Elephant Card

Mount your iPhone to your MacBook to use macOS Ventura's Continuity Camera feature which turns your iPhone's superior camera system into a webcam for a Mac.

Buy at Amazon

Vapur Water Bottles

I now have four of these. One for taking outside and using at airports. Three are for using at home as an easy way to portion out daily water; with the goal being to drink all three bottles per day to consume the daily recommended water intake.

Buy at Amazon

Flashlight

For safety, self defense, sanitizing door handles, and checking for unwanted sheet stains.

Buy at Amazon

Sleeping Bag Liner

For when I find unclean sheets using the blacklight feature of the above flashlight.

Buy at Amazon

Laundry Sheets

Great for laundry on the go without the weight of liquid detergent. I've found that for cold washes I need to mix this up with a small amount of hot water before putting it in with the clothes.

Buy at Amazon

Mini Thank You Cards

To leave a thank you to airbnb hosts at the end of each stay.

Buy at Amazon

Flight Flap

I use this at home as a table stand for reading my Kindle while eating a meal. When traveling it can be placed on the seatback table or in the folded up seatback table to mount my Kindle, Nintendo Switch, or iPad mini on back of the seat in front of me for watching/reading. Super lightweight. Takes up no space. EVERY traveller should have one of these for their phone or tablet.

Buy at Amazon

Ivy League Insights for UX Design

2023-09-12T00:00:00Z

As a UX designer with eight years of professional experience, I've always been on the lookout for opportunities to expand my horizons and enhance my skills. So, when I had the chance to drop into classes at an Ivy League university for two days, I knew it was an opportunity I couldn't pass up.

🚙 A Surprise Stop

When I was driving a friend to visit their brother they surprised me with a detour to an Ivy League university. We explored the campus including a unique museum that was open to the public.

As the day unfolded, we couldn't help but be captivated by the academic atmosphere surrounding us. The vibrant energy of the campus was infectious, and we couldn't resist the idea of sitting in on a class. After discovering that it was possible to do just that we quickly put together a schedule for a full day of classes on campus the following day. The prospect of attending classes in science, philosophy, politics, and psychology at one of the world's most prestigious institutions filled us with excitement.

👨‍🎓 Becoming Students Again

The next day we entered the world of academia as students once more. The experience was nothing short of exhilarating. We found ourselves in lecture halls filled with eager minds, soaking in knowledge, and engaging in thought-provoking discussions. We participated in class discussions and took notes during lectures.

The classes we attended were as diverse as they were intellectually stimulating. From unraveling the controversies of modern astronomy to delving into the mechanics of the human eye's perception of light and color (including an examination of color blindness highly applicable to accessibility considerations), our day was a whirlwind of intellectual exploration. We were challenged, inspired, and invigorated by the professors and fellow students.

🙋‍♂️ Asking Questions Earns Points

One of the most intriguing revelations from my Ivy League experience was the fact that students could earn points for asking questions in addition to answering them on quizzes. This stood in stark contrast to my previous experiences at state universities, where points were primarily awarded for providing correct answers. The emphasis on question-asking underscored the importance of curiosity and active participation in the learning process — qualities that align with the user-centric approach in UX design.

In UX, we often stress the significance of asking the right questions to understand users' needs better. My Ivy League encounter reinforced the idea that fostering a culture of inquiry and feedback can lead to more innovative and user-friendly designs.

🌟 A Higher Standard of Knowledge

The professors and students I encountered at the Ivy League university were undeniably at a different level of intellectual prowess. Their expansive vocabularies and the breadth of their knowledge were awe-inspiring. What struck me was the interconnectedness of their expertise across various subjects. Examples and concepts from one class seamlessly wove into discussions in another — a testament to the value of interdisciplinary thinking.

In the world of UX design, understanding diverse perspectives and domains is invaluable. My Ivy League experience underscored the importance of drawing inspiration from different disciplines to create more holistic and innovative user experiences.

🌈 Color Perception

In a class discussing sensory illusions we reviewed that color is not an inherent property of objects but rather a reflectance property. We perceive color using three types of cone cells in our eyes, and each person has a unique arrangement of approximately the same number of each cone type. Some people are lacking one of these three cones which causes color blindness: the inability to distinguish between certain colors.

It is important in UX to understand how humans perceive the world so that we can design experiences for people with diverse sensory abilities. By learning about the science and psychology of perception, UX designers gain invaluable insights into the nuances of human cognition, enabling us to create interfaces and interactions that are universally accessible.

🚧 Challenging Social Norms & Breaking Down Barriers

One of the most valuable lessons you can take away from my experience is the importance of breaking down barriers, particularly when it comes to seeking opportunities.

Before class, I approached the professor and honestly explained my situation. I expressed my genuine interest in sitting in on their class and asked for permission to do so. The professor responded very positively and welcomed me to sit in on her lecture.

Often, we hesitate to ask for permission because we fear rejection, especially when the request seems to go against established social norms. However, by not taking that leap of faith and asking, we inadvertently hold ourselves back from potential growth and transformative experiences.

It's easy to feel like we don't belong in spaces like prestigious and well-respected institutions. While the registered students were investing considerable resources in pursuit of a degree from a top school, my friend and I were driven by a different objective — our thirst for knowledge and intellectual expansion.

In the world of UX design and beyond, it's crucial to remember that seeking permission isn't a sign of weakness; it's a demonstration of initiative and a commitment to personal and professional development. So, whether it's requesting to join a class, proposing a new idea at work, or venturing into uncharted territories in your career, don't let fear hold you back. By asking for permission and pursuing opportunities, you unlock the doors to growth, learning, and personal enrichment that can ultimately shape your journey in remarkable ways.

🦾 Embrace the Unexpected

My unexpected detour to an Ivy League university reminded me that life is full of surprises, and each experience, no matter how unplanned, can be a source of inspiration. As I continue my journey as a UX designer, I carry with me the lessons learned during those memorable days—and plan to sit in on more university lectures whenever the opportunity arises. I encourage you to embrace the unexpected, seek out new experiences, and never stop learning — because you never know where your next adventure might lead you.

If you have any thoughts or questions, please feel free to reach out. Let's keep the conversation going!

Instantly transform FigJam wireframes to polished Figma prototypes with a fidelity variable collection

2025-08-06T00:00:00Z

🔗 Article originally published on designsystem.ny.gov

🧰 Try it out with the Figma community tutorial file

🏆 2025 Zeroheight Design System Finalist

Designing with speed and consistency doesn't have to mean compromising on quality. In fact, with a smart, but simple, use of Figma's variable collections and systems thinking, you can transform wireframes in FigJam into high-fidelity mockups and realistic prototypes in a single click.

Stakeholders, working under constrained budgets and timelines, are often hesitant to start with low fidelity because of the time (and associated cost) it takes to recreate screens in high fidelity. This friction often discourages early ideation and iteration.

Components are built from Variables and Text Styles that change value depending on the Fidelity mode set.

The approach described here removes that barrier by making the transition from low to high fidelity instantaneous. It enables teams to think through layout and content before discussing visual design. This not only reduces time and cost during the design process, but also removes the need for separate wireframing tools. It opens up new workflows — like designing in high or mid fidelity and instantly switching to low fidelity for clearer communication with stakeholders.

Some teams build separate wireframing libraries and use Figma's library swap feature. The downside to this is that you need to maintain two separate libraries. By adopting this approach, teams who build their own custom components that don't yet exist in the design system, as long as they are building with the design system's published Figma Variables and Text Styles, will automatically have wireframing versions of their components that can be used in FigJam with the workaround explained below.

This article walks you through how I created a more streamlined UX workflow while working on the New York State Design System — and how you can apply these techniques to your own design system.

Note: this workflow is currently in a beta stage and has not yet been released in an officially supported capacity to users of the NYS design system.

The Power of Variable Collections in Figma

At the heart of this workflow are three types of Figma variable collections: Primitive, Routing, and Applied.

Primitive Variables

These are your foundational design tokens. They define raw values — like color ramps, font size ramps, spacing units — which serve as the base for your semantic variables.

Routing Variables

Sitting between primitives and applied variables, routing collections help manage different contextual modes such as:

Branding: For multiple brand identities
Fidelity: Low, Mid, and High design detail
Device Size: Mobile, Tablet, Desktop
Appearance: Light, Dark, High Contrast (Light/Dark)

Each mode adjusts which primitive variables are passed through, allowing flexibility without complexity.

Before we publish the NYS Design System to the Figma Community, I plan to add a new routing collection named 'Organization' with two modes: 'State' and 'Local'. This would allow towns or counties in New York State to adopt our Figma Library and customize it by plugging in their own brand color ramps. By simply switching a screen into 'Local' mode, smaller orgs can instantly localize the design system without starting from scratch.

The idea for Routing collections came from the REWE design system's talk at the Into Design Systems 2025 conference—credit to Vincent Schlothauer and Franziska Haaf for their innovative ideas. The conference recordings are a great resource if you're interested in learning more advanced Figma Variable techniques.

Applied Variables

These are the variables that actually get applied to components and text styles. They carry no additional semantic meaning — just the final values that affect the visual interface. This abstraction enables you to add or adjust routing layers without disrupting the applied layer.

For further clarity: applied variables are mapped to a routing variable. The reason I'm taking this approach is if you apply the routing variables directly to components, then it is painful to add a new routing layer at the top as you'd then need to reapply all of your variables.

For example, look at the image below and imagine you applied the Fidelity routing layer to the components instead of the Applied variables. If you wanted to insert a routing layer above Fidelity you'd have to swap out all of the variables on your components (and any custom components created by users of the design system's published variables and text styles). By following my approach you instead would simply map the Applied variables to the new routing layer variables.

Scoping and Publishing

Primitive and Routing collections should be configured to not be published and scoped to not apply to any Figma properties. By doing so, only Applied variables will show to consuming designers. All of the complexity of the routing collections is handled by the design system team. Users of the design system in Figma should only ever see, use, and think about the Applied variables.

Understanding the Fidelity Routing Collection

The Fidelity routing collection has three modes: High, Mid, and Low.

Variables are organized in the same structure in all routing collections with a parent group named to match the routing collection's name so that it's easier to identify which collection a given variable is being set to.

For example, in the Applied variable collection you might have a primary color variable of 'primary'. We use 'nys' as a prefix for our design tokens. So the variable collections would look like this for the first mode of each collection:

[Applied] nys/color/primary = fidelity/color/primary

[Fidelity: High] fidelity/color/primary = brand/color/primary

[Brand: Main] brand/color/primary = state-blue-700

[Primitive] state-blue-700 = #154973

To manage variable collections efficiently, I used the Design System Organizer plugin. It was a huge help for tasks like swapping variables, duplicating variables between collections, and migrating variables between files — especially during the recent project I handled of merging our previously separate component and variable files.

One unexpected benefit: reviewing components in Low Fidelity mode has been a helpful litmus test. If two components look too similar when viewed in grayscale without a text label, it's often a sign they need better differentiation.

FigJam Workaround with Fidelity Modes

You can't currently set Figma Modes in FigJam so here's a workaround for how you can start wireframing with this setup:

Create a Section in Figma Design.
Place a component with variables applied in the Section.
Set the Section's appearance to Low or Mid fidelity.
Copy the Section into FigJam.

Now, any component placed within that section will automatically inherit the chosen fidelity style.

⚠️ Important Tip: Components placed in frames with a variable mode set are problematic. I recommend using sections in FigJam for device artboards rather than a frame.

Building a Smart Wireframe Sticker Sheet

Create components using applied variables that are defined by their equivalent values in a fidelity mode routing collection.
Insert these components with different combinations of component properties into a section with a low or mid fidelity mode set.
Use these components to wireframe directly in FigJam with your actual design system components making switching to Figma Design a simple copy and paste.

The Workflow in Action

This workflow replaces the need for separate wireframing tools — saving time and aligning designers and developers more closely.

Start in FigJam with Low Fidelity mode. By starting in FigJam you force yourself not to think about component properties. FigJam is a simpler tool that lowers the barrier to entry for non-designers to contribute ideas.
Refine in FigJam or Figma in Mid Fidelity. Change fidelity mode to instantly switch to mid-fi to begin working on content without focusing on aesthetic appearance. Get feedback from stakeholders on layout, content, and copywriting.
Switch to Figma to polish UI in High Fidelity mode. Refine colors, images, and component properties. Build prototypes and run usability testing. The components for the NYS Design System come with a lot of advanced, realistic prototyping built in already to make this fast and easy for designers.
Rapidly transition to accurate code using Figma MCP. Generate front-end code within seconds using MCP and Code Connect (see part two in this 2-part blog series for more on this topic).

Although we have Code Connect set up for all of our design system components, the variables and tokens aren't yet automatically synced with code yet. We're currently maintaining parity manually, which highlights the importance of strong naming conventions and documentation early on.

This approach may not be for everyone as it does require a robust collection of components and text styles built with Figma Variables. But for those who choose to adopt it, this will be transformational. To designers, this looks like a Figma magic trick because it feels like it shouldn't be possible.

Bonus: Dynamic Component Variants by Fidelity

Applying a text variable to a component's variant property on an instance allows you to swap designs by fidelity mode. For example, I've used this to switch the New York State logo, as seen above, between: Sketch (Low Fidelity), Outline (Mid Fidelity), and Full Vector (High Fidelity).

Try it out with the Figma community tutorial file.

Let's Connect

💼 Follow me on LinkedIn to hear about future UX tools I build.

💬 Find me in these communities:

🤝 Meet me in person:

Sept 23rd, 2025: Into Design Systems at Spotify in Stockholm, Sweden

If you need help setting up variable-driven wireframing in your design system please reach out!

Working on a USA state design system?

Are you building a design system for a 🇺🇸 state government or interested in building one? Follow me on LinkedIn to hear more about an upcoming community initiative tailored just for you.

Thanks for reading! If this sparked any ideas — or if you've experimented with your own routing collections — drop a comment below to share your ideas. Let's build better, together.

📖 Part 2 Coming Soon: Figma to Production with MCP and Code Connect by Jesse Gardner