Immersive Scrolling: Google Photos

To make the photo viewing experience more immersive and delightful, Google Photos ought to hide the footer while scrolling, similar to how they already hide the header. (bottom orange bar and top orange bar, respectively) 

Note Mar 4, 2018 1.png

This would increase the viewing window for browsing photos, and everybody likes when the UI steps out of the way to prioritize their content.

Note Mar 4, 2018 2.png

A digression: I was pretty impressed by Gihpy when I went to make this gif. Great user experience and fun retro user interface design. 👏👏👏

Screen Shot 2018-03-11 at 6.16.09 PM.png

Journal Sources: Note Mar 4, 2018

Document Processing Pipeline

This is a conceptual outline of my personal process for converting source documents into useful, actionable knowledge. If we could build software that could facilitate these processes, it would be useful in many different disciplines: journalists, lawyers, researchers, and analysts are tasked with extracting meaningful insights from source documents. 

Example Uses

Screen Shot 2018-02-12 at 4.17.30 PM.png


This colorful explosion is the whole process outlined in this blog post. It traces the path of data transformation from source content into outlines and article forms. Let's break it down step by step. 

Screen Shot 2018-02-12 at 3.23.33 PM.png

[1] Source Documents

For the sake of the rest of the process, I've stacked all source documents in a single column, sorted chronologically. 

Screen Shot 2018-02-12 at 3.24.22 PM.png

[2] OCR Text (Optical Character Recognition) 

Automatic text recognition improves the searchability of the documents, and allows you to visualize keywords and trends over time. 

Screen Shot 2018-02-12 at 3.24.26 PM.png

[3] Annotations

I don't really like the word annotation, but these are basically extracted sections of the document, which are first highlighted and then pulled out for use elsewhere. 

Screen Shot 2018-02-12 at 3.44.42 PM.png

[4] Timelines

Eh, again, I'm not really sure what to call this either. Timelines (red) are basically selection ranges which can extend beyond the bounds of a document. I thought of them as date ranges, or calendar overlays, but documents typically don't have a temporal dimension, so timelines are just really big annotations. lmao. 

Screen Shot 2018-02-12 at 3.24.36 PM.png

[5] Outline

This is where things get good. This step is where you sort all of the annotations and timelines into a structured outline (blue), a semantic tree of keywords and whatever else. 

Screen Shot 2018-02-12 at 3.42.43 PM.png

Kinda like the infinitely expandable and collapsible bulleted list platforms, Workflowy and Dynalist. 


[6] Editorialization 

I'm not sure if there's a word for "to make into an article" but I think editorialization might mean that. if not please suggest better naming practices. words are hard.

Anyways, this step is where you convert the outline into an article. 

Screen Shot 2018-02-12 at 3.24.53 PM.png

We've come full circle. The green article with orange images is basically this blog post, with images extracted from my journals. Woah. 

Who wants to build it?

Let's build this! At the top of the article I listed a few parties which might find this tool useful to their operations. I'll happily help build this if I believe in your cause. Maybe if you're using this to deport immigrants or some spooky crap like that I won't help you out.


2018-02-12 (primary) 

Useful 3D Maps

We already have beautiful 3D maps, but the public lacks useful 3D maps. The photorealism of Google Earth and Apple Maps doesn't help us navigate indoors, explore building schematics for repairs and studies, etc.

The idea is to apply border detection and line drawing algorithms to existing photorealistic imagery (on the left of the Fig. 1.) so we can create the exoskeletons of buildings (middle of Fig. 1.) which can then be filled in collaboratively using floor plans and schematics from various sources. (public records would be particularly useful) 

 Fig. 1.

Fig. 1.

Indoor Navigation

Floorplans will prove to be highly useful in helping people navigate the complex corridors of skyscrapers and other dense urban areas. 

Fig. 2. 

X-Ray Vision with Augmented Reality

It'd be rad to use these highly detailed 3D schematics to give people x-ray vision through buildings with handheld devices or headsets. 

 Fig. 3.

Fig. 3.


I made a mockup of what this could look like while I was at a coffee shop in Deep Ellum, Dallas. Just illustrates how dope it'd be. 

Fig. 4. 

Possibility of Reduced Data Transmission

An additional benefit to the wireframe 3D imagery, is that if it only draws the borders of the buildings, it'll require significantly less data than the current photorealistic buildings.

However, complex internal 3D wireframes might bring resource usage back to parity. so whatever, I guess. 

Action Statement

Um, idk what we can do about building this, since we don't own the 3D imagery and there aren't any APIs for any of the 3D imagery services, as far as I know. So hit me up with ideas in the comments below 

Image Sources:
Fig. 1. -  Note Feb 4, 2018
Fig. 2. - Note Jan 8, 2018
Fig. 3. - Note Feb 4, 2018
Fig. 4. - Note Feb 8, 2018 pg 5/10

River Color Analysis

A system capable of detecting pollutants, sediment flow, and overall health of river systems by analyzing publicly available satellite imagery. 

Screen Shot 2018-01-31 at 12.00.39 PM.png

Below are a few examples how the visual data will be used for detecting pollution, algae blooms, and sediment content. 

Screen Shot 2018-01-31 at 2.18.15 PM.png


Build a computer vision system capable of tracing the path of a river as it winds downstream, and take cross-sectional image data for analysis. 

Screen Shot 2018-01-31 at 12.00.58 PM.png

On the question of the width of the cross section, it'd be cool to have maximum granularity to the pixel level, because data can always be grouped upward, but cannot be easily derived downward in granularity. 

Visual analysis of colors could be done manually, with a human-powered tool for annotating color changes. This could also be automated by using the color data (primarily the "hue" vector of HSL colorspace) to detect inflection points and sharp changes in values. 

Screen Shot 2018-01-31 at 2.18.41 PM.png

Feel free to hit up the comment section below with links to your projects or other projects that might help us build this!

Google Maps Object Positions

Theoretically, we can calculate the positions of objects using street view images.

This could be useful for all sorts of studies, from infrastructure coverage, to adding storefront signs to the map for better business location data. 

By using the position of the street view images, and we can calculate the angular difference of an object as the street view perspective changes, allowing us to add the position to the map. 

Side View

Screen Shot 2018-01-09 at 2.17.11 PM.png

Plotting to the map (top view)

Screen Shot 2018-01-09 at 2.17.17 PM.png

Global Scale

This concept could be automated to scale to all street imagery if we automated the object-detection portion using neural networks and computer vision algorithms. 

Screen Shot 2018-01-09 at 3.30.47 PM.png



Source: 2018-01-01 Digital Journal

Goals Social Media

This is an idea for a new social media platform dedicated to helping each other achieve our personal goals. People helping people, extremely wholesome. 

Users create goals (green), and they build a backwards tree structure of pathways (orange) that can lead to achieving that goal. 

 Fig. 1. 

Fig. 1. 


Below is an example diagram of my goal to move to the Big Apple. Jobs, Mentors, Roommates are all possible entry paths. The comment illustrates that we might be able to help our friends connect the dots to achieving their goals. 

 Fig. 2.

Fig. 2.


Each node (goals, dependencies) supports comment threads, which are collapsible threads with the ability to reply and to "like" any comment. A "soft dislike" button could allow users to dislike a comment to reprioritize its display priority, but it wouldn't affect the "total likes" value. (this is in contrast to a "hard dislike" which subtracts from the like count, similar to reddit's upvote/downvote system) 

Comments are pretty self-explanatory, so don't toil over trying to understand this messy stream of consciousness below: 

 Fig. 3. 

Fig. 3. 


Ugh. I hate this part. 

Maybe people could just optionally pay like $5 a month for this if they want, if enough people do that, I won't have to sell out to advertising companies to sell your data to the capitalist class. 


References (to my own journal) 

Fig. 1. - Note Dec 22, 2017 (5/6) 
Fig. 2. - Note Jan 28, 2018 (6/-)
Fig. 3. - Note Dec 22, 2017 (6/6) 
Thumbnail - Note Jan 28, 2018 (5/-)

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.

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. 

Meetup Week Calendar

When looking for local meetups and events, you have to consider your own schedule. Work, school, business meetings -- life often gets in the way of your networking efforts.

To help users see which events fit their schedule, could deploy an improved calendar view. Week view calendars visualize time of day vertically, and day of the week horizontally. This is perfect for seeing which events fit within your available blocks of time.

Concept sketch

[Fig. 1] Sketch made with the Google Keep mobile app

From screenshots I built a block-frame design (Fig. 2.3), as well as a blank slate (Fig. 2.4) to use as the canvas for the calendar interface.

[Fig. 2]

I adopted patterns from Google Calendar's week view, where the seven columns for each day are the same width, and the far left column for time [hh:mm] is just a bit smaller.

[Fig. 3]

The initial mockup contained a light color pallet that was difficult to see, so I darkened the colors to add visual contrast. [fig. 4.1] 

I also removed the deselected groups [fig. 4.2], since it's more useful to only show groups the user has selected for viewing.

[Fig. 4]

[Fig. 5]

Genius Chords Viewer

You're having a jam session with your friends. When you look up song chords, every search result comes up with ugly, non-mobile-friendly sites.

This is a plea for to help bring song chords into the 21st century. 

Given their strong community of contributors, it'd be reasonable to imagine that some users would be willing to contribute chords, so others can learn how to play the songs.

Here's a prototype of this idea, along with some related diagrams.

I tried to find a toggle on their website, to conform to their current design, but I came up empty handed. I decided to pick Google's Material Design toggle slider, as the Genius design somewhat resembles Material Design with its flat, block-oriented UI elements, as well as its bright colors. (The purple used in this post is similar to the pastel purple used on 

Rebuilding the Google Material Design toggle switch.

I would've liked to have built an animated .gif of this animation, but this diagram will do for now. Basically the chords (purple) ought to slide out from underneath the lyrics (grey), with an "ease in" behavior for both opacity and position.

Animation overview.

In addition to the animation helping the users to make sense of the relationships between the chords and lyrics, whitespace helps to separate chord/lyric pairs from one another, to reduce confusion.

Block spacing.

Checklist "Share" Interface

To make it easier to share music with friends, I recommend Spotify take some hints from Snapchat's checklist interface, which - in my opinion - is part of the reason snapchat is so engaging; because the sending mechanism is so simple and powerful. 

I'll walk through my UX design process workflow in this post, but if you'd like to skip to the completed designs, click here.

 Overview of prototype workflow, combining and synthesizing existing elements to make new elements.

Overview of prototype workflow, combining and synthesizing existing elements to make new elements.

First I outlined screenshots of Snapchat. The checklist interface is incredibly simple, but I thought I'd build an outline of it just for fun. 

Formal Analysis of Snapchat checklist.

After analyzing the visual architecture of the Snapchat interface, I outlined Spotify's "send" window. This helps me preserve the padding  width between the edge of the screen and the window.

Spotify Mobile Share Window

To make these outlines, I use the rectangle tool, bright colors, and low transparency so I can see the background and the overlay shape. Once I get the shapes pixel-perfect, I add a high-contrast stroke to better visualize the shapes.

Page navigation showing the user path to the share menu.

After revisiting the design, I made some minor changes to improve the visual continuity and overall prettiness of the checklist. I also added an extra "share to my feed" checkbox, to merge the functionality of the above "post to..." & "share to..." options all into one single interface, which requires fewer taps by the user. 

A few iterations of the checklist design. #2 is simplified and cleaner, #3 adds a scrollbar on the right edge.

Please let me know what you think of this design in the comment section below, I'd love to hear your feedback and I'd be willing to make changes and credit the changes to you on the blog. Iterative design is about constantly improvements, and I'd like to incorporate that into this blog as well. 

Feel free to connect with me on Twitter, LinkedIn, and Angel List.

Spotify Notification Drawer Player

In an attempt to reclaim some wasted space, I redesigned some of the UI elements in the Spotify Player in the Android Notification Drawer. The album art is larger, unnecessary text has been removed, and playback buttons are closer together to make them easier to reach with one-handed operation (sorry lefties -- maybe there can be a left-hand mode with the buttons on the left)

Hopefully this design looks a bit more balanced, let me know what you think in the comment box below!


  • Quickly sketch idea in my journal while sitting at a stop light on my morning commute.
  • Take screenshot of the Spotify player. (again, while on my commute)
  • After work, take another screenshot so I don't have Google Maps navigating in the background.
  • Take photo of journal page.
  • Import photo into Affinity project.
  • Make crude sketch in Affinity. (Fig. 1.)
  • Build blockframe by placing transparent rectangles on the screenshot, then colorizing them. (Fig. 2.)
  • Copy the original blockframe & start prototyping the new design. (Above)
 Fig. 1. Digital wireframe sketch with markups in red.

Fig. 1. Digital wireframe sketch with markups in red.

Fig. 2. Iterative blockframe design using transparent objects for placement.

Site Preview in Search Results

This is a user interface mockup for a search result page that previews fully interactive mobile pages, in aim to improve the speed at which users can access relevant information.

It's not perfect, and perhaps it addresses a need that's not there. But with a few tweaks, this could be A/B tested to validate its usefulness. Just an idea.

Heres a blockframe comparison between a typical search results page interface, and the proposed interface. This is useful to weigh the pros and cons of each, for example, the left can show more results in a single viewport than the right. However, the right allows people to look over the site instead of having to visit each individually.

Initial concept sketched in my journal.

Photo of my Affinity Artboard, which somewhat illustrates my workflow, as I work from top to bottom.

Screen Shot 2017-04-05 at 7.25.20 PM.jpg


A vector illustration of my typical workspace. Coffee, Macbook Pro, Wacom Tablet, and my 7th Moleskine Grid Journal.

For the curious, here's a blown-up view of the journal sketches. I drew up a montage of diagrams from recent pages of my current journal. 

I'll explain what a few of these diagrams mean, if you're interested: 

[1] Midway down the page on the far left is a camera pointed at what appears to be a river. This is a concept for using surveillance cameras and computer vision technologies to analyze environmental changes, such as river flow rate, flood patterns, changes in foliage, weather patterns, etc. I hope to write a blog post about that soon.

[2] At the bottom of the left page is a few hierarchy diagrams. This is loosely based on an idea I have to map out power structures, political power, economic power, etc. The left diagram illustrates a highly centralized system, with the majority of the power being held by a single entity. On the right theres's loose central oversight of highly distributed powerful entities. The inequality operator is there to show my personal preference towards decentralization. 

[3] Middle-right is a nested diagram based on an idea to show local governance and representatives based on one's location. A visual guide of who's in power could help increase civic participation, as we'd know exactly whose door to go knocking on when things aren't done right.

[4] Bottom-right is a diagram of my optimal workspace location. Basically a desk right next to a window overlooking a dense city block. The vibrant movements of cities offer creative inspiration to me, and if I could just look down and see the city, that would be incredible. Gotta hustle to get there, I suppose.

The scribbles in the middle and on the right edge are what I do to get my ballpoint pens working.  I usually do this no matter if my pen's been acting up, since I'd prefer scribbles than a gross-looking attempt to write text or draw something. 

UX Projects:

User Interface / User Experience Design is what I usually what I'm working on with the above workspace setup. Here are some of those projects!

Improved Rating System

This is a concept for a rating system centered around a collapsible hierarchical list, so users can rate sub-items within categories. This enables users to add nuanced opinions without writing long reviews, which saves time for everyone. Less time stressing about writing a beautifully written review without typos, and fewer internal man-hours parsing poorly written reviews.

Restaurant Rating Example

Comparison between a written review and a multi-level rating system.

Not only is the image on the right easier for humans to read (given a few UI tweaks and different visualizations) but it's also easier for computers to understand. This makes data analysis much easier, since there's no need to extract nuance from written reviews. 

This concept could be deployed effectively for nearly all rating systems. App Store app ratings, Google Maps location ratings, Amazon product ratings, LinkedIn job ratings, etc. 

Suggested applications from left to right: Google Play Store, Apple App Store, Google Maps, Apple Maps, Amazon, Netflix.

I spent some time looking for the best user interface for nested lists and hierarchies. I used the macOS style for my mockup because it's simple and clean, but if you know of any prettier interfaces, please drop me a line in the comments below! 

View this article on Medium.

Google Project Sunroof

Google's Project Sunroof is a tool that estimates solar potential of buildings by analyzing 3D models of buildings from Google Maps, as well as other factors. I've compiled some feature requests that could improve the service.

On this page:
- Dark Mode

Dark Background

With the current color scheme, the highest value data point is also the least visible. Yellow intuitively signifies solar potential, but the light grey background makes yellow very difficult to see.

Here's a mockup of the data with a dark blue background, which makes the data much easier to see. Built with Google's own map style maker, I used the following parameters: roads = 100%, landmarks = 0%, labels = 0%, color = "Aubergine"

If you're aware of any similar tools designed to estimate solar energy potential, please link to them in the comments below. I'll try to add them to, my favorite site for finding alternatives to specific apps and services.  


Here are some feature requests and interface mockups for, a site designed to assist job-seekers by making companies and salaries more transparent.

On this page:
- Search Histogram
- Wage Gap Analysis

Salaries > Search Results > Show Histogram

Replacing the horizontal bar with a histogram serves both an aesthetic and pragmatic purpose. Histograms are prettier, universally understood, and allow the user to recognize patterns. (i.e. entry level positions in your city are significantly lower than the national average entry level position, but the mean salary is comparable to the national average)

User interface mockup: 1) show distribution histogram of submitted salaries, 2) reveal salary with cursor hover.

Companies & Reviews > Company Info > Wage Gap

Transparency is good. Sometimes transparency seems bad, but that's only when it reveals the bad stuff hiding beneath the surface. To read about the benefits and dangers of increased wage transparency, check out this article about Buffer's transparency initiative.

This feature, if it could be properly executed, would illustrate the wage gap between the lowest paid worker and the highest paid executives. Submitted salaries (green)  would be compared to the estimated pay of the highest paid executives based on variables including (1) yearly earnings of the company (this field could be crowdsourced, for users who want to do some digging online) and (2) CEO-worker pay gap in respective country, state, or other district where this data is readily available.


Show Album Artwork

Feature request for Spotify to show Album Artwork in the list view, to improve usability. This would allow users to quickly scroll through a list to find specific songs based on the color of the album, instead of trying to speed-read song titles. 

Related links: Twitter thread with links to the Spotify Community request, where pretty much all of the comments are bashing Spotify for not having this feature.