Collapse Artifacts in Figma

Figma, Sketch, and other UI Design tools have what I like to call an “anarchy canvas”, a functionally infinite canvas, with no built-in mechanisms for organizing, which forces designers to use spacing and positioning to communicate relationships between objects.

One of the many problems that arises with this anarchy canvas is that designers leave artifacts surrounding the final screens. I will be specifically focusing on the problem of artifacts in this piece, a broader critique of the anarchy canvas might be warranted in the future.

A screenshot of a few screens for ParkHub with their associated artifacts floating around them.

Typically, these artifacts are either removed once they’re no longer needed, or are moved to a “playground” page, to separate them from production-ready screens.

Both of these solutions have significant drawbacks.

With the first solution, the inspiration screenshots are lost to history. What was the designer thinking? What were they trying to emulate? When we remove inspiration we remove the context surrounding the decisions that were made.

With the second solution, we disconnect the artifacts from their relevant elements, again, destroying useful context. The artifacts can be copied by themselves, creating orphans of inspiration, or the artifacts can be copied along with their relevant elements, but this runs the risk of the relevant elements becoming out-of date as the production screens continue to be developed. To prevent this, the designer will have to update both places.

* Typically in Figma, master components exist on the final page, which is convenient in tying them to the relevant screen, but it makes it hard to find the master components without right clicking an iteration and clicking “go to master component. Sketch handles this differently, when you create a component (called a “symbol” in sketch) it sends it to a different page. Annoyingly, that different page also adheres to the “anarchy canvas” principle, where each new element is arbitrarily appended to the right of the most recent symbol.

Encouraging Productive Rooftops

This is an outline for a public policy which would encourage the productive usage of rooftop areas, to optimize space utlization in urban areas.

Many uses can be classified as productive, and various indexes can be applied to prioritize usage based on the needs of the community.

Examples of productivity:

  • 🗣 Socially Productive

    • 💕 Things which encourage community bonding and socialization, such as:

    • 🛋 Lounges, 🌳 parks, 👙 pools, 🍻 bars, 🍔 restaurants, etc.

  • ⚡️ Ecologically productive

    • ☀️ Sustainable electricity production: Solar panels, wind farms, etc.

    • 🌽 Sustainable agriculture: Food, Vegetable Gardens, Hydroponic farms, etc.

Source: Note Jun 29, 2019

Source: Note Jun 29, 2019

Here’s a picture of a building in Chicago that I noticed would have both productive and unproductive surfaces, possibly making the building break even in terms of taxes/subsidies.

affinity export.png

Here’s a gif of my initial sketch that I manually drew, until I realized that it’d be a lot easier to make in an illustrator app, like Affinity. Luckily it serves as a eye-catching thumbnail.

no text.gif

Please drop a comment below if you’ve got any thoughts about this idea, or hop into the conversation on twitter!

Teasing Self Driving Cars with Google Maps

To encourage interest and adoption of autonomous vehicle services, Google Maps could tease estimated prices of Waymo and other services in their rideshare comparison view.

Note Oct 8, 2018.png

In the meantime, the “autonomous vehicle” tab could populate news or project timelines to show when the service might be available in their area. Perhaps even a “notify me when this is available” button.

Note Oct 7, 2018 2.png

What to put in the tab?

The Uber and Lyft tabs allow you to request a ride, but in the case of autonomous services, we’ll have to use this screen space to show other relevant information. Here are some ideas:

  • 📆 Estimated time until service is available ( 12 months )

  • ⚠️ Current blockers

    • 📜 Regulatory blocker

    • ✍️ Approval blocks

    • 💸 Inadequate funding

  • 👀 Similar projects

Note Oct 7, 2018 1.png

A 3D Model for Every Building

When you search for a building, you see pictures and a map. However, If you were in a sci-fi movie, you’d probably see an interactive 3D model of the building. Google could bring us into the future.

This is a proposal for Google Maps to use their 3D imagery to build a collection of isolated buildings for use elsewhere on the web.

These isolated buildings could be used in Google search previews, embedded in Wikipedia pages, and downloaded for 3D modeling projects.

A diagram showing the isolated building (blue) being transcluded into other places on the web.

Here’s this same diagram with actual screenshots of the 3D view of One World Trade Center on Google Maps, with arrows pointing to where an isolated 3D model could be embedded.

The top section illustrations that this isolation could be pretty easily executed by extruding the footprint of every building up to the height of the building. This works for most buildings, since the footprint of buildings are typically larger than the top sections. For more complex buildings, however, these models could be manually isolated.

If you know anybody who works on the Google Maps team, please send this to them!

Feedback and other ideas are welcome in the comment section below!

Improving Wikipedia UX: An Open Source Project

To make falling down the rabbit hole of Wikipedia a little less dizzying, I've been working on a Chrome extension which aims to improve the information architecture of any Wikipedia article a user visits.

The primary difference is that the Table of Contents has been moved from the body of the page into a sidebar which allows the user to maintain a high-level overview of the page content while they scroll.

S/o to my friend Jon Senterfitt for being willing to help me out with this project.

Milestones

We made the sidebar adjustable. That's cool.

Sorry this gif is so low-res, I asked @GIPHY if there's a processing time or something to get a higher resolution gif, since the source video I provided was a lot clearer. 

Upcoming Changes

For an up-to-date snapshot of future roadmap hurdles, check the github issues page.

 

Figma User Interface

Here are two (2) suggestions for Figma Designer to help make it a bit more user-friendly and magical to use.

Panel Expand / Collapse Animations

When toggling "Hide UI", the interface abruptly disappears and reappears (on the right side of Fig. 1a. ) 

It'd be delightful if the UI elements were swept away (dark green position graph) from the center of the screen and subtly faded out of sight. (light green opacity graph) as indicated below in Fig. 1b.

Fig. 1a.

Fig. 1a.

Fig. 1b.

Responsive Panel Colors

Figma thankfully allows users to set a background color for the whole project, which is a welcomed feature coming from Sketch, which locks you into using a white background. 

Unfortunately when using a dark background, the layers panel (left sidebar) and the inspector panel (right sidebar) are blindingly bright. Not only are they pure white, their typefaces and elements are thin and light.

To make the layer and inspector panels more readable, I propose that the UI of both change in accordance to the set background color of the project. I prototyped what this could look like in the column on the right. 

Screen Shot 2017-08-11 at 11.41.09 AM.png

Collapsible Activity Feed

To make the Google Drive Activity Feed a bit easier to browse, it'd be nice if we could click to collapse events into smaller rows. If you're auditing your company's recent Drive activity, it'd make it much easier to navigate. 

(Fig. 1) Position of the Activity Feed in Google Drive

By splitting each action into a "header" and a "body" section, it's easy to conceptualize a "collapsed" view for the Activity Feed.

(Fig. 2) 

Working prototype:

I'd like to try to build a working prototype of this idea. First I'll need to research whether or not there's a Google Drive API that allows users to pull data from their own Drive's, then I'll need to try to rebuild the existing user interface with the collapsibility functionality as described above. 

Facebook Gallery Expand

When somebody adds multiple photos in a Facebook post, the gallery is shown in a nice pretty mosaic view on your timeline. If there are more photos in the album than are shown, theres a small "+number" on the bottom right image.

Current Behavior

One might think clicking the "+n" would expand to show more photos in the mosaic. Instead, clicking the "+n" only opens the last photo (red) in the pop up window.

Here's a mockup of what I wish clicking the "+n" button would do: expand the album mosaic to show the additional photos.

Ideal Behavior


Somewhat related to this: I'd love to see Facebook add a filmstrip to the bottom of the photo viewer pop-up window. It makes it easier to navigate through albums by giving you a bird's eye view of the context of the album.

Thanks for checking out this article, I welcome feedback and suggestions in the comments, and feel free to connect with me on Twitter, etc.

Detecting Bias in Search Engines

Perception is reality. For us internet-dwellers, our reality is shaped by the big internet companies, Google, Facebook, Twitter ... this is how many of us get our news. 

The problems with social media news have become a hot topic around 2016's presidential election season, but in my opinion, a bigger problem exists. It's well known that tabloid clickbait blows up on social sites, but when you go to validate that information, you go to search engines. 

This is where it gets spooky. Search engines are supposed to aid the fact-checkers of the internet, helping find the most relevant and truthful information. 

 

Google Drive Finder Plugin

The finder window should show unsynced folders, without having to go into preferences. 

I use the Google Drive macOS Finder Plugin. In order to save local storage space, I don't sync all of my Drive folders to my computer. Unfortunately this means if I'm looking for something I can't find, I have to look inside my preferences pane to see if the file might be in an unsynced the folder.

A better system would be to show the unsynced items within finder, so I could explore the directories, and only download what I need. The unsynced folders and files could be shown in grey, and a right-click could give me an option to sync it to my local device. 

Preferences Pane

Unsynced folders are shown in the preferences pane. This is great functionality, but it's not easily accessible. (read: user-hostile) 

In addition to being hidden away, the preferences pane lacks the ability to show files inside folder -- again going back to my use case where I'm looking for a file I haven't synced.

Finder Window

Unsynced files / folders should appear in the finder window.

Screen Shot 2017-07-11 at 11.59.00 AM.png

Sync (download) remote files / folders

Here's a masterfully crafted doodle of a right-click menu interface that allows for the download of offline (greyed out) items.