Figma has a new-ish feature called Auto Layout that I’ve been trying to get the hang of lately. What it does is it lets you specify how your designs will adapt once you adjust the contents inside it.
That’s a bit abstract, so here’s a more concrete example: You can automatically set the height of a button to increase or decrease depending on the length of the text within it. This can be useful for making quick changes in the copy without worrying about text overflowing. Without Auto Layout, you would have had to adjust things by hand or install a plugin to get the same results.
As you can see, padding around the button is preserved, and the height of the button increased to accommodate the text.
It very much mimics how production environments like webpages actually work. In fact, they borrow some concepts from the CSS box model to make Auto Layout:
After trying many different approaches, including some rather non-conventional ones, we felt the best way to marry the two worlds was to add a few core concepts from the CSS box model (specifically flexbox) directly into Figma. And by introducing Auto Layout as a property, you have the flexibility and power to apply Auto Layout to any frame, whether it’s in a component or not.
It’s definitely useful for translations, too. Just copy paste the text and the design changes accordingly.
So if you’ve written CSS before, you might be familiar with some of the things that you can do in Auto Layout:
You can make an element take up the whole width or height of its parent.
You can specify the padding around a container and between the children nodes.
You can make a set of elements stack either horizontally or vertically. (Just like flexbox.)
And it doesn’t just work with text. Modifying, adding, or removing any sort of node in a Frame that has Auto Layout—whether that’s text, an image, or another Frame—will change the dimensions of the design.
Auto Layout demo: The design adapts when you change the button and lorem ipsum text.
The downside of Auto Layout is that it’s quite different from how I’m used to designing. It’s a bit hard to master and it’sdefinitelyfrustrating for me to use sometimes. Every so often I get stuck, and I find myself falling back into the warm embrace of constraints.
And because of that, I’m finding that it’s better for me to use Auto Layout in the later stages of the design process. I feel that it ends up slowing me down a lot when I’m using it in the exploration stage.
When I’m converting a design to Auto Layout, I find that it’s best to start from the deepest layers to minimize the issues that I run into. Then I work my way up.
But I hope that this changes in the future. I’d like to use Auto Layout sooner in the process so that I could take advantage of its features. But I guess that will come naturally as I become more familiar with it.
I love that we’re now able to describe behavior in UI designs, and I hope that more design tools follow this direction. I think what I’m looking forward to is how this will make playing around with real data easier. Imagine not having to worry about the design breaking because the text is too long.
I used to ignore anything that looked like responsibility. I didn’t read my mail, I often forgot about appointments, I didn’t plan ahead, and I could never tell where my money was going. Although my strategy surprisingly worked for a couple of years, I eventually reached a tipping point where I was spiraling with guilt and mounting obligations. I’m happy that I’ve gotten to work on my ostrich-like hangups on life admin since then, and I think—for me at least—having the right software tools have helped along the way.
I often see peoplewritingaboutthe tools that they use to get their work done, but it’s rare for me to see much of anything on how people manage their lives outside of work. I’ve been reassessing my setup recently, so I thought I could share the things that have been working well for me and the tools that I’m currently playing around with.
You Need A Budget
In the past, I would budget my money by adding up all my recurring expenses each month and subtracting the total from my income. I’d put down the result as money that I’m allowed to spend. I figured that whatever is left behind after that can turn into my savings. It seemed like a good system: it was simple, and I didn’t have to do it that often.
But reality was very different. It felt like there was always that one “emergency” that would throw a wrench into the whole thing: a doctor’s appointment, going out to dinner with friends, a subscription that I forgot about. So even though I had a great system in place (I didn’t), I still couldn’t manage to put money towards my savings or my credit card debt. So I gave up and figured that I was just bad with money.
I forget how, but I came across an app called You Need A Budget around two years ago. I had a hard time using it at first because I couldn’t wrap my head around the philosophy of only budgeting the money that I currently have. I also struggled because I didn’t understand that I needed to be proactive with budgeting. I didn’t know that I had to:
Actively look at what’s left of my budget to guide my decisions
Figure out what categories I needed to prioritize
Plan and set goals
With YNAB, you can only budget the money that you already have.
But after a couple of failed attempts, I eventually joined their workshops and learned how to use the app. I’m not going to go into detail about its features (there’s a bunch), but the gist is that it’s super useful for life admin. Those “emergencies” that I talked about earlier? They’re basically things that YNAB helps me prepare for. If I know that I’ll be getting my wisdom teeth removed soon, I can start putting money towards a category called “Oral Surgery.”
I also have a thing called a “wish farm” to budget my discretionary money into categories like future travel or a pair of boots.
Fantastical
I couldn’t find a single calendar event before 2016, so I don’t really know how I managed to remember things before that year. I think I had this idea that calendars were only for very busy people. Normal people like me, I thought, don’t really have a use for it outside of work. Unfortunately, I wasn’t any good at keeping tabs on my appointments and get-togethers. I realized that computers were a lot better at remembering dates than I am.
I have my calendar hosted on Fastmail, and I started to use it a lot more when I found Fantastical. I think what got me to use it was how ridiculously easy it is to add an event in the calendar. Basically, you just type in “Water plants every other Friday” and it’ll automatically create a recurring event just for that. It suddenly made remembering events easy for me to do.
Fantastical removes some of the friction from creating events.
One other feature that I love about Fantastical is that it lets me bundle calendars into different sets. This means I can switch between different contexts throughout the week:
A set that just shows my personal calendars. (Perfect for weekends or when on holiday.)
A set that just shows my work calendars. (This gives me an overview of my work.)
A set that combines personal & work calendars. (This is usually my view during the week because, naturally, I don’t want to miss any work meetings or personal appointments.)
Reminders
I don’t have any complex to-do list requirements, so I’ve found popular apps like Things and Todoist to be a bit too much for my personal needs. I didn’t think it was worth paying for features that I wasn’t going to use. Paper, on the other hand, is often inconvenient to carry around and to write in while I’m on the bus or train or at the grocery store.
I was doing some research on to-do lists, and it turns out that most calendars already support simple task management. I thought this would be great at first because the bulk of my tasks are basically events that I want to check off like “Take the trash outside at 9pm every Monday” or “Change out your contact lenses every two weeks.” The downside is that it the more tasks I made, the more cluttered my calendar looked.
The solution for me was to switch to Apple’s built-in Reminders app. It actually syncs with my calendar on Fastmail which meant that I didn’t have to migrate my tasks over to another system.
Reminders makes it easy to for me to create to-do lists that sync with my calendar.
To-do lists are at the heart of my life admin because I would forget a lot of things if I didn’t have it. It has a lot of those recurring items that I used to forget like paying off my credit card every month or taking the compost bin out. Since it’s also on my phone, it’s also really useful for remembering those responsibilities that bubble up when I’m commuting. “Oh yeah I need to get some onions for dinner later.”
Monica
In the past, Facebook was my contact list. I could message friends easily, I could hop on a video call with them, I knew what people were up to, and I knew if their birthdays were coming up. It worked pretty well up until I stopped using Facebook. And at that point, I didn’t realize just how much I relied on it for keeping in touch with friends.
Fortunately, a friend told me about this website called Monica. It’s basically a CRM but without all the business-y language around it. I managed to use it for a couple of months, but my motivation died out soon after.
I tried Airtable for a little bit, but that ended up being even more work. I just wanted something that didn’t require me to build the scaffolding so that I could get on with the actual work. So recently, I started using Monica again, but now I also have a reminder to update it every other day so that I don’t forget about it. I also made it into a “desktop app” using Fluid, so that I’m reminded of it whenever I’m on my computer.
It’s too early for me to say if it’s working for me, but I’m glad that there’s a way for me to keep track of when I last hung out with someone, the names of their pets, and the things that we talked about. It’s almost a complement to my journal. I also appreciate that I get reminders from Monica that basically says, “Hey, you should really keep in touch with this person.”
That’s it
You made it! The invisible work of life admin isn’t glamorous, but thanks for letting me geek out and reading all the way to the bottom. If you have tools that you use to manage your daily life, I’d be happy to hear about it.
There’s seemingly no limit to the number of wonderfulplugins that are already out there for Figma. It’s inspiring but also humbling because it meant that I probably have nothing else to add to that infinitely growing list. It seems that every plugin idea that I can think of already exists in some form.
As an alternative, I briefly thought about making something frivolous, like the Dad Jokes plugin for Sketch. It’s just like lorem ipsum but with dad jokes as placeholder text instead. But I did have a plugin idea for slightly improving copy-pasting content.
What it does is that it fetches all the text nodes within a selected element and organizes them into a table. This should take some tedium out of copy-pasting content since it automatically selects and copies the text for you as you click around. All you have to do is to make a selection and run the plugin.
I’m actually surprised by its simplicity: Under the hood, all it does is run document.execCommand('copy') whenever a table cell is selected, and that copies the selected text on to your clipboard. While it’s not exactly a must-have plugin, I did enjoy learning more about how Figma Plugins work. I’m also glad that writing plugins forced me into the world of Typescript from the very beginning. I admit that I haven’t dealt with explicit types in a long time, but I love that it makes web development so much more pleasant thanks to IntelliSense‘s autocomplete and API documentation.
There’s no need to search for API documentation when you already have it in your IDE.
There’s still a few refinements that I need to do and some edge cases that I need to fix before I could call it done, but you can follow the progress on Github.
Update
Fast Copy is available to everyone! There’s still a lot to do, but at least it’s out there in public.
The other week, I had some time to look into Figma Plugins during “Hack Days” at work. Since I’m familiar with both frontend and design, I thought it would be a good chance for me to take a step back from my day-to-day priorities and work on a hack days project that involves the two disciplines. I had a vague idea of creating a plugin that would help me with some of the grunt work that’s involved when I’m designing mockups.
The reason why I’m particularly excited about Figma is that it’s a design tool that’s built on web technologies. (It’s actually written in C++, but it’s compiled to WebAssembly and runs on modern browsers.) That means that I’m already familiar with the concepts and the tooling around building the plugins themselves. For example, I could use the built-in DevTools to explore and manipulate all the different objects on the page, using it as a sort of visual REPL for changing, say, the color of a rectangle on the page.
Finding objects using .findAll and .findOne
Changing the rectangle’s properties by assigning a cloned object. (Sometimes you can’t directly change an object.)
You can use DevTools to find the rectangles on the page and change their colors on the fly.
It was a bit overwhelming to learn how Figma Plugins work when I first started, so I figured that I start off by playing with basic shapes to keep things simple. It made learning more manageable compared to working on a component that’s filled with many different objects in it.
The objects on Figma have a lot of properties that you can change. For example, you can directly change the opacity of a rectangle.
I found that text objects were reasonably easy to modify, so I figured that I could write a plugin that would translate the text in some of the mockups that I had. Translation plugins already exist in Figma (see both Translate and Translator), but I wanted to see if I could write something similar.
I had high expectations from myself at first: I wanted the plugin to actually work and translate any sort of text that I had. But I couldn’t get my plugin to do network requests to a translation service because I had trouble setting up packages from npm. I kept on getting errors from webpack that I didn’t understand so I gave up and went with mock requests for now. In hindsight, it might have been better if I didn’t rely on npm and made the requests myself using XMLHttpRequest or the Fetch API.
A demo of the translation plugin. It shows the plugin creating a copy of the selected frame with all the text inside of it translated into Spanish.
The UI of the translate plugin where you’re able to select the language you want.
An example of a translated frame appearing beside the original frame.
Another example of a translated frame.
Screenshots of the translate plugin and its results.
The translate plugin ended up working reasonably well otherwise. You were able to choose which language you’d like to translate your mockup into, and it doesn’t overwrite your original work.
The second plugin that I worked on populated the Yelp Review designs with new data. I found it tedious to copy-paste actual data online, so I thought I could solve that by letting the plugin do the hard work for me.
A demo of the Yelp plugin. It shows the plugin creating multiple copies of a frame, all filled out with fresh data.
Unfortunately, just like the translation plugin, this plugin doesn’t actually make any network requests, and it only works on a specific component. So I think the next time I write a plugin, I’d like to create something that pulls in real data. I’d also like to figure out a way to generalize plugins that would work on any component that’s thrown at it—similar to how Microsoft’s Content Reel plugin works.
I’d definitely like to continue working on Figma Plugins in the future whenever I find some spare time. I’m impressed that they’re able to pull off a Google-docs-like design tool that’s cross-platform (you can design on a Chromebook if you wanted to), and that also has a well-thought-out plugin system. It’s an incredible tool, especially for remote workers like me, so I look forward to seeing Figma grow in the years to come.
Last Friday, the same day Apple started selling the newly-released iPhones to everyone, I decided to pry my iPhone 7 open. It had an aging battery, and I had the option of taking my out-of-warranty phone to either the Apple Store or a local repair shop. But swapping it out myself sounded more fun, and going the DIY route also meant that I would pay less.
It was, of course, a complete coincidence that I did it on the day of the event. But learning about it after the fact made me feel a bit more defiant and subversive. I felt like I had just saved my wallet from the world’s first trillion-dollar company by holding off on buying a new phone. I felt good about extending the life of a device that Apple doesn’t want people to repair.
I’m fortunate that I also don’t do much on my phone, so it pretty much does whatever I need it to do. I can play games, browse the web, find my way across the city, take pictures, and manage my budget. The only thing that was really missing was a longer battery life.
But changing the batteries myself does have its risks. I was terrified of opening up my phone because there was a chance that I could accidentally puncture a component or pull on the wires a little too hard. I definitely didn’t want to lose the whole phone altogether. This fix could easily switch from being the cheapest repair option into being the most expensive one.
But I went ahead and did it anyway. I had the tools and the battery, so to hell with those sunk costs.
You need to disassemble and remove a few components first before you can get to the battery.
Of course, it ended up being a success. It took around fifteen minutes, and all I did was follow instructions on iFixit. I felt empowered and proud that I was able to extend the life of a device that I use every day, but also a bit of relief that I didn’t end up bricking my phone. I also felt like I’ve crossed a boundary: I no longer feel like a consumer, but more of a participant in the device’s existence.
There was one thing that I did screw up: I forgot to reapply the display adhesive around the screen. It’s meant to prevent water from getting into the phone, but as long as I never take it near a tub or a swimming pool, I should be good.
Back in 2015, I had a bit of a fascination with loading animations. If you’re not familiar, these are animations that you see whenever you wait for content to load on a website or an app. They’re meant to show progress or to distract you from all the waiting. Anyway, there was a couple of weeks where I spent most of my free time breaking down and poring over the details of different loading animations from products like Slack, Asana, and iMessage. I wanted to see if I could try and get my own web-based imitation to look as close to the real thing as possible.
Part of the appeal for me comes from the fact that these kinds of animations are compact and approachable: The only thing that you have to worry about is figuring out how to get something to move. The rest of the time is just spent on endless tweaking to get it to look right. I wasn’t doing it for anything, really. At that time, I simply found satisfaction in trying to learn how to create tiny, single-use animations on the web.
Luckily, it eventually ended up being useful to me at work. I got to use the animation skills that I learned and got to apply it to a few projects that I built. One of those projects was a website called Privacy Heroes. It was a brief collaboration between different privacy companies to try out magazine advertising, and I was responsible for designing and building the website portion of it.
It’s been a year since I last thought about this website. But a co-worker reminded me about it the other day, and it brought back memories of why I like working on animations, and why I’m excited about the web in general.
I think the reason I liked working on this particular project was that I could go further and add a bit of motion and energy on the website—something that we could never do in a magazine ad. With a few lines of code, I can draw attention to a superhero’s speed lines, bring shooting stars to life, and add a bit of twinkle to the stars.
Of course, the applications of animations also extend beyond the superficial and frivolous because it can also be a way to communicate effectively. Take a look at how Stripe demonstrates the value of their products using animations.
Call me biased, but I love the web because it’s a medium where ideas can come alive and become available to anyone with an Internet connection. It’s also a medium that’s available everywhere, existing in many different devices ranging from your TV to your laptop to your phone and, most recently, to your wrist. The upsides are also its downsides because this means you have to accommodate for all sorts of environments. Animations could run slowly on low-powered devices, and your designs could look terrible on really large screens or really small screens.
But, for now, it seems that the benefits of working on the web outweigh its downsides. Only time will tell.
I figured that since I work for a privacy company, I should try and increase my own awareness of where my personal data goes. I wanted to try and figure out which companies and organizations have, in one way or another, somehow received and processed and stored my personal information.
Of course, this isn’t an exhaustive list of every single company out there that knows me because that would be an overwhelmingly long list. Not only am I leaving out every third-party ad and analytics software that apps and websites use (I just included Google Analytics and Chartbeat in my findings), I’m also leaving out the impossible task of knowing the data-sharing practices of the companies that already have my data in the first place. (Chase, for example, shares data with their marketing partners to send you advertising.)
I’m not trying to say that sharing your personal data is necessarily bad. Your doctor, for example, needs a ton of data from you like past visits, current medications, family history, insurance plan, pharmacy of choice, payment method, test results, and your contact information. The point of all this is to figure out just how much my life is dependent on sharing my personal data, how necessary it is in my day-to-day life.
So what I have below is a 12-hour diary of my online activities on September 5, 2019.
6am
Xfinity can see everything that goes in and out of the network because they provide my Internet at home. They can see all the connections that my phone was making while I was asleep. They know which apps on my phone connects to the Internet to fetch new information like my messages, podcasts, and the weather in the morning.
6:57am
At around 6:57am, I reply to people on Telegram Messenger. Xfinity knows that I use Telegram—including the time when I used it—because it passes through their network. Telegram, on the other hand, knows my contact list, the people I’m talking to, and when I contacted them.
7:21am
At 7:21, I turn on Headspace to meditate. Again, this is something that goes through Xfinity’s network since the meditations are downloaded from Headspace’s servers as needed. Headspace knows the time when I opened the app, the type of meditation that I played, and if I’m a paid subscriber. It also keeps track of all the meditation courses that I ever played, and the number of days I meditated consecutively.
7:36am
I look at my transactions and my budget every morning on a budgeting app called You Need A Budget. This means that they have a running list of all my personal transactions and financial information: How much I spend on different categories, my spending habits over time, where I spend my money, and even the things that I buy. (I put notes beside some transactions to help me remember what I spent the money on. An example would be: “Amazon.com, pressure cooker.”)
Oh, when I say “where I spend my money,” I also mean that literally. YNAB remembers the location of my phone where I manually entered a transaction to make manual entries easier for me. It was creepy when I first noticed it, but I actually find this super helpful.
Like most web apps, YNAB uses Google Analytics to learn about customer behavior and usage. I’m pretty sure that it’s on the website version of the app (which you can block on your browser), but I don’t know if the mobile app uses it so I may or may not have hit Google Analytics.
YNAB also has access to my accounts on Wells Fargo, Ally Bank, and Vanguard so that I don’t have to manually put in all the transactions that I made by hand.
7:57am
At 7:57am, I leave the house, which means my Internet connection switches from my WiFi to my cellular provider, Ting Mobile (which, in turn, uses T-Mobile towers).
And just like Xfinity, this means that they can now see the connections that the apps on my phone make when I’m on the go.
I take the train at 8:41am using a digital keycard which keeps track of all the train stations and bus stops that I go to. You can purchase these cards and reload them using cash if you’d like to have more privacy, but I linked my transit card to my credit card and e-mail address so that I could get a refund on lost cards and be able to set it to auto-renew at the end of each month.
Note: The image above is a bit misleading. I put SEPTA beside Ting Mobile, but Ting doesn’t actually get any direct information on my commuting habits.
9:04am
I go to a popular convenience store called Wawa before heading into my co-working space, and I buy a breakfast burrito using my credit card. Wawa knows that my method of payment is Apple Pay and that payment network is Mastercard, but I’m a bit unclear if they know about the issuing bank (Goldman Sachs).
What I am sure of though is that Goldman Sachs knows that I went to Wawa, what time I went to Wawa, the location of that Wawa, and how much I paid for that burrito at Wawa.
I also budget on YNAB on my phone while I’m in line for my burrito, so YNAB now knows the same details that Goldman Sachs does. Ting is also now aware that I use YNAB since I needed the Internet to access my budget.
9:08am
I send a text on Telegram as I walk to my co-working space, so Ting also knows that I use that app, too.
9:54am
I connect to the WiFi in the co-working space, which is provided by a local ISP called Philly Wisper. I then log on to the websites that I need for work like Asana, the company chat room, and the company calendar on Fastmail.
Generating digital data is, of course, unavoidable when I’m doing remote work since collaborating, planning, and updating work with my colleagues mostly happen on the Internet.
I also start visiting other websites to find inspiration for data visualization for this very article. The websites that I visit, just like YNAB, use analytics software like Google Analytics and Chartbeat to learn about their readers.
12:02pm
At around lunchtime, I call CVS Pharmacy and ask them to get my prescriptions from Walgreens Pharmacy. So now, CVS knows all the medications that I take, who my doctor is, and who my insurance provider is.
Also, that call went through Ting Mobile, who now knows that I made a call to a nearby CVS at 12:02pm for 6 minutes.
12:14pm
I check the Dark Sky app on my phone to see if it’s going to rain this afternoon. Since it’s a location-specific app, it knows the city that I’m currently in.
12:28pm
I walk outside and get a flu shot at CVS (the same CVS branch that now has my medications). I got the vaccine for free because my insurance provider covers the full cost of it. So now both CVS and my insurance provider know that I just got a flu shot at this location and at this time.
1:46pm
At 1:46pm, I get charged for a recurring monthly bill from my therapist’s office at Thriveworks. They see how often I come in for therapy, who my therapist is, my insurance details (Independence Blue Cross), and my payment details (Mastercard).
2:48pm
I use an app called Transit to see what time the bus will come. This app keeps track of where I am (crowdsourced and real-time data is important to them), the possible routes that I can take, where I’m going, and a list of buses and trains that I frequent. Fortunately, they don’t really know who you are unless you send them feedback.
I then hop on the bus using my SEPTA keycard, so the transit agency knows the time I hopped on, where I was waiting, and the bus number. If you noticed, I only mention SEPTA having data at the start of the trip and not the end when I hop off the train or bus. This is because they don’t scan your keycard when you exit the bus or train.
3:23pm
I got home, prepared a late lunch, and watched some videos on YouTube. YouTube (which is owned by Google) knows the types of videos that I watch to improve their advertising and to make better video recommendations. After all, the more videos I watch, the longer I stay on the site.
4:03pm
My last entry of the day is getting a notification for a recurring donation (what a mouthful) to a charity called GiveWell. Just like Wawa, they know my credit card number and that I used Mastercard. (Again, I’m unclear if they know about the issuing bank part which is Goldman Sachs.)
Goldman Sachs and Mastercard, on the other hand, know where I donate my money and how much I give away.
The charity also knows my contact details like my address, phone number, and my e-mail address.
Pfew.
Visually laying out all the entities that have their hands on my data is a bit mind-boggling, and I’m sure that I’m missing a couple hidden services that run in the background that I’m unaware of. What scares me the most is how often data breaches seem to happen and how reliant I am on all these digital services.
There are some alternatives out there that I can take, but none of them seem to be worth pursuing. I could start paying in cash so that banks and payment processors will have limited information on my whereabouts, but I find it too much of a hassle to carry cash and change these days. I could buy music instead of streaming on Spotify, but then I lose having access to virtually any song that I want for cheap. I could dump my smartphone for a less-capable phone to limit the apps that follow me wherever I go, but then I lose the convenience of having transit data, meditation courses, the weather, and my budget at the palm of my hands.
It looks bleak, but thankfully our values are always changing. People are waking up and realizing that digital privacy in this software-filled world is important, which means that people are starting to look for services that offer privacy. Goldman Sachs, for example, has been a recurring company in this log that I made, but at least they can’t share or sell the transactions that they have on me. DuckDuckGo doesn’t know what you’re searching and it blocks online trackers (like Google Analytics and Chartbeat) from following you around the web. Non-profits like Mozilla are creating a suite of privacy tools to help you understand and protect your privacy online.
Things seem to be going into the right direction when it comes to our digital wellbeing. I hope you enjoyed this visualization of my digital data diary, and I hope we both see a future with a little more privacy.
It was my fault, really. I don’t like flying, and I don’t sleep well in planes, but I still booked a 28-hour flight from Manila to New York. I honestly thought I was ready for it. I had melatonin pills, a neck pillow, a sleep mask, a blanket, and a pair of socks. Knocking myself out was my number one goal. That, I thought, was how I would survive this flight. While I did manage to fall asleep, I kept on waking up because some part of me would start to get sore from being confined in a chair for so long.
The first part of the round trip flight was actually a pretty good deal. For $800, I was able to go to Germany (stayed for 12 hours) and to Singapore (stayed for 5 days) before finally flying out to the Philippines. I got to visit countries that I’ve never been to before, and I also got to spend time with friends that I haven’t seen in a long time.
The coming back part, unfortunately, meant that I have to go from Manila to Singapore, Singapore to Germany, then Germany to New York. It was an unnecessarily long trip, and because I kept on waking up, I thought I’d do something fun instead. Like maybe log the activities that I did in the flight.
It’s unfortunately not the most accurate data because some activities overlap like eating while watching a movie. I also didn’t have the foresight to jot down the time when I would stop doing something, e.g., I would log the time when I started eating but not when I finished. But even then, I think the logs were still good enough to learn from.
I didn’t know how to represent the data at first. I wanted something more creative and outside of the usual charts that I’ve made before. But the other day, I ran into a Sketch plugin that created spirals. So I thought that maybe I could represent the data as a snail because of how unbearably long the flight was.
So after a couple hours of trial and error with both the 6Spiral and Looper plugins, I came up with a shell where each spiral represented 30 minutes of activity. Behold, my snail collection!
Since I didn’t log (more like forgot to log) absolutely everything, there is a “miscellaneous” category in there that includes a hodgepodge of things like going to the bathroom, daydreaming, listening to a podcast, brushing my teeth, and changing my clothes.
Looking at the visuals, I’m kind of surprised that I logged 9 hours of sleep. It wasn’t the restorative kind of sleep for sure, but it was still a substantial amount of time. I’m guessing a good part of that was spent tossing and turning in the seat.
Another surprising part is how small the music-listening and watching category are. I went through several albums and TV shows on the plane, but I guess that didn’t really amount to much. Or it could be that I was too distracted to log. We’ll never know.
I’m thinking in the future I could look into animating each spiral similar to this, so I’ll look into that when I have the time. Anyway, I wish you never have to take such a long flight in economy class!
I was jokingly telling my partner that the best way to help prevent climate change is to just be dead because using water (processing drinking water and waste), eating (farm equipment and goat burps), and using electronics (outside of child labor, manufacturing them and connecting to data centers) all have carbon emissions.
I wanted drill down and visualize CO2 generation between different states, and thankfully there’s data on that from the EPA. Here’s the amount of CO2 production per state on a map in 2016:
If we stack the emissions of some of the biggest CO2-belching states on top of each other, we start to see why the US generates so much C02.
So what is producing all of these carbon? If we zoom in to a state like Pennsylvania, we can see that a large part of it comes from generating electric power and from transportation. The New York Times digs deeper into how each state generates electrical power piece and they show that Pennsylvania’s power is run by 22% coal and 34% natural gas.
With regards to the transportation piece, the EPA says that the “largest sources of transportation-related greenhouse gas emissions include passenger cars and light-duty trucks, including sport utility vehicles, pickup trucks, and minivans.”
Of course the ratios aren’t always the same with every state. We can look into a different state like South Dakota which has smaller C02 emissions because it only uses 19% coal and 6% natural gas in the electric power sector. A lot of their energy now comes from 48% hydroelectric and 27% wind.
Speaking of wind, I found some good data on wind energy, too. I had recently switched my electricity supplier to The Energy Co-op, and they had pointed me to USGS because I had asked them where the power is generated. It turns out they let you download all the locations of the turbines in the US and the power that they generate.
So I downloaded that and plotted all 59,338 turbines that were listed in there! I didn’t know there were that many to begin with.
Actually, we can take it up a notch and show all wind, solar, nuclear, hydroelectric, and geothermal power plants on the map using this data from the EIA.
I’ve also been looking into what I could do, and from what I’ve been reading, it looks like policy changes and regulations seem like it’s going to be our best bet to fight climate change.
In the end, though, experts do not believe the needed transformation in the energy system can happen without strong state and national policies. So speaking up and exercising your rights as a citizen matters as much as anything else you can do.
…
What is still largely missing in all this are the voices of ordinary citizens. Because politicians have a hard time thinking beyond the next election, they tend to tackle hard problems only when the public rises up and demands it.
I’ve personally been using 5calls, GovTrack, and ResistBot to contact state officials and congress, and I’ve started to donate 1% of my monthly salary to organizations that advocate for policy change ($1,080 per year):
PennFuture: $30/month (advocacy, policy, and regulation)
In Philadelphia, I learned that I could also choose an electrical power provider through www.papowerswitch.com so that I’m buying wind and solar power using my electrical bill. Philly also has access to composting through Bennett Compost and Circle Compost.
One of the projects that I’ve worked on recently is the redesign of a fairly simple form. All it did was gather feedback from people who wanted to report a broken website from within the DuckDuckGo browser extension.
So what you would do was that you’d click on the “Report Broken Website” button on the extension, and then a new tab would open with a form that you would then fill out.
The DuckDuckGo browser extension popup.
A new tab that shows a form for people to report broken sites.
Forms aren’t all that exciting to be honest, but there’s room for creativity in designing them. Just take a look at the thoughtfulness put into Stripe’s payment checkout form or the range of ideas that you can find on Dribbble.
So with this project the main issue that we wanted to solve was friction: Can we increase the number of people reporting broken websites if we made it easier to do so?
Understanding the problem
People already had ideas on possible solutions and user flows before I even started on the project. So my job at the very beginning was to listen and understand the scope of the problem and the goals of the project.
For me that often meant grabbing a bunch of paper from my co-working space’s recycling bin to write down design ideas and to sketch out some possible solutions.
You often find odd printouts from the recycling bin.
Some sketches and ideas that I was working on.
A part of the design process for me is also figuring out the copy and the tone and voice that we want in the UI. We figured that in this case we’d want to show empathy to the person reporting (because it sucks to run into a broken website) and to communicate that we’re not going to be harvesting all their personal information behind the scenes (because we don’t).
After I felt like I had a good handle on what I needed to do, it was time to go on Sketch.
Iterating on the designs
Forms are really just a bunch of input fields. Figuring out what sorts of fields to put in there, however, can take some time to figure out. The first set of designs that I made had multiple elements:
A select element for indicating the type of breakage.
A textarea element for people describing their problem.
A checkbox element for people to opt-in to debugging data.
A screenshot of Sketch showing initial work on the form.
But after a few discussions and a couple of design variations later, we figured that we could reduce the form down to just one element. First, we got rid of the checkbox because the submit button is how people opted-in to sharing their data. (In lieu of that, we added additional information that we weren’t going to get any of their personal information.) Second, we figured that we already had the debugging information so there was no need for people to explain what went wrong.
This greatly simplified the form, and made it faster for people to report a broken website.
A second set of variations that have fewer elements in them.
Another part of the design that I had to look into was how people got into the form itself. What most some people do when a website is broken is that they toggle the extension on and off to see what would happen. We wanted to reach out to these people by asking them if they were toggling because they found a broken website.
Some ideas showing notifications above and below the extension popup.
The initial designs that I made used modals that imitated how smartphones would show notifications. I loved this idea because this sort of notifications could be used to help and guide the user when they encounter different problems throughout the extension. But we agreed that right now it’s a bit of an overkill solution so we went with a simpler inline version that comes up right below the toggle.
A simpler solution that was easier to implement and design.
Coming together
Now that the main parts of the project have been designed, it was time to create a user flow that shows the different scenarios that a user could get into when trying to open up this form. This is great for communicating design to developers and other stakeholders so that everybody is on the same page.
A user flow showing scenarios in the UI like error and success screens.
Then we also asked Matt Anderson to create an illustration for the form and we all ended up liking this broken bike design! At this point, it was time for the developer to implement the designs.
All these changes are now live! So if you ever run into a broken website on the DuckDuckGo extension (I hope not!), you now know how that reporting page came to be.
