ux-pertise

Forced signups could be costing your client upto $300M

Circa 2009, UX guru Jared Spool recounted how his team helped a major ecommerce player improve their yearly revenue by a staggering $300,000,000. Back then, retailers would force users to create accounts prior to checkout because the advantages seemed obvious at the time — faster future checkouts, product wishlists, saved payment options, delivery tracking and more. But Spool and team sided with the analytics:

The designers fixed the problem simply. They took away the Register button. In its place, they put a Continue button with a simple message: “You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.” 

This case study was also documented in Luke Wroblewski’s Web Form Design: Filling in the Blanks, and has since been referred to as the 300 Million Button. It is a reminder that any designer’s intuition, however strong, should never trump empirical evidence. 

process

There’s no handoff in product design

A slightly lengthy gem of a piece from Brendan Fagan for the Intercom blog on why our design process needs to mature past the “design handoff” or “freeze”:

Many designers compartmentalise building a product into two distinct parts – design and development. This distinction is one of the most dangerous traps a product team can fall into. When design is seen as a satellite that orbits engineering, it usually comes crashing back to earth.

Lots of agencies and creative boutiques still work this way.

Design specs are tossed over the back wall for an external team to build. You’ll be lucky if you ever meet them face to face. Luckier still if the product ends up resembling anything close to what you designed.

He then dives right into what product designers need to understand before they begin design — understanding constraints early, and designing with engineering in mind — before finally sharing the actual process Intercom uses to build its product.

Illustration by Intercom
And remember that for a modern product team, what matters is what ships. So embrace those who can turn your ideas into reality.

Nail on the head. Nothing beats the kicks you get from iteratively refining your interfaces through collaboration with real people.

Issue 2 Feature  •  11 minute read

Interface design tools, evolved

As product designers today, we’ve come to expect a lot more from our tools than just pushing pixels around. We heard the warning shots fired when Sketch overtook Photoshop as the primary tool for interface design in Khoi Vinh’s 2015 survey, and Sketch’s ecosystem has since grown to make it a natural choice; given how closely it ties in with the rest of the product development workflow — namely creating prototypes, enabling handoff to development, version control and more.

Compared to the past few years, the explosion of new tools in 2016 promises to give product designers plenty of options going forward. Let’s take a brief look at each of these options and examine their value propositions vis-a-vis Sketch, the current workhorse.

All the tools that came to the fore in 2016 can be categorised into one of the following:

  • Standalone apps — Figma, Subform, Adobe Experience Design and Affinity Designer
  • In-browser site builders — Webflow
  • Ecosystem extensions — Abstract and Picnic

Figma

The big news in 2016 was Figma — nobody expected an interface design tool that was browser-based, collaborative and real-time. Dylan Field and Evan Wallace announced it in December 2015 along with $18MM in funding from Greylock, Jeff Weiner and others.

Figma’s trump card is collaboration, which is perfect given that product design is inherently an iterative and collaborative exercise. If you are a  designer working in a team, you’d typically have to get hold of the required assets for a new project, then create and upload previews of your designs to a platform like Invision to get internal feedback, plus maintain a history of changed files.

Figma users need not be fazed. Just like Google Docs, your .fig file is stored securely in the cloud. You need not worry about tracking changes. Comments can be placed virtually anywhere on an artboard. And since it is all browser-based, you can access your files on a Mac or PC via a simple URL.

Since version 1.0 was publicly announced along with macOS and Windows apps, Figma has received a ton of praise. But it is not perfect by any means. Questions remain unanswered about other aspects of the design process like prototyping, animation and developer handoff. Pricing is also a concern, and it seems like it will most likely go with a monthly subscription model. Users have also reported that offline usage tends to lag, and performance in general suffers on a slow network connection.

But given these are very early days, the future looks promising. For those interested, Meng To has written a handy comparison of Figma and Sketch.

Adobe Experience Design

Built to enable “design at the speed of thought”, Adobe Experience Design (XD) comes across as a combination of a raster and vector graphics tool, with the basic prototyping and collaborative abilities of Invision.

Formerly Project Comet, the app is currently in beta and is available as a free download for both Windows and macOS. Like Figma, Adobe also believes collaboration is an important part of the modern design workflow, so XD makes it possible for multiple stakeholders to participate in real-time — senior designers and clients provide feedback and signoff via comments, developers can also get specs right from the app itself. Plus designers can create video recordings of prototypes or share a link to an interactive prototype hosted on Creative Cloud. While Sketch relies on third-party support for prototyping, XD lets designers define flows, triggers and transitions within the app itself. Plus, XD is part of the Creative Cloud, so designers can expect it to work well with other CC apps like Illustrator and Photoshop. 

There’s new leadership now at Adobe, new faces (including Khoi Vinh, who is currently Principal Designer), and hopefully a new approach to building products. XD is work in progress, and Adobe has an impressive vision of how they want XD to mature.

Adobe has been indecisive in the past with many promising projects like Fireworks and the Edge suite, and given the Beta tag that XD currently sports, it is not surprising some are a little sceptical. But for the 500,000 designers reportedly using XD at the moment, Adobe is busy pushing updates on a monthly basis; with a mix of new features, enhancements to existing features and bug fixes.

Affinity Designer

Affinity Designer has quickly built a formidable reputation as an alternative professional graphic design app to the Adobe Suite. Having already secured the coveted Apple Design Award, and thousands of 5 star customer reviews on the Mac App Store; Affinity has now set its sights on UI and UX designers as well.

Compared to Sketch, which is marketed primarily as a UI design tool; Affinity Designer seems more like a Swiss army knife — capable of delivering for both print and screen, across a variety of disciplines like branding, icon design and illustration, and most recently, UI design too. So startups with growing design teams that find the Adobe suite a little expensive now have an alternate. Designer costs just $49.99 one-time.

As such, a few advantages of its multidisciplinary nature quickly become apparent. For starters, you get the now customary Symbols feature just like Sketch does, but also a Constraints feature that allows designers to specify how the interface should respond to varying viewports or similar limitations.

Advanced typography options seen in Adobe Illustrator and missing in Sketch can also be found in Affinity Designer, and this means designers can take advantage of OpenType support — ligatures, swash, titling and contextual alternate glyphs, lining and oldstyle figures, and more.

One feature lacking in Designer is some sort of handoff mechanism to developers once the design phase of the project is complete. Sketch leads the race here with excellent third-party support for Zeplin, Invision Inspect and Measure. So keep this mind before considering Designer for your next project.

Subform

The unique characteristic of Subform is that it identifies itself specifically for product design, rather than graphic design. Having been inspired by CAD and other 3D modelling tools, it will — according to its founders Ryan Lucas and Kevin Lynagh — eventually be able to fully understand the designer’s intent, which every other tool currently ignores.

Subform raised $112,651 through its Kickstarter campaign in November 2016 and is available on invite-only basis, so not much information is available at this point. It is being touted as a power tool for master product designers, as opposed to the Swiss army knife philosophy of Affinity Designer.

Let’s quickly revisit the earlier point about understanding designer intent, as it is quite intriguing. For example, Sketch cannot differentiate between a regular button and a Floating Action Button (from Material Design). But designers can get Subform to identify a FAB and position every such instance precisely 20px from the bottom right of each screen. This itself is a step ahead of anything out there at the moment.

There seems to be meticulous thought put into its core features. Its shared components seek to provide balance between consistency and contextual variation, it accounts for viewport constraints, it can save an unlimited number of states, pull in real data while designing, and much more.

Subform seems to embrace large-scale product design projects in an agile environment, where change is constant and any available time be spent on design and maintaining consistency, rather than fighting your tools. This is definitely one tool to keep an eye on.

Webflow

Product designers who code swear by the immediate impact a functional HTML prototype has over static comps. All current UI design tools add a necessary outer layer over the actual product, letting you interact with either static images; or stringing them together and adding transitions (like Invision and other advanced tools like Framer and Atomic do). This output is still a model of the product and not the actual product.

Enter Webflow — part design tool, part CMS, part hosting platform.

For starters, designers can specify layouts using the CSS box model, flexbox or floats, then add content and style it with media, colour and typography. Webflow also provides templates similar to Virb or Squarespace for those who don’t have a lot of time. Any element on the UI can be specified as a Symbol, and can be used repeatedly via CSS-like styling hooks.

Web design tool + CMS + production environment

The second part of Webflow is a CMS that allows content editors to add content via custom fields, and then bind these fields to the layout that designers create. Webflow also provides webhooks — custom actions that are triggered when something is added, updated or deleted; if developers need to do some heavy lifting like background services.

And finally when the site is ready to be launched to the intertubes, developers can use Webflow’s integrated hosting platform to publish. Webflow relies on Fastly and AWS to deliver your site files to visitors anywhere in the world.

So whether you’re a designer, developer, client or content manager working on said site, you have a single place to sign in and do your thing. There is nothing stopping you from doing all of this simultaneously.

As its name suggests, Webflow is only suited for Web-based, content-centric responsive design projects. Its target audience is non-technical users (especially designers) that need to have a site up without learning code. The design community has been crying out for a Web-based design tool for years, and Webflow doesn’t just embrace the fluidity and constraints of the Web — it is built on top of it. It already has over 250,000 users on the platform; including enterprise clients such as Groupon, Hewlett-Packard, IBM, Mastercard, Pinterest, MTV, and Hitachi.


Abstract & Picnic: Sketch hits back

Let’s not forget the reigning emperor of product design tools. Bohemian Coding understands its user base well, and its flagship product has matured nicely over the last couple of years. Sketch’s interface has become the standard, with most of its competitors choosing not to reinvent the wheel.

Having seen all the big guns the would-be competitors are bringing to the fight, 2017 could be an important year as Sketch tries to cement its place as the tool of choice. The most likely changes would be improvements to Sketch Cloud, first-party version control, even better style management and more. Sketch 42 is just out the door, with a new Export Presets feature among the usual bug fixes and stability improvements.

More importantly however, a couple of plugins from its exemplary developer community seem to be already propelling Sketch forward with gusto. Meet Abstract and Picnic

Abstract finally brings the power of Git to Sketch

Abstract was the brainchild of Frank ChimeroJosh Brewer and Kevin Smith; and today has Tim Van Damme and others onboard as well.

As of the time of writing, Abstract is in private alpha; so we can only speculate about how it would work. After making a bunch of changes to your Sketch file, you hit a key combination which calls a Mac client — similar to the kind Zeplin has — to document your changes and push it to a repo. You could also possibly create branches or anything else Git allows.

The primary advantage of Abstract is designers’ familiarity with Sketch — and continued access to all the other extensions and integrations the ecosystem provides. And Git is a battle-proven version control system. This combination seeks to eliminate ambiguity about who made changes to the document, what was changed and where the changed files can be accessed. If if you and your design team’s primary issue with Sketch has been intra-team communication and workflow, Abstract could be your balm.

Update, 03 March:  In an interview with Khoi Vinh, Abstract CEO Josh Brewer has pretty much confirmed these assumptions, and has given a lots of details behind Abstract’s magic.

Picnic is the Sketch ecosystem clearly pushing back at Figma’s multiplayer collaboration. It promises to put Sketch’s Pages panel on steroids using Dropbox or Google Drive — allowing designers to share a file with their team and all simultaneously work on it. Like Abstract, Picnic is also currently being put through its paces in private testing.

We could easily see this tag-team — Abstract and Picnic — becoming the biggest assets in the Sketch arsenal.

In conclusion

With its simple interface focussed on UI design, a performant and constantly improving product, a huge ecosystem of third-party plugins and integrations that never fails to surprise — there are so many things Sketch gets right. It is most likely to remain the industry favourite for at least another year. The competitors will not go down without a fight, though.

The uphill climb toward feature parity will eventually plateau out leaving behind an almost-homogenous bunch of tools — just look at what has happened with AWS, Azure and Google in the cloud space. At such a point, choosing between them would almost certainly be a matter of personal preference.

In the end, it is us designers who stand to benefit from all this competition. The future looks very interesting.

Stagg EKG by Fellow

Designers and coffee connoisseurs alike should back this Kickstarter campaign for a modern, minimalist take on the traditional electric kettle. Pledge now to save big on the retail price.

precepts

Aesthetics is but one aspect of design

John Gruber defending Apple’s design decisions after one of the most talked-about events of 2016: the launch of the iPhone 7:

With a highly successful product and brand, new versions need to strike a balance between familiarity, the foundations of the brand, and hot newness.

Coming at a time when most of the press were criticizing Apple’s “stale aesthetics”, pieces like this are essential reading, regardless of whether you design brand, interfaces or physical products:

Iconic brands don’t zig-zag. They move forward with seemingly inexorable momentum. Their evolutions often feel inevitable, not surprising. Weak brands move like ping-pong balls; strong brands move like bowling balls. A new Rolex needs to look like a Rolex. A Leica needs to look like a Leica.

Great products never change for change’s sake. If you’ve figured out better solutions to existing problems, then yes, by all means. But realign, don’t redesign.

frontend frontier

Designer’s guide to using Grunt

If you’re a designer who codes, you’ve probably heard of task automation tools like Grunt and Gulp. And if you’ve shied away from these after seeing words like “Node.js” or “command line”, do not fear. Chris Coyier has put together this excellent primer to help you get started.

Use Grunt to accomplish all kinds of boring, repetitive (but essential) tasks like concatenating CSS and JS, optimising images, cache busting with version numbers, generating image sprites and lots more.

Since the article is 3 years old, the part about installing Node.js needs an update — don’t use the installer from the Node.js website, instead follow this article and use Homebrew instead.

Everything else is up to date, and brilliantly illustrated with screenshots aplenty.

Dodecal 2017 by Dodecal

DodeCal is an innovative polyhedra calendar system, designed with mathematical precision and finished in high quality European sycamore. It’s unlike anything you’ve ever seen before.

technosphere

Mark Zuckerberg’s Jarvis fuses IoT and AI

One of Zuck’s personal goals last year was to create an AI system to run his home, just like Tony Stark’s Jarvis.

At a basic level, the system is built on top of Crestron smart home technology and lets him control everything from lighting to thermostats. But it goes way beyond — doors that open via facial recognition, toasters that toast on demand, even a t-shirt cannon — with Zuckerberg having written custom APIs to connect some of these to a set of interfaces that include a message bot and speech recognition. All this was done in Objective C, PHP and Zuckerberg’s language of choice, Python.

After a year of coding, here’s how Jarvis shaped up:

In some ways, this challenge was easier than I expected. In fact, my running challenge took more total time.

Oh Zuck, now you’re just showing off!

ux-pertise

Edge cases lack empathy, think stress cases instead

Jeffrey Zeldman’s notes from CSS guru and Web Standards evangelist Eric Meyer’s AEA session on how even the most well-meant design decisions can sometimes go wrong for users. Case in point, Facebook brought up an image of Meyer’s deceased daughter Rebecca via its “Your Year in Review” feature:

Facebook didn’t build in those protections, not because they don’t care, but because our approach to design is fundamentally flawed, in that we build our assumptions around idealized and average users and use cases, and neglect to ask ourselves and our teammates, “What if we’re wrong? How could our product hurt someone?”

Further down:

When we label a usage an “edge case,” we marginalize that user and choose not to care. Think “stress case,” instead, and design for that human.

The entire article is gold. If you’ve ever thought what it means to design for human beings, this is it. Meyer has also fleshed out all of these principles in his book Design For Real Life, if you want to dive deeper.

workspace therapy

ustwo, London

Most designers know ustwo as the creators of the hit 2014 puzzle game Monument Valley, but they are in fact a product company with offices in London, New York, Malmo and Sydney.

Here are a few shots of their London office.

The Totem from Monument Valley
EO2 by Electric Objects

Bring the best of the Internet’s artwork onto your wall with this beautiful 23-inch second-generation display from Electric Objects. Designed to showcase digital art in a variety of frame options, it lets you turn your home into an art gallery.

dsgn.mngmnt

Julie Zhuo: Lessons learnt from managing Facebook’s design team

Julie Zhuo: VP, Product Design at Facebook. Photo by Intercom.

Julie Zhuo’s meteoric rise within the ranks of Facebook is stuff of legend. Within just two years and five months of joining as a product designer, she began co-managing the product design team. But long before she was appointed VP of Product Design, she had to take the plunge into management.

Today, Julie is one of the most outspoken design managers in the world; well-known for her long-form pieces on Medium. Writing in hindsight, she offers practical insight into team management through the lessons she learnt the hard way.

One of the first things I now ask people when they tell me they are contemplating becoming a manager is this hypothetical question: Imagine you spend a full day in back-to-back 1:1s talking to people. Does that sound awful or awesome?

The first of a two-part series, it has since become one of her most read essays.

Inspirocean — Ideas and visual inspiration across product design, typography, illustration and more

Notion aims to apply artificial intelligence with the goal of simplifying email.

Having recently acquired a majority stake in Dribbble, Tiny further cements its credentials as a first-class ecosystem of bootstrapped design companies.

Memorable packaging design by Lucy Kuhn for a line of breakfast cereal by the National Cereal Corporation.

With exquisite typefaces from Hoefler & Co, Commercial Type and others; NeuBible is worth a look regardless of your religious beliefs.

The now-defunct Oyster was once a beautifully designed ebook streaming service prior to its acquisition by Google late 2015.

A masterful blend of photography and typography on Minh Pham’s stunning concept for his wedding photo album.

Bear is a delightfully designed, critically acclaimed note-taking app for iOS and macOS.