I’ve had the rare advantage of shaping user experiences across industries as diverse as transportation, retail, and entertainment. Every project taught me one thing: the power of great design lies in its ability to drive real business results.

Here’s what I’ve learned from the frontlines.

(If you prefer to listen to this article as a podcast — view on YouTube or at the Up Top Blog with full transcription.)

UX is the Business

Business and design seem separate entities, but they are two sides of the same coin. Every product, service, and touchpoint is designed.

Let’s start with a simple truth: You cannot NOT design.

Even the most generic labels or packaging are designed. As Jared Spool says, “Design is the Rendering of Intent.” Every business decision, every product, every service is inherently a design decision. So, even the most mundane designs were done with some intention and purpose.

UX is not just a part of the business — UX is the business.

User experience is fundamental to business outcomes because every product and service inherently involves human interaction. While UX isn’t the only factor driving business decisions, it plays a vital role in deliberately shaping how people engage with and perceive offerings. There isn’t a product or service without the experience of using the product or service.

A good problem statement or hypothesis addresses both business needs and user benefits.

The Disconnect

Let’s take concert tickets as an example. The business goal is to sell out or sell tickets for as high margin as possible.

A customer’s interaction with the buying process is a messy decision process of parsing performance dates, venue choices, seating maps, and price points. A seemingly simple decision to attend a concert can be complex.

Simplifying also isn’t so simple: What does “best seats” mean, exactly? How much are we asking users to parse, digest, and remember? What about safeguards to prevent a system being overwhelmed or manipulated?

I experienced a personal disconnect during Alaska Airlines’ acquisition of Virgin America. From a UX perspective, Virgin America had award-winning apps and state-of-the-art implementation. Alaska had a best-in-class service experience as a multiple J.D. Power award winner.

I personally thought this was an opportunity to bring together the best of both worlds. Still, it was disconnected from the operational business goals: expanding service, opening up capacity, and improving gate access.

Ultimately, this was the correct business decision, considering the complexities of backend integration and the decision to continue Alaska Airlines’ established brand. These were business realities that design and digital experiences could not ignore. (It is happening again with Alaska Airlines agreeing to purchase Hawaiian Airlines.)

Speaking the Language of Business

One of the most common challenges I hear from UX professionals is the ongoing struggle to justify the value of design to business decision-makers. I get it — UX ROI is hard to quantify. I have found UX is often treated like marketing or other cost centers: essential but difficult to prove as a direct revenue driver. So how can design professionals bridge this gap? The answer lies in changing our language and perspective.

Shift Your Mindset: Instead of thinking, “I am a designer,” think, “I am a business person who uses design as a tool” as Patrick Neeman says. Start thinking like a businessperson. You’re not just a creative solving design problems; you’re a strategist using design to help solve business problems.

Learn How Your Business Works: Understand your company’s revenue model, delivery processes, and long-term goals. Tensions rise from how the business started to how it continues to make money. If you want to understand these tension points in any organization, follow the money. For example, look at how Google integrated its search function into Apple products. It likely wasn’t just about delivering a better user experience.

Change Your Language: Words matter. Disney has “Guests,” not “users” — a deliberate word choice that frames every interaction as part of a larger hospitality experience. Don’t say “the business wants” or “we talked to the business.” You are part of the business. Use business terms to describe design activities: ROI, conversion, and investment. Talk about the value of UX in terms of business metrics.

Business Frameworks are UX Frameworks: A SWOT (Strengths, Weaknesses, Opportunities, and Threats) analysis is analogous to a UX heuristic review of your and your competitors’ experiences. Business mental models, such as anchoring, recency bias, and sunk cost fallacy, are based on the availability heuristic — we tend to recall what is essential, frequent, or recent.

Creating Value Through Design

As a design leader within large organizations, I’ve learned to think about value creation in specific ways. For any designer seeking a seat at the table, the first step is recognizing it is a business table.

Understand the Currency of Business: Everything in business and life deals in terms of time and money. As a consumer, you make these choices daily, deciding on products and services. It is how we make decisions, tradeoffs, and assess risks. Make design-informed business decisions in these terms as well.

Frame Everything in Terms of Value: There are no viable products that don’t provide value. Think about value. Are you assessing Minimum Viable Product features? Consider in terms of value. Need to cut scope to ship? Talk in terms of value.

Ask “How Do We Know?” Instead of asking, “Why?” which can make people defensive, ask, “How do we know?” or “How will we know when this strategy works?” This approach demonstrates curiosity and opens up discussions about data, opionions, and assumptions.

Envision the Future: There is no strategy without envisioning. Show something that can’t be unseen. Make the invisible visible. Then, you are living rent-free in the minds of partners, stakeholders, and decision-makers.

Start at the End: Work backward from the desired outcome. Similar to Amazon’s method of working backward from the Press Release or using FAQs as Product Documents. Pixar learned to do this with movies as well. Endings are hard — work back when you have it for the right start.

UX is a business strategy, not a deliverable

Start by thinking about the endgame — the value proposition that will drive business success. Work backward from there, and always talk about value.

1) Write Down What You Think

Get it down on paper (you were going to just do it anyway.)

List all the assumptions, do a brain dump and take your best guess at the issues and pass at quick-fix solutions.

Go for the Worst Idea Possible — think of it as the Bad Design Approach — or indulging in “Me-Search” instead of “Research”.

This is human behavior — exactly what clients will do.

Now you have a frame of reference on how others are going to start solving the problem for you.

2) Talk to Customer Service

Even better, get on the front line.

Answer the phone, help with online chat support or engage directly in person.

Now, after your shift, do a brain dump of your more informed guess on improving the product, increasing the rating or adding value for customers.

3) Go See For Yourself

Capture your experience and that of others.

Go on the experience. Immerse yourself, take pictures of others and watch your friends and family (This is Contextual Inquiry)

Live as a User, Guest or Consumer would: switch devices, reduce your data plan, take the bus there or coordinate a group.

Immediately after your immersion, write a journal with words, observations, snapshots and thoughts. (I once did a 100 page google doc after visiting a certain theme park.)

Now, craft a next iteration of the issues you witnessed and potential solutions or avenues to explore.

4) Go Experience the Competition

Do the exact same with a competing product.

Take photos, watch others, record your observations, write up a journal…

What did the competition do better? What does your product or service do well? Write it down.

5) Define the Problem

Gather up any business intelligence, prior research and other analysis.

Now that you have made your own (usually incorrect) guesses and assumptions, you have personal experience, research and raw data to compare and contrast.

Go back and see if your assumptions were correct at each step.

Each difference is a place where you have developed a deeper appreciation and empathy for the User’s Journey.

This is Design

A tool for framing the problem.

You have now developed empathy and much more:

• Created a SWOT (Strength, Weaknesses, Opportunity and Threat) Analysis
• Conducted an internal process review
• Broke any habit of jumping to a solution without understanding the need.

And best of all… you have a story.

A logical and backed up story of why initial impulses may not work and how anecdotal, personal and data driven viewpoints taken together can inform a path forward.

Recommended tools, articles, services, products and resources used through a product UX design lifecycle and beyond including:

• Top UX Reference Books
• Best UX Design Tools
• Best Prototyping Tools
• Best Native Mobile App Design Resources
• Pattern Library, Design Languages and Style Guide Examples
• Recommended Disney Inspired UX Articles
• Must Read UX, Design and Product Articles
• Best UX Design Career and Interview Advice
• Top UX Design Portfolio Articles & Examples
• Best UX Overview Guides
• Must View Design Principles & Checklists

Top UX Reference Books

How to Make Sense of Any Mess: Information Architecture for Everybody — Abby Covert

This gem is an instant classic and introduction to IA (Information Architecture) from Abby Covert who “wrote this book for anyone making anything”. Get the best primer out there and be able to explain IA to partners, colleagues and parents alike.

Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability — Steve Krug

First edition of this book was standard issue at my first in-house design team and it still is in my book. Even the chapter titles are timeless lessons: “How we reallyuse the web” and “Omit needless words”

Understanding Comics: The Invisible Art — Scott McCloud

Yes, I love comic books. This book is here, however, because it is really is a masterpiece on human visual communication, knowledge transference and information graphics disguised as a meta-comic.

The Visual Display of Quantitative Information — Edward R. Tufte

I am a Tufteian at heart and the Amazon description says it all: “The classic book on statistical graphics, charts, tables… with detailed analysis of how to display data for precise, effective, quick analysis.”

Creativity, Inc.: Overcoming the Unseen Forces That Stand in the Way of True Inspiration

What is the recipe for magic? Ed Catmull, co-founder (with Steve Jobs and John Lasseter) of Pixar Animation Studios discusses creativity in business.

Go: A Kidd’s Guide to Graphic Design — Chip Kidd

If you are looking for the essence and understanding of graphic design principles on form, type and content look no further than this book which contains my favorite UX quote: “The best solution is found in the best definition of the problem.”

Information Architecture: For the Web and Beyond — Louis Rosenfeld, Peter Morville and Jorge Arango

Affectionately known as the polar bear book, this latest edition chronicles the 3 Principles of IA to build systems, and not just websites, under the continuing glut of information overload.

Lean UX: Applying Lean Principles to Improve User Experience — Jeff Gothelf and Josh Seiden

A cross discipline reference and introduction into the intersection of User Experience, Product Design for Market Fit and Lean Development Practices based on agile methodologies.

Universal Principles of Design: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design

I don’t see this book on many lists, but I think it should be. I apply and recite these principles on a regular, if not daily, basis including the 80/20 Rule, Chunking and the Fallacy of Scaling.

Envisioning Information — Edward R. Tufte

Told you I was a Tufte-ian. The most purely design oriented of the series covers everything from Napoleon’s March by Minard, computer interfaces, courtroom exhibits, timetables and… PowerPoint.

Design Is a Job — Mike Monteiro

‘Nuff said. Go read this.

The Brand Gap: How to Bridge the Distance Between Business Strategy and Design — Marty Neumeier

This is more around visual communication, but instrumental to understanding why design is different and how brand matters in experiences.

The Only UX Reading List Ever — Simon Pan

Looking for even more books on UX? This is a collection of over 60 must reads on Thinking, Methods, Principles and Best Practices.

Best UX Design Tools

Have a Conversation

Sounds simple to start at the beginning… but having a real dialog and not just talking at each other is where understanding begins. Go listen (and talk) to your Customers, Product Managers, Customer Support and Developers.

White (Dry Erase) Boards, Dry Erase Markers and Post It Notes

An old school tip that often goes best hand in hand with conversation. Digital equivalents can work to — the key is using a consistent low barrier medium that works quickly with your cross functional team.

Pencil and Paper

Yes… another analog technique that is often overlooked for quickly capturing thoughts before getting tunnel vision from a tool. The Engineer in me still loves graph paper.

Keynote, PowerPoint or Google Slides

Wait… You recommend Tufte and use Presentation software? Yes. It is not the tool, but how you use it. My suggestions: Learn how to tell a story, keep one idea per slide and show, not tell.

Sketch

I tend to design high fidelity and Sketch is built from the ground up to focus on UI Design workflow and offers time saving Mobile App optimizations.

The Tools Designers Are Using Today

The Subtraction.com Design Tools Survey by Khoi Vinh provides a snapshot of the changing marketplace of applications and utilities for digital based designers.

Best Prototyping Tools

InVision

Billed as the world’s leading prototyping, collaboration & workflow platform — there simply isn’t anything else out there that maximizes speed with fidelity.

Framer.js & Framer Studio

Framer is the secret weapon to prototype anything — especially high fidelity platforms and fluid native apps — and the results are astounding. Don’t forget CoffeeScript for Framer.js

Principle for Mac

If you are looking to make quick Apple-level fidelity motion studies to design animated and interactive UI, without the ramp of heavy scripting, check out Principle.

Adobe After Effects CC

I am not an After Effects guru and this is more of a motion study tool, but the influence and persuasion of a full video render of a graceful flow and animation of UI is undeniable.

Bootstrap

Prototyping a website? Why not use the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web?

Xcode and Swift

Designing an App? Use the tools developers use and gain true understanding and appreciation. I learned to dive right in Design + Code from Meng To.

Designer’s Toolkit: Prototyping Tools

A living document of reviews and rankings for prototyping tools as they are road tested by the designers at Cooper.

Best Native Mobile App Design Resources

Material Design

A beautiful design language and Human Interface Guidelines (HIG) built on 3 principles: Material is the Metaphor, Being Graphically Bold and Motion Provides Meaning.

The iOS Design Guidelines and Ultimate Guide to iPhone Resolutions

Up-to-date information to design for iOS and get started within seconds. Not the Official iOS Human Interface Guidelines — but they should be.

Facebook iOS 10 GUI for iPhone

In the tradition of Teehan+Lax: Sketch, Photoshop and XD templates of GUI elements found in the public release of iOS 10 from Facebook Design.

Designer’s Guide to DPI

Phenomenal guide to cross-DPI and cross-platform design. I use this resource regularly to explain the difference between PX, DP, PT and SP along with the 5 asset sizes for Android.

Little Big Details

Your daily dose of design inspiration and micro-interactions and the key for turning app moments into delights.

User Onboarding

A deep look into onboarding an first-run experiences (with detailed teardowns) — key for any app.

UI Design Do’s and Don’ts

Consider these common design concepts to enhance the usability and appeal of your apps.

What Does it Take to be a Mobile Designer Today?

Being a successful mobile designer requires an evolved understanding of how people use their devices, a robust toolkit, and the flexibility to adapt to new technology.

How to design for thumbs in the Era of Huge Screens — Scott Hurff

What does it mean to design for thumbs? It means building interfaces that are the most comfortable to use within our thumb’s natural, sweeping arc.

How Do Users Really Hold Mobile Devices?

One handed, cradled, two handed and not even looking at the screen.

Pattern Library, Design Languages and Style Guide Examples

Atomic Design — Brad Frost

Atoms, Molecules, Organisms, Templates and Pages make up a system of designed components instead of a random collection of elements.

Material Design

A beautiful design language and Human Interface Guidelines (HIG) built on 3 principles: Material is the Metaphor, Being Graphically Bold and Motion Provides Meaning.

Pantsuit: The Hillary Clinton UI Pattern Library

Front end system for moving at the speed of presidential elections.

Design Doesn’t Scale

How Spotify used GLUE to make design scale.

The Way We Build

How rethinking the Airbnb app changed the way design was approached. This article is a kick-off into Airbnb’s new Design Language System.

Facebook iOS 10 GUI for iPhone

In the tradition of Teehan+Lax, Sketch, Photoshop and XD templates of GUI elements found in the public release of iOS 10 from Facebook Design.

Netflix Branding — The Stack

Innovative branding solution to the world’s leading streaming media service and how design is carried out to unify every touchpoint.

MailChimp Patterns and Content Style Guide

MailChimp shows how important Design Patterns are, but also that most important of all is the content a design must serve.

Website Style Guide Resources

Examples of real life pattern libraries and content style guides, including this gem from the never before published for sale 1982 DC Comics Style Guide.

Recommended Disney Inspired User Experience Articles

The Illusion of Life

The 12 Principles of Animation by Disney Masters — more important today than ever — to express character and personality.

Walt Disney: The World’s First UX Designer

Attention to detail, a focus on immersion, and the desire constantly improve his products made Walt Disney one of the earliest designers of user experience.

Beyond the UX Tipping Point

Surprisingly, few are talking about what could be the biggest user experience story of 2014: The introduction of the Disney Magic Band. — Jared Spool.

22 Rules of User Experience

Pixar’s 22 rules of storytelling adapted for UX — because both are about creating great experiences.

The Principles of UX Choreography

The intersection of Disney and UX and why learning how to draw Mickey Mouse will change how you approach design.

How Pixar Solves Problems From The Inside Out

It’s easy to forget that Pixar is a technology company. Mostly because the invention that they do is in service of a narrative.

Disney’s $1 Billion Bet on a Magical Wristband

If you want to imagine how the world will look in just a few years, once our cell phones become the keepers of both our money and identity, skip Silicon Valley and book a ticket to Orlando. Go to Disney World.

Effective Feedback: The Little Known Secret To Pixar’s Creative Success

Often, feedback sessions are seen as a chance for people to give their input. Nothing could be further from the truth. The purpose of creative feedback is to move the project forward.

Must Read UX, Design and Product Articles

What Super Mario Taught Us About UX
Original Super Mario Was Designed on Graph Paper
Design Club — How Super Mario Mastered Level Design

The revolutionary game that changed everything taught users how to play through level design and was designed all on graph paper.

Why UX Designers Need to Think like Architects

A look at the parallels between architects and user experience designers, and how the latter group can benefit from the work of the former.

Designing For (and With) Color Blindness

As designers, we constantly worry about legibility, how engaging content is, whether hit targets are big enough, or if a user can navigate through a workflow. But we often forget about the one in ten people that are colorblind.

The Rules of successful Skunk Works Project

Need to make a product on limited time with tight deadlines? Use the rules that helped Lockheed Martin invent a fighter jet in 143 days.

Product Strategy Means Saying No

If you’re building a product, you have to be great at saying no. Not “maybe” or “later”. The only word is no.

The Double Diamond Model of Product Definition and Design

Design makes strategy concrete and a model for how to get from definition to execution.

Team Models for Scaling a Design System by Nathan Curtis

Evolving Past Overlords to Centralize or Federate Design Decision-Making Across Platforms.

Behind the Wheel with Product and UX

Four things UX needs to know about product management.

Start with a Cupcake

Gall’s Law, true Product MVP and the value of experience in one tidy little analogy I use everyday.

Best UX Design Career and Interview Advice

The Usability Counts UX Resume Template and Career Guide

The single best UX Career resource out there. Period. I personally follow Patrick’s template, advice and passion for telling stories.

The former Director of User Experience at Jobvite, Patrick has a mammoth collection of articles, insights, templates, tips and guides for the new UX professional. Looking for a place to start from the scores of articles? Try Getting Started in UX for People I want to Hire. Don’t forget the bulletproof free resume template and slideshow presentations on Slideshare, including this Slideshare Presentation of the Day:

What Kind of Design Work Should I do?

The only flow chart you need is from Julie Zhuo and answers: What project should I take on? Where should I work? and What should my career look like?

This 90-Day Plan Turns Engineers into Remarkable Managers

Great advice for making the jump from contributor to managers of all kinds, not just Engineers, and perfect for UX Designers.

Nick Finck gives an overview of the core disciplines of UX, what it means to be T-shaped and how to start building a personal brand to break into UX.

Top UX Design Portfolio Articles & Examples

How to Tell Your UX Story

My collaboration with Patrick Neeman on presenting your portfolio with examples from our own personal portfolios.

Building your design portfolio? Here are 8 things I wish I’d known.

In building a company that creates new UX Designers on a daily basis, a look back an old portfolio and lessons learned.

Great Design Portfolios Are Great Stories

How to become a better designer by telling the story of you behind your work. Great Article by Simon Pan and great portfolio to match.

Your Portfolio Probably Sucks

Designers are not making user-centered portfolios. They are making self-centered portfolios.

Etsy’s Product Page by Cap Watkins is a great example of telling a story through a design project.

The 10 things to remember when building your portfolio by Lynn Teo.

Best UX Overview Guides

Wally Wood’s 22 Panels That Always Work

“Never draw what you can swipe. Never swipe what you can trace. Never trace what you can photocopy. Never photocopy what you can clip out and paste down.”

UX Crash Course: 31 Fundamentals

A quick overview to go from zero-to-hero as quickly as possible in 31 daily lessons. Don’t forget UX Crash Course: User Psychology.

52 Weeks of UX

A discourse on the process of designing for real people with an article for each week of the year.

UX Myths

UX Myths collects the most frequent user experience misconceptions and explains why they don’t hold true.

Butterick’s Practical Typography in 10 Minutes

If you learn and fol­low these five ty­pog­ra­phy rules, you will be a bet­ter ty­pog­ra­pher than 95% of pro­fes­sional writ­ers and most designers.

Pixel Perfect Precision Handbook

For those looking for snap to alignment precision on design principles, do’s and don’ts and Photoshop.

Must View Design Principles & Checklists

Government Digital Service Design Principles

A refreshing look at applying Design Principles like “Do Less” and “Build digital services, not websites” when designing for everyone.

Dieter Rams: Ten Principles for Good Design

As good design cannot always be measured in a finite way, Dieter Rams set about expressing the ten most important principles for what he considered was good design.

Design by Numbers: A Checklist

An adaptation of Maslow’s Hierarchy of Needs representing the five criteria of good design and magnitude of importance.

UX Project Checklist

Just like a pilot before taking off, run your designs through this quick checklist at each phase of the process.

Design Kit: How Might We?

These 3 little words are the key to developing a framework by reframing your design challenge as a question.

Design Principles For the Win

The biggest collection of Design Principles on Internet including: Facebook, Google, Microsoft and Amazon.

(Updated and revised for Medium on December 2016. Originally published at uxhow.com on January 2016.)

Everyday I am learning, relearning and reminded of simple lessons in UX.

Yes, as designers we have constraints, but never lose focus: It is always about the best User (Guest) Experience we can deliver.

Here are 5 simple lessons I learn and relearn everyday about UX:

1) Design Isn’t the Hard Part

There will always be problems — and problems are opportunities — not roadblocks.

If everything was laid out like a school work assignment — it would all be easy for everyone, not just designers. There isn’t a 100% guaranteed recipe to creating real products and services that add value for users.

The hard part in UX, Product Design (and even Development, Project Management, etc) is:

• Finding the Work (if you are a consultant, agency or vendor)
• Defining the Problem
• Alignment
• Constant Discussion and Meetings
• Presentations
• Reviews
• Lots of Meetings
• Collaborating Remotely
• Going Back to the Drawing Board
• Deadlines

Keeping this in mind can help tremendously in understanding that navigating all of this is required to move forward.

One of my design colleagues has a great reminder and perspective on our daily work:

“If it was easy, we wouldn’t have jobs.” — Matt Carthum

2) Give Them What They Want

Show the client or decision maker what they asked for… and why it does — or doesn’t — work.

Break it in front of them. Give them what they want… then show them what they need.

I learned this from being a consultant and it applies whether you work at an agency or on an in-house team. Designers should have a recommendation, an approach and a clear point of view.

Here is how during a review:

1) Start by telling the story…
2) Present what is expected: “Here is the solution you asked for and addresses the concerns from last time…”
3) Show what really works: “But this alternative — our recommendation — is stronger and here is why…”

“Show what can’t be unseen.” — Priyanka Kakar

3) Design Facilitates the Conversation

A review with stakeholders is not a sales pitch — a presentation is a dialog with visual aides.

Another way to look at the goal of presenting design work is alignment and understanding on how to move forward — not approval.

When you approach a conversation this way you truly are treating stakeholders as collaborators.

There is a lot of talk about bringing along people through phases of a project or educating others about the design process. True collaboration can only happen when you facilitate a conversation instead of speaking at people.

“Efficiency is doing the thing right. Effectiveness is doing the right thing.” ― Peter F. Drucker

4) Walk the Middle Path

A partnership is like creating a great comic book: the right combination of images, dialog, plot and pacing that add up to a great story in the mind of the reader.

The writer can’t approach comics like an author creating a novel. The illustrator can’t approach comic books like a fine artist painting a portrait.

In comics, a writer and illustrator, each experts in their field, must tell a story together.

How UX Designers keep to this middle path is by being subject matter experts open to change. As Designers, we don’t know every budget impact, recently discovered technology constraint or prior product learning.

This isn’t a call to compromise, but to being open to seeing all sides. The end product is usable and delights, not a collection of wireframes.

“A burning passion coupled with absolute detachment is the key to all success.” ― Mahatma Gandhi

5) Listen, Then Use Judgement

Everyone puts themselves at the center of the Venn Diagram. The truth is that consistently delivering a great product or service requires everyone working in concert.

Listening and hearing are two different things.

Listening is understanding the problem behind the problem. Listening is asking ‘why’ five times. Listening is developing the ability to anticipate reactions.

Once you are truly listening, then you can apply a perspective on where you come down as a UX Designer helping make a call.

The best referees, judges and umpires simply say what others know to be true and become virtually invisible.

“The most important thing in communication is to hear what isn’t being said.” ― Peter F. Drucker

Originally published at uxhow.com on August 29, 2016.

Apps are a big part of product and service touch points — and are only growing. Each year users are spending more time on their devices (an average of 2 hours and 42 minutes per day in 2014) and spend 86% of their time in apps with no signs of slowing down.

Here is what I have learned from and with others on how to design native mobile apps.

Top 5 Tips for Designing Apps

1) Read the HIG

Learn the rules from the Human Interface Guidelines (HIG), then figure out whether you should break them elegantly.

iOS Human Interface Guidelines
Apple Watch Human Interface Guidelines
Universal Windows Platform Apps
Design Principles for Android Wear
Material Design

2) Talk with Developers

Connect with your development teams and get a sense of their insights and challenges. Native mobile app teams are often developed around platforms — designers may work across.

As a designer you need to understand what is easy or hard on each platform. You will quickly find out how hard is it to do sticky headers on Android or horizontal scroll style on iOS.

3) Rebuild Existing Apps

This fantastic tip comes from Amir Khella of Keynotopia. It is easy to browse patterns and research other apps, but actually rebuild them and then you will understand how they come together. Just like studying a piece by Michelangelo, copy until you understand how it works.

4) Make it Move

States, animations and transitions are key distinguishing features of elegant app experiences.

Create a motion study, rough prototype or even better — jump into code and really dig into what makes or breaks an app.

5) Services First

The quality of native mobile app experiences are completely intertwined with the services that power them. In order to provide the best front end app experience, services need to be designed, implemented and support data flow based on user need and context.

As a Designer, you need to start thinking this way and connect with your development partners on how services are being optimized (or not) for native mobile apps.

Native is Not Web

At first native and web browser designs seem very similar. Many good design practices and principles from the web apply to native mobile apps — but there are key differences.

No Pages

Apps have states, modes and views and are often enabled and communicated through native animations.

This provides much more context in an experience and UI views dependent on a number of conditions.

Apps should have elegant seams and smooth transitions, not waiting for page loads.

Gestures

The interaction model is fundamentally different on a touch UI device.

There is no equivalent of rollover or hover on an app and a “right-click” is being explored with functionality like 3DTouch.

Input / Output

A mobile app has access to much more than just a screen. For instance, confirmation of an action doesn’t have to be visual — it could be accomplished with haptic feedback (vibration).

Potential Inputs include: Camera, GPS, gyroscope, accelerometer, wifi/bluetooth connection, voice, Contact List / Address Book, camera, photo gallery, microphone and more with each new device.

Different Output options include sound, haptic/vibration, notifications and the screen.

This level of access however comes with the need to be responsible:

Apps are Not Browsers

In an app, you are designing and building everything the browser has to do too — and you don’t get things “for free”.

“There are no 404 Errors in Apps” is a favorite saying of a Technology Director I partner with.

When something doesn’t work on a native app, the user will constantly ask themselves:

“Is it the app, my phone or the connection?”

As a designer, you need to address this and communicate elegantly when things are not optimal or unknown. Additional conditions you need to account for on native mobile apps include:

• Offline States
• Intermittent Connectivity
• Service Call Failures (Single or Multiple)
• Loading (Blocking Loader, Inline or Progressive?)
• Caching Data (How long should “old” data be kept?)
• First Time Experience (Show a tutorial?)
• Second Time Experience (Don’t show a tutorial?)
• When an app is brought into the Foreground
• When an app is switched into the Background

Live and Die by the Store

Apps are like movies and music — they have ratings and reviews that are broadcast to anyone who might think of downloading it.

Often times a user will already have an impression and seen comments before experiencing it for themselves.

Reviews, Ratings and Comments will often give feedback about network, service or content issues that you need to proactively account for in the design.

Because of this, apps are more critical to test and depending on how they are built, can be very difficult to update quickly when a bug or issue is found — and before it is broadcast to everyone else.

iOS and Android Differences

Over time the, the big two platforms have converged in some ways and taken different and drastic turns in other directions.

Be mindful of these key distinct differences when designing a native mobile app for one, the other or both.

1) The Back Button

I am not talking about Up vs. Back or the touch screen back arrow on apps. I am talking about the actual hardware back button built into Android devices and nowhere to be found on iOS.

Be prepared to answer the question at any point in a flow when your developer asks:

“What happens when I hit the back button on Android?”

2) Open vs Closed

The iOS App Store is a very closed marketplace and iOS limits access for Apps to certain device inputs and outputs. Due to the review process for App Store, an App may not be published or released for up to 2 weeks after submission, pending approval.

The Google Play store is much more open and the platform allows deeper integration into native input and output methods. There is minimal review process for the Google Play Store and apps are published almost immediately.

3) Top vs Bottom

Same app, same content and the main navigation is flipped between top and bottom. iOS has a strong preference for main sections of the app in the bottom Tab Bar while Android encourages using the Navigation Drawer and other constructs.

4) Use of Screen Real Estate

iOS and Material Design make different use of the canvas or real estate of the screen. As this breakdown of Apple Maps vs Google Maps shows, Material Design favors Floating Action Buttons and transparency while iOS employs more navigation “stripes” at the top and bottom.

5) The Guidelines

Each platform has 3 key principles or themes in the Guidelines, but are emphasized and interpreted in different ways.

iOS Themes

Deference
The UI helps people understand and interact with the content, but never competes with it.

Clarity
Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design.

Depth
Visual layers and realistic motion impart vitality and heighten people’s delight and understanding.

Material Principles

Material is the metaphor
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

Bold, graphic, intentional
The foundational elements of print-based design — typography, grids, space, scale, color, and use of imagery — guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus.

Motion provides meaning
Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.

Learn by Doing

Best way to learn how to design native mobile apps is to design them.

The easiest place to start is with a pre-existing GUI template, like the iOS Template from Facebook:

I mentioned earlier reverse engineering your favorite app.

Go ahead… literally trace native app patterns to help build a design language of what works and understand the foundational elements.

It can be a big jump to go from designing to even dabbling in code, but it is worth it. When you walk in someone’s shoes (or tools) you acquire:

• Empathy for development (and users)
• Intuitively understand each operating system and the standards
• Truly learn by doing

If you are really hesitant about jumping into native mobile app development — there are number of easier prototyping tools out there that simulate the experience.

I try and walk the walk — this is a sample Calculator template I followed and connected in Xcode back in the day:

Getting started today in Xcode is easier than ever with Swift. Apple provides a tutorial to build a simple meal tracking app:

If you are not scared off yet, I highly encourage taking the deep dive into designing and coding your own app. Design + Code is the next step, starting from design tools like Sketch and then implementing in the latest development tool.

The best way to learn is to create something that you’d want to use. Guidelines are most useful while you’re directly manipulating results. — Meng To

Looking for More?

Access an always updated list of the best native mobile app prototyping tools along with top UX design portfolio articles, services, products and UX Design resources at UX How.

(Originally posted at UX How on November 23, 2015)