As Lead Designer of iCapps I challenge myself to be good in more then just designing nice pixels. Of course designing awesome Mobile User Interfaces is the most important task. But for me, this is a wide term. It’s taking the client on a inspiring journey: conceptual thinking, wireframing, User Experience Design, User Interface Design, prototypes, build & test the app and adjusting.

There are so more other things: meetings with clients, manage our social media, following up projects, working together with 2 great designers, following new trends, …

All this above would be way more difficult if I wouldn’t be active online. For me it’s very important that I can build a network. My network keeps me up-to-date. I love Twitter. I love the people that I follow and the ones that follow me.

If you search for my name on Google you’ll see in one glance that I’m a designer. You can see what I do. Day in, day out.

3 things where many designers failed

2 months ago we placed a job opening on our website for a Mobile User Interface designer. I received many applications.

Here are 3 things that bothered me.

1. You are a designer, so I want to see your portfolio. Give me your portfolio URL as one of the first things in your mail. Not on page 3 of your PDF resume.
   You don’t place a ‘See my work’ link at the bottom of your website on page 3, right?
2. Even if you are finishing school, you should be able to show me mobile designs of projects you worked on. It can be fictional projects. It can be real projects for clients. Take a look on Dribbble. 50% is fictive.
3. When I read in your email that you want to join our team, it‘s good that you’re telling me how passionate you are. But when I search your name on Google and I can’t find any networks you are active on. Then I don’t expect you to be passionate.

For me a passionate designer is someone who breathes design. Someone who tweets more than once a month, posts shots on Dribbble or Behance, shares articles or write them. Someone who is online.

Being passionate doesn’t mean you are a good designer. But it reflects the eager to learn every day.

In the past years I had many job offers because of a few Dribbble shots that hit the popular page.
San Francisco, New York, London, Barcelona… Many of them were great opportunities but I luckily I had some chances in Ghent and Antwerp too, because I didn’t want to leave Belgium.
-> Opportunities because I’m active on social platforms.

In the past years I’ve made many connections with designers from Belgium, but also from all over the world. Some became good friends.
-> Opportunities because I’m active on social platforms.

In 1 year, 2 iOS developers joined iCapps because I found them on Twitter.
-> Opportunities because I’m active on social platforms. And they are too of course.

My network is growing, day after day. There are many opportunities out there. Many information. Many connections. I have the chance to connect with all of that. And the other way around.
-> Opportunities because I’m active on social platforms.

All startups are screaming: Stop talking, start building.
Let’s give that a little twist.

Start talking. Tweet more. Post more. Follow interesting stuff. Just, be active online.

I’ll share a few resources and interesting people to start with.

On Twitter:

• https://twitter.com/maxvoltar
• https://twitter.com/yummygum
• https://twitter.com/MaximeDeGreve
• https://twitter.com/KounterB
• https://twitter.com/schneidertobias
• https://twitter.com/bdc
• https://twitter.com/brdrck
• https://twitter.com/flarup
• https://twitter.com/miekd
• https://twitter.com/JulienRenvoye
• https://twitter.com/thomasjoos
• https://twitter.com/kerem
• https://twitter.com/_dte

More: https://twitter.com/denniscovent/following

Resources:

• http://sidebar.io/
• http://pttrns.com/
• http://inspirationmobile.tumblr.com/
• http://iconmonstr.com/
• http://dribbble.com/
• https://www.behance.net/
• http://androidniceties.tumblr.com/
• http://pixxel.co/

Dennis Covent

My Twitter:
https://twitter.com/denniscovent

Website:
http://denniscovent.com/

Dribbble:
http://dribbble.com/denniscovent

Linkedin:
http://www.linkedin.com/profile/view?id=292376981

Follow iCapps on Twitter:
https://twitter.com/icapps

Thanks Maxime De Greve to double check and proofread my post.
And thanks Nick Looijmans to improve some parts.

As little design as possible

It’s been one year since I first wrote about Sketch. Since then, Sketch released Mirror, Background Blur, and made many improvements for Artboards, SVG support and speed. All of these considerably allowing us designers to adapt to the future of design — a world with as little design as possible, and where user interface design is at the forefront. It makes us focus on responsive design rather than photo editing. Interactions and animations instead of faux textures. Sketch is the tool that makes our workflow 10x faster so that we can move on to other aspects of design.

Artboards

Over the year, I fine-tuned my design process. Now, I design straight for Mobile, then work my way up to Web. I have found that using Artboards was the most efficient way to create a responsive design.

Sketch Mirror

Mirror works beautifully with Artboards. You can quickly view your design from your iPhone and swipe between artboards.

Vectors and SVG

I can’t tell you enough how crucial it is to work with vectors. As visual designers, we shouldn’t be happy with just using PixelLove and Streamline out of the box. We gotta customise them! Give them love. Add colors and re-shape them for the context that you design in.

SVGs are growing in popularity for good reason. You can colour them, animate them and they’ll look sharp on any device. We’re finally starting to understand them.

Background Blur

This may seem insignificant, but it’s not. When you’re designing for iOS 7, you don’t want to manually blur things. Blur is an essential method for designing with depth and context while keeping all the natural colors. Just using a 80% black layer (to make the text readable) will completely dim the colors. Instead, you can dim less and use Blur.

iCloud Support

I’m a visual person. I love to organize my designs in a very visual way. That’s why I stopped using Dropbox to browse and started using Mavericks’ tags.

Keyboard Shortcuts

Since we spend an obsessive amount of hours designing in Sketch, we gotta work more efficiently with Keyboard shortcuts. Here’s a great list: http://sketchshortcuts.com

A Growing Community

Sketch is powerful out of the box. But like any small team, they have to prioritize on certain features. That’s where the community comes in.

Sketch Generator — Just like Photoshop’s Generator or Slicy, this neat plugin allows Sketch users to export assets merely by naming its layers.

Symbols — Love to re-use elements in your design? This plugin is for you

Here’s a full list of all the plugins available.

Fantastic Resources

One of the early complaints about Sketch was the lack of downloadable resources. Well, no more.

Teehan+Lax released a very complete iOS 7 Sketch template.

I also use Tap+Apps iOS7 Template because they have other UI elements and the Keyboards broken down into layers.

For more Sketch templates, go to Sketchmine.co, SketchAppSources, Sketch’s Website

Discuss on Designer News

Don Knuth, one of the fathers of modern computer science, has this to say on email:

I have been a happy man ever since January 1, 1990, when I no longer had an email address. I’d used email since about 1975, and it seems to me that 15 years of email is plenty for one lifetime.

Email is a wonderful thing for people whose role in life is to be on top of things. But not for me; my role is to be on the bottom of things. What I do takes long hours of studying and uninterruptible concentration. I try to learn certain areas of computer science exhaustively; then I try to digest that knowledge into a form that is accessible to people who don’t have time for such study.

His distinction captures a remarkable fact for those of us who keep our email tabs open all day: email allows anyone to interrupt you, at any time, for any reason.

Imagine describing the analogous interaction design pattern for old-school snail mail to a version of yourself from thirty years ago, before the widespread emergence of email and the web: “Well, instead of having your mail delivered once per day, it will be delivered constantly, at all times, with each new piece of mail. And each time a new piece is received, the postman will call you, and tell you who the mail is from, what it looks like it’s about, and so on. If you want, you can have the postman open the mail, and you can hear its contents.”

Absurd, right?

Gmail has acknowledged this absurdity with its recent introduction of tabs; emails sorted into the Promotions tab do not trigger the same kinds of notifications as emails sorted into the Primary tab, etc.

But when you step back for a moment, it’s easy to see how the problem is much, much bigger than just email: the notification design pattern has crept its way into the interaction design of almost every major tech product we use.

New text? Buzz buzz.

New comment on a facebook thread? New notification.

New mention on twitter? New notification.

To be fair, not all notifications interrupt attention at all times: whereas the buzz of a text message will probably distract you no matter what you’re doing, notifications in things like facebook and twitter are just a bit softer and more customizable attentionally, and won’t necessarily interrupt you, unless you hear an associated sound, or opt in to a buzz on your phone, etc.

The problem is, whether they happen to interrupt your attention or not, they reinforce a cycle of behavior that benefits the app creator, but damages you, as a user. I call it the “(Interrupt)-Check-Interact-Reward” cycle.

Here’s how it works—if you’re familiar with classical conditioning, this story will be a familiar one to you:

Let’s start with the end of the cycle since it’s the most straightforward. Using facebook, Gmail, twitter are satisfying activities; that’s what keeps us using them. Call it fun, productive, pleasurable, whatever: using the software is a positive experience by our definition, and that’s what keeps us coming back. This is “Interact-Reward.”

Notifications that interrupt your attention take this cycle outside of the world of the app. Instead of opting to visit facebook.com and have a rewarding interaction, facebook decides it’s going to interrupt whatever you’re doing, and notifies you of some activity. Suddenly, the behavior that you go through to get the reward looks slightly different: you are interrupted, you check your notifications, you complete your interaction, and you get your reward. This is Interrupt-Check-Interact-Reward.

Already this starts to make us a look a bit like Pavlov’s dogs. Whatever pleasure we got out of the interaction on the app originally, we learn to associate with the new stimulus of the notification itself. We start to crave the notification for its own sake, instead of the interaction that the app is designed for.

But it gets worse. The “leaky,” soft notification that I referenced above, which is how facebook and twitter operate by default, doesn’t always interrupt you when you have a “notification.” This is where the parenthetical “(Interrupt)” part of the cycle comes in. Associating the notification with the reward of using the software and then withdrawing it some of the time reinforces the desire for the Check part of the cycle.

Does that make sense? Imagine if your phone only notified you of texts some of the time, and you didn’t have full control when or why. You’d get caught in a loop of wanting to check your phone for texts, wondering whether anything had happened since the last time you checked. And if, just often enough when you checked, someone new had texted, this behavior of Checking would be reinforced by the pleasure of seeing the new text, and the Checking behavior itself would come to be what you craved.

This is why facebook stopped emailing copies of notifications to people’s inboxes by default: they learned that emailing people less about what’s happening in the app actually keeps them coming back more. If the Interrupt always happens, why bother Checking? This is like randomly checking your phone for texts even though you haven’t noticed a buzz or notification. You might do it once in a blue moon when you’re bored or an awkward situation calls for it, but since the Interrupt always happens, it’s what you associate with the pleasure of receiving a new text, and you don’t feel a compulsion to constantly Check. Once the Interrupt is selectively withdrawn, the Checking behavior is what becomes associated with the pleasure of the interaction.

Notifications start to look like a great way to keep you glued to an app, and not such a great way to serve your interests as a user.

Indeed, facebook, Gmail, twitter, et al. all suffer from the same fundamental dilemma: they profit from advertising, and the longer a user spends on the site, the more ads they can be served. So on the one hand, in simple terms, it’s their absolute goal to maximize time on site for every user.

On the other hand, time on site is clearly inversely correlated with good design for a whole host of tasks from the user’s perspective. All other things being equal, the longer it takes to compose an email in gmail, to search for an old tweet, to look up a friend on facebook, the worse, for the user. Longer times indicate more difficulty doing whatever it is the user intended to do.

Put another way, to maximize user happiness/productivity/goals, what is the optimal number of times that a user should check gmail, facebook, or twitter, in a day, for example?

Of course, this question has no answer—not all users are alike, not all days are alike for any given user, and so on. But app designers and the companies who pay them have to strike a delicate balance between their short- and long-term interests: in the short-term, their interests are heavily aligned towards maximizing the number of interactions that you have with the app, regardless of whether or not it’s to your detriment. In the long-term, ruthlessly squeezing logins out of you may hurt them if they fear that it will eventually cause so much fatigue in you that you’ll abandon the app, having recognized that it was all just a con game to get you to login again, and again, and again.

But is that a realistic fear for facebook, twitter, Gmail? I am reminded of this brilliant piece by Alexis Madrigal on the “machine zone.” It’s the place that MIT anthropologist Natasha Schüll says that slot players go when they’re at the slots, and, perhaps surprisingly, it’s not about winning money at all: it’s a hypnotic, trance-like state where distinctions between you and the machine, even feelings of time and space, feel like they have fallen away. These are the gamblers’ words, not mine.

Reading Madrigal’s piece, I wonder: are modern web products the most sophisticated addiction machines in the history of mankind? Schüll’s book is called Addiction By Design, and it seems clear to me that notifications in most modern web products are designed to addict, not to help us live better lives.

The test for the appropriateness of the notification design pattern is simple, because the modern mobile phone is essentially just an always-on notification machine. Wherever we see notifications, we should ask: would it be absurd if, instead of receiving these notifications, I received a phone call or text letting me know of the same activity? If the notifications fail this test, they are probably designed to addict, as well as or instead of being designed to be informative.

This is not an entirely fair test, and it is oversimplifying. A phone call is not a text is not an email; there is a time and place for all sorts of information and interruption. But I think it still stands as a useful thought experiment to begin to distinguish between well-designed notifications and those that are designed to create a coerced, unbreakable loop of app usage.

Let’s kill notifications that exist to addict and set each other free from the never-ending arms race of cheap con games to compete for user attention.

We set out to build software to help communities we are passionate about, to solve their problems; what a travesty it would be if we allow ourselves to become the designers of ever-more-sophisticated ad-serving slot machines.

Sweating the Details

A multi-part story about reimagining, redesigning, and re-engineering Yelp’s most visited page.

In February 2014, Yelp officially launched its redesigned business page. A culmination of many months work, the new design also sets a new tone for the rest of Yelp.com’s user interface. The business page design and the new look and feel marry many influences and goals, taking cues from our mobile apps, our classic interface, and a very healthy respect for our readers, writers, and photographers.

Whether it’s god or the devil hiding in the details is up to you, but one thing is certain: without sweating the small stuff, every design and interaction falls flat. Our vibrant community is what sets Yelp apart from the others and we want the experience of using our products to feel amazing. To say that we paid attention to detail is to sell it a bit short: we’ve exhaustively considered every element of our new business page design—and by extension, Yelp’s new look and feel—with an eye for consistency, beauty, and usability.

Defining themes

Yelp is, always and forever, dedicated to sharing and reading stories about great local businesses. While many people are turning to Yelp to read our community’s rich reviews, they’re also relying on photos to help them get the full picture. At the same time, Yelpers take a lot of pride in crafting well-written reviews and sharing photos that perfectly capture their stories, and we wanted to do an even better job of displaying this hard work, to make the experience more satisfying, whether you’re writing or reading.

The old design first debuted before the smartphone revolution when there was only one platform for Yelp: the desktop web. But with the advent of smartphones and native apps, Yelp can now be accessed anytime, anywhere—which means there are many contexts for Yelp. And while our mobile apps do an amazing job of displaying valuable information and beautiful content, the context in which you use and view a mobile application is very different from the context in which you use a desktop computer.

With this in mind, we created two themes to guide the new design.

Honor content, honor context.

Nothing in the design should get in the way of helping readers consume information and content. Everything in the design should be optimized for the desktop web.

Early explorations

Over the past ten years, Yelp’s stayed ahead of the game with continuous product improvement and new features. This made Yelp the go-to source for finding local businesses, but didn’t always leave loads of time to focus on design consistency. Prior to the business page redesign, Yelp’s desktop web was a mishmash of different grids, styles, and elements. Many problems had been solved in different ways, creating an experience that felt mostly right, but left our team with the lingering feeling that Yelp wasn’t as perfect as we knew it could be.

As design began, we explored two major directions: one with a previously designed full screen header and format, and the other staying inside Yelp’s then current header and body containers.

These early explorations are essentially sketches, and they helped guide initial conversations with our team. Would we undertake a massive redesign of this page and all of Yelp’s look and feel? Or would we opt for a faster project that was essentially a reorganization of what we already had?

We decided to go for broke, and revamp all aspects of Yelp’s UI.

Mobile’s influence

Yelp’s apps on iOS and Android offer exceptional experiences, driven by design that is lightweight and lets the content sing. After our initial explorations, one clear goal was to better align the mobile and desktop interfaces, for while the apps continued to be at the forefront of superior mobile design, we were excited to update the business page to better represent best practices around information display.

Screen size constraints are often cited as a major reason why mobile experience seems clear and to the point: without big desktop screens to fill with clutter, the mobile experience gets to the core of what a product is, its identity, its value. On the desktop, it is always tempting to show more, show everything, because there is a lot of space to fill. Yelp has always had the best local business information on the web, but our presentation of it was dense and unfocused.

As our design unfolded, we took cues from our business page on the app, creating experiences that feel unified and on brand.

Preparing the canvas

Design works best within pre-established constraints. UI design in particular relies on uniformity and predictability—without these two traits, a designed system falls apart and fails its users.

Prior to the redesign, Yelp didn’t have a foundational grid system or a defined typography scale. We needed both, but what system to use? There are many off-the-shelf frameworks available on the web today and we explored static options like 960.gs and responsive systems, like Foundation.

At the same time, we were working to solidify a typographic system that would help us create a pleasing vertical rhythm. Our old design had increments of 5 and 2, which lead to a system that was mathematically easy to understand and develop, but difficult for the eye to predict. Yelp is a product based on the written word, and so it was essential for us to create a system that made reading pleasurable—for us, that meant switching from our old type system to a traditional typographic scale, based on increments of 6.

Happily, we found a baseline grid that worked perfectly with our new system. With those elements in place, we decided to define our own horizontal grid. We set the number 6 as our base and created a 12 column grid with gutters set at 30 pixels.

The fun part

Browsing through a business page should be as easy and straight-forward as reading a newspaper article: essential, need-to-know information at the top of the page, with each subsequent element revealing ever more detail. The hierarchy we needed was clear from the beginning. The fun part was fine tuning each element.

Above the fold

There’s much debate about whether or not a fold exists on the desktop. Do users scroll, or do they bounce if they don’t see what they want exactly when they want it? The truth is, it’s a mix. Important information does need to be at the top of the page. You have to inspire confidence in a user in order to get them to scroll, which is why we’ve put all of our key information above the fold, and display more (and bigger!) photos.

Color

Yelp is, happily, a vibrantly colored company. Our red might not be as identifiable as Coca Cola’s—yet—but it’s a beaut. Our old design had a mishmash of colors in its UI, the result of repeatedly solving the same problems, and legacy elements (design debt, in other words).

Since a primary goal is giving our users’ content the main stage, we decided to make our color palette a bit more neutral. The red stayed, but we’ve moved entirely away from our old oranges, yellows, and aquas. Initially, we explored a more monochromatic look to match our mobile app, but after living with it for a few weeks, felt that it was too cold for Yelp.com. We’ve settled on a subtle palette of warm greys to compliment our bright red, link blue, and all of our content.

Making reading awesome

Reading is core to the Yelp experience, and with the new design, we made some major optimizations.

First, we raised our default type size, up to 14pt with a nice 18pt line height. It’s big enough to see sitting a comfortable distance from the screen, while still allowing us to show a big chunk of content in a single viewport. We also banished type smaller than 12pt.

Second, we decluttered the review reading column, moving user passports and actions to the left, giving an uninterrupted reading experience. We also made the user actions available only when hovering over the review div, so that you only see them when you might need them.

We even optimized the review column width. Displaying an average of 55 characters per line, your eye can easily track what you’re reading with as little eye movement as necessary—meaning that you won’t be straining to read those long articles anymore.

Designing the new Yelp business page was a huge undertaking, and there is much more to the story of how it went from concept to completion (if anything is truly ever complete). Stay tuned for more from our designers and product managers.

You can read more about the page’s improved consumer features on the Official Blog. If you’d like to know how we built it, check out the Engineering Blog, where you can read about our new styleguide.

If you like how much attention we paid to all the small stuff on the new business page, maybe you’re the kind of person we’d love to work with. We’re hiring UI Designers, Product Managers, and more.

Part 2 in a series. This process identifies user needs, prioritizes needs to work on, and narrows the scope to the best areas to design for.

Identifying Needs

Meet Jared.

Jared is a snap-and-go kind of photographer.

“Sometimes I’ll take photos. Share them. Look back on them. But it has to be easy—managing my life can’t get in the way of me living it.”

Jared has 4 important needs in how he handles photos.
He needs:

• a single place for everything—Jared stores different sets of photos across different services, and he often forgets what is stored on where.
• convenient security—He’s a casual user who doesn’t transfer or back up his photos at every new album, but he wants to know his photos are safe in the event of any hardware malfunctions/theft.
• an easy way to share—Jared takes pictures to share memories with friends and family, some of whom are less tech-savvy. When Dropbox requires recipients to download the app, he gets frustrated with onboarding his aunt to Dropbox over the phone.
• organization—After a week of adventures, Jared dumps batches of photos into his libraries, often without any effort in organizing them. He finds his resulting library time-consuming to view and sort through.

I’ve got to help Jared! His needs are a common denominator among 95% of the 16 people I’ve interviewed about their photo management habits.

How can I resolve those needs?
I’ll start by breaking down his broad needs (epics) into sets of smaller needs.

Breaking the epic into smaller needs allows me to narrow the scope of this iteration. A narrower scope means I can closely validate each subsequent step of my design process to a shorter and more specific checklist of needs.

(Alternatively, accounting for long lists of needs has dangerously led to a compromised solution/feature creep/downward spiral of overdeveloped features that people don’t actually need.)

Prioritizing Needs

Let’s break down Jared’s needs.

Jared’s needs as epics:

The most important story to Jared is keeping track of his photos in one place, and easily sharing those photos to his friends.

I’ll be resolving this story, one step at a time.

To narrow the scope of this iteration, I focused within the pink epic, then focused on the two needs that didn’t have an existing fix. These two needs became the scope of the project, and they were broad enough to be broken down further:

The smallest needs (yellow) are now specific enough to begin designing solutions for.

Solving Needs

How do I think about design solutions here? I use job stories to translate needs into design jobs.

I’m utilizing this process described by Intercom, who:

“frame[s] every design problem in a Job, focusing on the triggering event or situation, the motivation and goal, and the intended outcome.”

Sample job story:

RECAP:
The two epics of the scope have been translated into a list of design jobs. The list now serves as a checklist of everything my design solution (the new feature) needs to accomplish.

Building against the checklist ensures I solve for the scope. Nothing more, nothing less.

How do I begin building?
Building a new feature can be daunting. I use task flows as a starting point to outline the system of my suggested feature. A task flow is a walkthrough of the interactions a user takes to complete a story. It’s analogous to mapping out a blueprint of a building before I build it.

Task flows are a tool to help us think through the design before a feature is actually developed. They allow us to interject the user into the flow of the application and determine if the conceptual model agrees with the user model.
— “rk” on ux.stackexchange

RECAP:
The task flow for the new feature needs to fulfill the two epics of this scope:

• grabbing all the things
• automatically backing up all the future things

We’ll call this feature “import settings”.

Dropbox’s current flow, and where this new feature would fit:

The task flow of Import Settings should resolve Jared’s most important story (the following is a very specific version of it):

Jared wants to add photos from his Facebook to his Dropbox. He wants to know that his future Facebook photos will continue to be transferred and kept safe.

Task flow:

This bird’s-eye view of a task flow helps me in two ways:

• account for all of the screens I’ll have to design for in the next step.
• see where things are getting overly complicated (requiring lots of interaction). These areas are opportunities for simplification, ensuring an easier experience for the user (and servers!)

Task flows give me the chance to plan an efficient system before I mock it up in higher fidelity.

Looking at task flow version 1, I had a realization. The flow does a couple of things. After the prerequisite connection and authentication sections, Jared must walk through 3 sections:

[1. view, select: albums, photos]
[2. import albums, photos]
[3. auto import future albums, photos]

I had 2 needs to solve in this scope. But I created 3 solutions here.

One of these does not belong!:

I didn’t catch this until I made a couple of screens:

The MVP iteration should solve the need. Nothing more, nothing less.

While the interaction of viewing/selecting photos seems a reasonable assumption, lean UX is about validating core needs, and validating our solution as an answer to those needs, before iterating additional versions of the solution.

Let’s simplify the task flow to only address the needs of the scope:

Task Flow, Version 2:

From here, I’ll design a prototype while considering design patterns and heuristics.

Up Next:

Where we are in the series on Reimagining the Dropbox Photos Experience:

Previously:
Part 1 — A Guerilla Usability Test on Dropbox Photos

Next:
Part 3—Wireframes and a prototype of the new feature to follow.

*I don’t work for or represent Dropbox. I’m a curious Visual Designer shipping UX projects at 2 design programs until the end of March. I study under Laura Klein & Kate Rutter @Tradecraft and Megan O’Rorke @GA_SF. Send me design challenges come April ☺