This week, we dig into specific tips and tricks to level up your craft game: how to leverage tools to make faster iterations, stay organized, and allow your mocks to easily scale over time. In The Sidebar, we dig into how to give design critique without having full problem or product context.

387: Design Craft Tips & Tricks

This week, we talk about designing with grid systems. In particular: when grid systems break, and what to do when they don’t align with our hardware screens perfectly. In The Sidebar, we talk all about design debt: how to work with it, pay it down, and eventually learn to accept it.

386: Designing with Grid Systems

This week, we talk about the real struggle of finding the time to do North Star design. It’s complicated! In The Sidebar, we try to find the digital equivalent of a Norman Door.

384: Finding Time for North Star Design

This week, we talk about “invisible design” – those products and experiences that go unnoticed when present, but would be immediately noticed if absent. In The Sidebar, we react to the new Tesla Model S refresh.

383: Invisible Design

This week, we talk about strategies and tactical tips for elevating a team’s bar to design high quality interfaces. In The Sidebar, we talk about how to transition from web to mobile design.

385: Raising Your Team’s UI Bar

Data Science for Platform Design and User Engagement

Building an AI Startup

Part 2: Building an AI startup

The search for a core problem

Zero to One: Notes on Startups, or How to Build the Future

This is one of the better reading experiences I've seen in an app. I'd argue that the left and right margins are a *tad* too large, but otherwise the vertical rhythm of the entire app is seamless. I love the snap-to-chapter interaction whenever you scroll past the current section; it feels great to use and has enough rubber-band tension to make it super obvious that you've transitioned to a new chapter.

Reading

NeuBible

See, once you get past the notifications request I can finally start to parse out what this app is and what kind of value it provides. "Follow people's camera rolls" sounds interesting, if not a bit on the extreme side of messaging. How will it work? Will I be automatically sharing my camera roll if I sign up?

I'm a bit hesitant, but continue on through signup.

As far as visuals go, Shorts has killed it. But that was no surprise once I realized the [Highlight](http://highlig.ht/) team is behind this product. Clean and simple with a bright and inviting color palette - nicely done.

Sign up

Shorts

Microinteractions like these add value to the entire user experience. Rather than being jostled around with static view changes, Stripe helps introduce people to their dashboard with motion. Animation also buys Stripe time to load data in the background while preserving an experience that feels snappy and responsive. 

Login

Stripe

Nicely done, Quartz: teach users how to use the app by having them actually complete the functions themselves. It’s clever and helps users build momentum in the onboarding experience.

It has become standard user experience practice to tell people that you’re going to ask them for notification permission before the popup appears. Quartz handles this nicely by explaining why notifications are useful. Opting in or out is totally fair game, but that emoji in the confirmation option is oh-so enticing.

Teaching

Quartz

If you are the person who engages with the onscreen prompt to scroll, you’ll see a beautifully choreographed animation as the photos on screen fall elegantly into alignment on your phone. I love that it’s not a timed animation, but rather that it corresponds precisely with your scroll speed.

Choreography

Carousel

The springy animations that trigger when you tap the ‘Compose’ icon in the tab bar is great – it looks slick and provides some nice interactivity.

What I thought was cool is that this view also responds to the accelerometer in the iPhone providing a subtle panning movement as you tilt the device. There’s not really much to say for this in the way of usability, but I appreciate the fact that there are people out there paying attention to these small things (even if most people might not notice).

Compose

Tumblr

If you press + hold the search icon in the bottom toolbar it will spring you straight to the search input. It’s a nice way to save users an extra tap, but more importantly it means people don’t have to readjust their hands in order to tap the search bar. It’s the small things, everyone.

Quick search

Instagram

Here’s what happens if you tap the lock icon.

Android 5.0

While this walkthrough design pattern is used by just about every app coming out these days, I’m struck by how Square moved beyond static imagery to incorporate gestures, movement and light animations to draw users in and help them to focus on each step’s instructions. Even the little things – like the way the birds bounce up and down on the roof in the third slide – add a significant amount of emotional connection for first-time users.

Walkthrough

Square Order

I had actually added two email accounts to Inbox before recording this screen, but I wanted to share the little slider here that lets users pick and choose which email accounts will be shown in Inbox. Here I only toggle one, but in reality it’s possible to pick and choose between multiple accounts.

At the time of this writing, the main thing holding me back from switching to Inbox (from [Mailbox](http://www.mailboxapp.com/)) is a unified inbox. I’m managing ~6-10 email addresses at any given time, and having to toggle between them can be tedious at times. Hopefully Google can find a clever solution here – I know it’s a tough one!

Signing in

Inbox

Blurring and springy physics (as we’ve come to expect from any Facebook-affiliated app) are a common thread that weave their way through the entirety of the Hyperlapse experience. Here, we initiate the app by giving permission to access the camera (which I’ve done prior to this recording).

Note the responsiveness of the button to my touch, the way the video pauses and blurs, and of course, the way the tutorial tooltip springs into action.

Hyperlapse

I’m biased towards apps that don’t hesitate to break away from default iOS design patterns, yet still retain usability and clarity. Here, Pinterest’s search filters add a nice touch that separates themselves from the standard iOS toggles.

Search filters

Pinterest

In previous versions of Foursquare, users needed to request permission to follow someone else. The nature of checking in and broadcasting your location necessitated a higher level of privacy for its users. With Foursquare’s latest shift, the emphasis is no longer on check-ins, but on recommendations. For this reason, following someone else no longer requires permission and is a low-barrier action that Foursquare hopes people will find useful.

This detail is small, but worth noting: when following someone (or…something perhaps), the transition of the checkmark element is quite slick. It’s certainly not a deal breaker, but I wish that there was an equal level of polish whenever I stopped following someone, rather than having such an instant, static state change.

Following

Foursquare

How about this: no more fumbling for the play/pause button while you’re driving down the road. No more tapping aimlessly on the bottom of your phone to try and navigate through your music.

I like this.

Tap anywhere on your screen to play or pause the song. Notice the light bounces of the waveform as the song’s state changes.

Play/pause

SoundCloud

This onboarding flow is so slick! No extra fuss or unneeded messaging – just a few simple steps to get started, the modal fades away, then users are greeted with this simple interface and tooltip on the main share button. You can tell how much time the designers put into the small details here – especially the language on the tooltip.

Create a moment – this introduces new users to this process of sharing moments, not fluff. This isn’t where you share your latest score on Candy Crush, no – it’s a place to share moments with your friends. I like that.

Onboarding

Path

You might need to watch this one a few times to catch everything going on during the login flow. Starting with a really slick loading indicator, Skype has built a really solid feel to their “first view” flow.

Once you hit the dashboard of the app, several elements bubble in – the navigation slides in from the right and the clouds pop up in the background while your profile picture bounces into view. It’s a lot of simultaneous movement, but it gives a very satisfying feel to the app.

Skype

Some Flickr designer out there came up with this genius pull to refresh animation, and I can’t get enough of it. It breaks the mold from every other iOS app, and plays so nicely with Flickr’s logo. We’ll see more of this in later views.

Pull to refresh

Flickr

Tapping the hamburger icon (are we still calling it that?) in the menu bar switches the calendar from monthly to weekly view. I love the animation in the header as the icon rotates and the new view slides into place.

Week view

Sunrise

You’ll have to pardon my recording software here for the black screen-flash. In real life, the animation when tapping into the search bar is smooth and seamless, responsive to your touch.

I love how Google embraces this sense of movement to help users feel a relative place, or position, within the app. Even when canceling the search, the original app interface slides effortlessly back into view.

Searching

Google Search

When viewing a secret with just a couple comments, we get a nice preview of what happens when you start to scroll. The image starts to fade, the text blurs, and the ‘rubberband’ tightens up, giving the user an almost physical resistance to the scroll.

Scrolling a secret

Secret

Just about every popup or menu in Paper can be closed by pulling up or down when there’s no more room to scroll. You can see this implemented on the publicity setting here when composing a new post.

Closing a popup

Paper

If you don’t use multiple Twitter accounts, it’s likely that you’ve never seen this interaction before. Pulling down on your profile pulls in the account switcher. I love the way the cover photo expands and blurs (a detail many other apps have begun to adopt).

I’ve had to watch this detail several times to really catch everything going on. The playful bounces and the way the profiles ease into view makes using the app and switching profiles too much fun.

Writing

Projects

Open source work