A conceptual outline for improving the visual detail of Google’s 3D imagery by combining it with other imaging sources such as Street View and contributor photos.Read More
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.
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.
For an up-to-date snapshot of future roadmap hurdles, check the github issues page.
Exploring a few different gestures which could be used to make Facebook’s mobile experience a bit more delightful for users, as they navigate through photo albums.Read More
An idea for the Open Source social media project, Mastodon, to show trending topics in an easily digestible interface, with less clutter than Mastodon’s competitor, Twitter.Read More
User interface should step out of the way of your content. Google Photos already hides your searchbar as you scroll. They should also hide the footer to give your photos the maximum attention they deserve.Read More
A workflow for sifting through the noise to find useful information, which could be used to build software to empower citizen journalists, investigators, lawyers, etc.Read More
We were promised indoor navigation long ago, and we’re still aimlessly walking in dense cities staring at our phones. Publicly available documents could help us get to that future.Read More
Expanding the capabilities of global environmental studies with already-existing satellite imagery. reaching corners of the world which lack sufficient environmental protections.Read More
A concept for Google to use their Street View imagery to figure out the positions of objects for the purpose of improving the positional accuracy of Google Maps.Read More
A concept for a social media site where users share their goals and their current plans for achieving those goals. The intent here is that your friends and network can help you improve your plans so you can achieve your goals.Read More
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.
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.
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.
By splitting each action into a "header" and a "body" section, it's easy to conceptualize a "collapsed" view for the Activity Feed.
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.
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.
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.
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.
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.
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.
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.
Unsynced files / folders should appear in the finder window.
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.
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, Meetup.com 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.
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.
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.
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.
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 Genius.com 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 Genius.com)
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.
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.
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.
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.
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.
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.
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.
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.
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)
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.