Design Hacking: Great UX without time, money, or design skills

On November 14, I presented Design Hacking: Great UX without time, money, or design skills to the Igniters: Stanford Entrepreneurs and Silicon Valley Founders group at Hacker Dojo in Mountain View, CA. I would like to thank Raj Lal, Cynthia Lee, and Wendy Soon of Vorkspace for inviting me and making this event happen. I had a great time, made some excellent contacts, and received a lot of encouraging feedback.

Design Hacking at Hacker Dojo. Apparently you are supposed to photobomb from the back.

Download the deck for Design Hacking: A Great UX without time, money, or design talent (8 MB)
Plus links to the eventWendy’s blog notes, and photos.

Back in the saddle

First, this is my first real blog post since November 2011 (two years)! It’s not for a lack of ideas—I have a backlog of over 50 excellent topics. Rather, I haven’t had any spare time because business has been excellent (37 onsite UX Design Essentials Workshops and 17 public UX Design Essentials classes since that last post), plus the time required to write, produce, and recover from my new book UI is Communication, which was published by Morgan Kaufmann in June.

I have just now recovered enough to hopefully start blogging again regularly. It’s good to be back!

A tall order—but doable

Obviously this topic is a tall order—is this goal even remotely realistic? I think so, but you have to believe three fundamental ideas:

  • We waste a lot of time and money on UX design now. Non-designers waste an enormous amount of time creating hard-to-use UIs because they don’t know what they are doing. Experienced designers often waste an enormous amount of time because traditional user-centered design processes are overly dependent upon user research, user testing, and lots of iteration.
  • We don’t leverage what we know. Generally, we know a great deal about our target users—we’re just so focused on what we don’t know that we don’t even realize what we do know. There are basic attributes that all users share that we can take advantage of and use to avoid wasting time.
  • The best is the enemy of the good. You need to make solid design decisions quickly and confidently—even if they aren’t ideal. As an entrepreneur, you don’t have luxury of making perfect decisions with the ideal design process. So, let’s define a “great UX” is one that provides value, and is simple, easy to use, and intuitive for its target users. If we nail those, any shortcomings can be addressed later.

What we need is a perspective to help us make better design decisions more quickly and confidently. Not only does such a perspective exist, but as you will soon see it is one that we already know!

Failing fast…or just plain failing

Traditional user-centered methods require user research, requirements gathering, sketching, prototyping, user testing, and lots and lots of iteration. But there are several challenges, especially if you are in a hurry:

  • User research Frankly, the typical result of most user research is to discover that users haven’t a clue what they want. Or worse—users think they know what they want but really don’t. There’s an old saying: listen to your users, but ignore what they say. What this really means: you have to ask the right questions and interpret the answers. Users aren’t designers, so we can’t expect them to design their own UIs. Good user research takes a long time and is hard do to well.
  • Requirements Gathering requirements works well if they really are requirements. Often requirements are arbitrary, ill-conceived stealth UI specs. The resulting UI might not work well, but at least it meets its acceptance criteria.
  • Sketching Sketching is a great technique during ideation to suggest and explore different design directions. What I see most teams do, however, feels more of what I call “sketching a pile of features,” where the focus is on variations of physical placement of features on the page. This approach can work, but great UX requires going beyond features and layout.
  • User testing User testing is the heart of user-centered design, but I have seen a lot of testing of poor designs that just weren’t test-worthy. A common question determined by user testing: Will users figure out this non-standard, hard to find, poorly explained interaction with poor feedback that doesn’t meet their expectations. We should already know the answer. It’s “no.” No testing required. Often, if you have to ask, you already know the answer.
  • Iteration Iteration is great if it leads to rapid progress towards your goals, instead of just flailing around. When playing golf, I never shank the ball into the weeds and think “Yay! I’m iterating!” A lot of initial UI designs are like shank shots, and the subsequent iterations are slightly improved shank shots. Polishing a poor initial UX isn’t going to get us where we need to be. That first shot needs to be good for iteration to be effective.

These are all sound design techniques, but they take a lot of time and great design is hardly guaranteed.

From what I can tell, agile and lean UX techniques don’t help much here either. They still take a lot of time and money—often with mediocre results, especially for larger, more complex projects. The main difference is that you’ll know your UX sucks much, much faster. [Disagree? Please provide counter examples in the comments.]

The traditional approach favored by developers, which often boils down to putting raw the data structures required by the back end on the screen, doesn’t work at all. Find out why in Don’t design like a programmer.

What Does it Take to be a Mobile Designer Today?

Mobile is here to stay, with its own set of rules and constraints. At the same time, it’s a rapidly evolving platform, with new technologies and capabilities being added by the quarter. We can’t design for mobile like we used to do for posters and Web pages. So what toolkit and mindset does a mobile designer need to thrive?

Challenges and Constraints

Every medium has its limitations. Even mobile—one of the richest canvases a designer can dream of—still has particularities that need to be addressed:

Device fragmentation

There are countless smartphone and tablet models out there, each one with a different screen size, pixel density, and physical input (not to mention screen orientations). This means we can’t just pre-assume an iPhone 5 screen-size and design tightly to it. In mobile Web, responsive design allows us to plan for variations and make the design adjust to different screens with little effort. In native mobile design there is less liquidity, so we need to think our designs as tolerant to screen differences, and document the way such variations impact the layout.

OS fragmentation

As of today, we have three major mobile operating systems to consider: AndroidiOS, andWindows Phone, in order of usage. Every OS has its own set of interface patterns, externalinputs, and guidelines, not to mention variations between OS versions as well. Within Android things are even more complex: the version of Android a device will use is going to be influenced by the device maker, which can overlay its own layer of UI on top of it, and the device itself and its processing capabilities (not to mention the upgrade delays imposed by some carrier companies).

Even if this fragmentation does not make the design vary too much, it does influence how users experience an OS and what they expect from it. Consider, for example, that the experience of Android that most users have is actually the TouchWiz or Sense interfaces.


The way an app is designed can influence the amount of energy it uses. To put in other words, our design can leave our users without battery juice. Certain unnecessary visual effects or animationsmay need intensive graphic processing to run; a JavaScript-intensive Web page can also use a lot of power. And while our newly purchased device may be running our app smoothly, a 2-year old device may be struggling with it. These are just examples to illustrate the idea that a mobile designer needs to understand the impact that their decisions have in how an app performs and uses the device’s resources.

Development and cost constraints

Just because we saw it in that cool new app the other day doesn’t mean that it can be easily implemented. The way we design an app can make the difference between meeting and missing a deadline. If we don’t clearly understand the cost of the design decisions we make, we are basically putting the burden on the developers and creating an opportunity for friction later on.

Things to Unlearn

Many of us have been trained as designers in an era where a digital mindset was still incipient. That has historically caused us to approach digital design from a static point of view (exporting HTML directly from Fireworks, anyone?), and the misalignments that result from this perspective are still being taught in design schools. With mobile design the gap is even wider, as mobile brings a language for which nearly all of our current tools and methods fall short. So it’s time to update our mindset.

Mobile is not a canvas

HTML isn’t a canvas either. You can’t just throw things at it like you’re designing a poster. I suspect that designing in Photoshop is not helping us in making the switch, because we have been using it to design posters and illustrations and retouch photos for more than two decades. We’re still “painting” our interfaces, when screen size fragmentation and the dynamic nature of mobile call for a different approach to design.

Mobile is not a canvas … You can’t just throw things at it like you’re designing a postertweet this


Stop thinking of screens and start thinking of transitions

We are just starting to realize that the “screens” approach doesn’t cut it when it comes to mobile design. Thanks to apps like Facebook Paper or Yahoo! Weather that showcase a different way of designing, we know we need to design based on transitions rather than still images.

Transitions, once just disposable eye-candy, are becoming the center of a mobile experience. They not only give a live, interactive tone to the interface: they are an interface element in their own right. Transitions convey movement, space, change, and hierarchy and are a great ally in communicating the underlying app structure to the user. They also render a static approach useless.

Put your designer ego aside

You don’t need to be unique or original, especially when being “unique” means redesigning a known interface pattern just for the sake of uniqueness. More often than not, sticking to native UI elements and patterns is the smartest move to get the app completed on time. Rather than pushing your designed-from-scratch set of UI controls, focus on creating a simple, effective interface and create branding that shines.

For inspiration, real apps are better than designer portfolio sites

Many designers go to the likes of Behance or Dribbble in search for inspiration for their next mobile project. While you will always find beautifully crafted artwork on such sites, if you are not a seasoned mobile designer, those mockups can be misleading. Many of them are just that—mockups that have never met reality, and they can bias your judgment toward believing that you must create an entirely customized UI every time.

Get inspired by real, successful apps. There you’ll find the designs that have made products thrive. Their interface patterns have been tried and tested in the real world, and you know for sure they can be replicated.

New Skills to Learn

Know the platform

Just as you need to understand HTML/CSS to be a good Web designer, you need to understand the underlying structure of mobile apps too, and they are totally different from Web pages. For instance, they don’t “flow” the content as HTML/CSS do, and that changes a lot the way we should think about the layout. You won’t have the magic of CSS inheritance (at least not nearly as polished and not out of the box) to separate markup from presentation. Oh, I almost forgot: there’s no “markup” either.

You will need to get into some documentation for developers, read the manuals and understand how mobile apps are assembled, compiled, and published. Understand how a mobile device works and which things drain the battery the most. You may even need to learn some code basics, which pays off in the long run: you’ll be able to learn the developer’s language and you will design with efficiency and feasibility in mind.

Know the nuts and bolts of mobile technologies

Here’s a laundry list to get you started: location services (Wi-Fi- and GPS-based), Bluetooth, Low-Energy Bluetooth, beacons, front and rear camera, microphone, gyroscope, accelerometer, vibrator, fingerprint scanner, eye trackingvoice recognition, face recognition, tap detection, and the list goes on and on. Every new technology opens the doors to a whole new breed of apps. Your responsibility as a designer is to be aware of the cutting-edge.

Discover how far you can get with native components

Native UI components actually give lots of freedom to customization efforts, but you need to know exactly how to use them. If you can do most of your UI with native controls with a few tweaks, you’ll save a great deal of the developer’s time, which they will be thankful for.

Know the mobile workflow

Learn about mobile SDKs, install them and get them to run. Learn about mobile frameworks, such as RubyMotion, Xamarin, or Titanium. Get familiar with IDEs, where the graphic assets are located within a mobile project, how they should be named, etc.

Learn mobile interface patterns

All three major mobile platforms have similarities and profound differences on how they understand mobile interaction design. Their users expect different things from them. As a mobile designer, you should be completely aware of these differences and able to detect them on the spot.

Don’t stick with a single mobile platform. Try all three, or at least use Android and iOS on a daily basis for at least 6 months each. I did it, and it’s great—you get insights from each platform you’ll never get with casual use or looking at screenshots. And switching is good: being a fanboy is bad for a mobile designer.

Document and explain your UI

Since screens don’t tell the whole story anymore, you will have to document different states, transitions, and animations as well as how the app reacts to data and to the environment. Annotate your mockups, provide animation examples, and plan for device orientation.

Embrace Lean UX in the design phase

A modern designer should be a strategic designer. So your goal, rather than just come up with something beautiful, is to infuse into the design everything the team has learned about the product. Prioritize rapid prototyping in order to get early insights of what the users want. Save the detailed artistic work for later. Ensure that everything that is designed is aligned with the core value proposal and with the users’ needs.

Embrace Agile UX when implementing

You can’t just hand your mockups to the developer and forget about it, as most of the graphic requirements will arise when developing. There will be always screens not previously considered, new transitions and state changes that require new graphic assets. You need to be there and respond in real-time. So bring your chair next to the developers and be ready to step into the design when needed. Make sure that the developers only have their mind in development and that they don’t have to make UX decisions to fill your gaps.

Some Extra Tips for Mobile Web

Be responsible with responsive

For mobile Web, responsive design is not the one-size-fits-all solution. In some cases it makes sense, in others it doesn’t. It’s your responsibility to know where mobile demands a dedicated solution and where a few responsive tweaks are enough to maintain a single code base. Even if you are designing for “traditional” Web, plan your layout so it adapts gracefully to different screen sizes. And mind asset sizes: that nice full-screen 1Mb background image can make your mobile visitors waste money in cellular data consumption.

Use CSS and JS candy with caution

Yes, CSS animations, gradients, transitions, and shadows are great and incredibly easy to implement. And parallax is neat, plus all the cool guys do it, right? But these elements can take a toll on a mobile device battery. The more “live” visual effects you pile up, the more sluggish the scrolling will feel and the more power it will consume.

Even innocent CSS3 selectors can impact performance on low-end devices. Prefer ID’s and classes when possible, and try to keep your descendant selectors low. So if you can go with #submit instead of .main .container .form > div .submit, it’s a good idea.

Use the Right Tools for the Job

This is not at all a definitive list, and you will find great alternatives for many of them, but these are some good tools suited for mobile design (some of them are free, most of them are Mac-only):

  • Sketch for graphic design and @2x hi-resolution export. This is arguably the heir of the now discontinued Adobe Fireworks, and it has been done with mobile in mind.
  • LiveView and Sketch Mirror (a companion for Sketch) for mirroring your screen to your phone. Things look and feel very differently in a device. You’ll be able to easily test the size of interaction areas and controls.
  • Origami (by Facebook) and Quartz Composer for mobile interaction and animation prototyping. This is the closest you can get to a native UI prototyping without coding, and will give you a good introduction of the kind of logical thinking that programmers use.
  • PaintCode for creating UIs and graphics and exporting them directly to Objective-C.
  • Mockup web software. There’re plenty: Balsamiq, just to name a few.
  • Flinto for creating mobile interactive mockups that can be installed in your iPhone, mimicking real apps (taking advantage of Safari’s Add to Home Screen feature).
  • ImageOptim for compressing your PNG and JPG files without loss of quality.
  • Version-control software, preferably Git or Mercurial. Commit your assets and changes directly to the repository and in real time, rather than e-mailing a ZIP to the developer.

All of this is Already Obsolete

Not really, but the pace of progress in mobile technology is incredibly rapid. In no time we will be faced with the challenge of designing for wearables, smart appliances, and sensors connected to our mobile apps. New challenges and innovations come out daily. So ,if anything, being dynamic, flexible, and ever-curious as a designer is what will ensure you grab a seat in this roller coaster.

Illustration of smartphone coutesy Shutterstock.

10 Tips to Get You Started with Responsive Design

According to a recent study, a quarter of all Americans use mobile devices only to access the web. One out of every five people in the world own a smartphone, and over half of those people use it to surf the internet.

If your website doesn’t read well on those devices, you’re losing a huge chunk of mobile users. It’s time to embrace responsive design. Getting started can get complicated, but here are some tips to help.

1. Go Mobile First

Before you plan your design for desktop or laptop screens, think about the user experience on a mobile device. A lot of designers are embracing the mobile first movement. Why? Because mobile is becoming more relevant than desktop.

Approximately 1 in every 7 people on earth use their mobile devices to access the internet. Focus on how users interact with your website over their mobile phones first. Then build out your design for larger screen sizes.

2. Get Acquainted with Media Queries

10 Tips to Get You Started with Responsive Design

Media queries are a feature in CSS3 that allow content to respond to different conditions on a particular device. Media queries check for a device’s resolution, height, width and orientation. Then it uses this information to determine which CSS rules to apply. Media queries are the driving force behind responsive design.

3. Understand What Mobile Means for Your Users

10 Tips to Get You Started with Responsive Design

People interact with websites differently over a smartphone than they do over a desktop. Use analytics to figure out why a user is visiting your website on their phone. They may want to get quick information via the search bar. If that’s common among your users, then make your search bar highly visible and always present.

4. Use Percentages

10 Tips to Get You Started with Responsive Design

One of the hardest parts of responsive design is implementing a fluid grid. A fluid grid works together with media queries to display content on different viewports.

Instead of designing breakpoints for every possible viewport, you set a maximum layout size. From there, you define the widths and height by proportion, not pixel. This allows the site to rearrange the layout based on percentages.

5. The Need for Speed

10 Tips to Get You Started with Responsive Design

One of the drawbacks of responsive design is slow loading times. In fact, a recent study shows that the majority (48%) of responsive sites load anywhere from 4 to 8 seconds. That length of load time was acceptable in 1997, but in 2014, 64% of smartphone users expect a site to load in under 4 seconds.

The main reason behind a slow site are non-optimized images. Don’t let those images drag your responsiveness down. Quickly scale down hefty images with tools like Adaptive Imagesand TinyPNG.

6. Eliminate the Unnecessary

10 Tips to Get You Started with Responsive Design

Get rid of excessive elements, not only for your user experience, but also for website’s speed. A website weighed down by too many elements will not be pleasant to use or to look at. Use a program like GZIP for compression.

7. To Hamburger or Not to Hamburger

10 Tips to Get You Started with Responsive Design

The Hamburger icon – otherwise known as the three lines that show a hidden menu – is the source of fierce debate. Some people hate it, some people love it, but what is the best practice?

For responsive design, the best practice is always a matter of convenience. If a user must always tap the icon to see menu options, it becomes tiring. If you make the most popular menu items visible you can save users from frustration. Keep less popular links in the hamburger menu navigation.

8. Make it Readable

10 Tips to Get You Started with Responsive Design

Don’t make your users squint to read or pinch-to-zoom. Make your text size large enough to read from a smaller screen. I recommend a text size of 16 px, 1 em, or 12 pt. Here’s a useful conversion guide for px to em. When designing headlines, use a tool like FitText to create responsive text.

9. Use the Right Button Size

10 Tips to Get You Started with Responsive Design

On mobile devices, real estate is premium. Avoid small button sizes. Make sure your buttons are at least 44 x 44 px for comfortable tapping. Another handy tip is to use padding instead of margins. Padding increases the tappable area, but margins do not. Margins increase the white space around the button.

10. Design for Screen Orientation

10 Tips to Get You Started with Responsive Design

According to statistics, landscape orientation wins over portrait orientation 59% to 41%. Design your site to look good on both orientations, but pay more attention to landscape. Make sure that your images aren’t stretched.

Final Thoughts

Responsive design makes it easier for all users to view your website no matter what device they use. These are the basics that will help you get started with responsive design. What are some other best practices that websites should follow to give users a better mobile experience?


Making a Case for Animations and Interactivity

From a design standpoint, we’re starting to think of apps more as interactive experiences and less as passive objects. This shift in mindset can largely be attributed toApple’s iOS 7 overhaul, which emphasizes physics-driven animations. Since then, we’ve seen a slew of interesting animations work their way into some of the most popular apps.

With all the exciting motion UI elements out there, it’s easy to get caught up in the fun, while forgetting about the opportunity costs. On the other hand, spending the extra time on the right animations, for the right reasons, can increase usability, help define your brand’s personality, and create delight. In this post, we’ll examine animations and interactions implemented with purpose and consider whether they make sense for your brand.


For some apps, interactivity is a core component of the flow. In these instances, interactions guide users through the experience, keeping them oriented and contextually aware of their place in the app.


One of my favorite examples is in the Pinterest iPhone app. Using swipe gestures, users can swipe through pins and collections. The inclusion of this interactivity helps users navigate the app in a less cumbersome manner.

Pinterest animation

Swipe down to return.

Emotive Insight

Swipe left to continue in feed.

Emotive Insight

Swipe up for new feed

Circa App

Another app that does a great job of providing context through the use of interactivity is Circa, a news app that tracks stories you’ve followed, giving you periodic updates as they become available. A scrolling animation acts as a sort of visual timeline, with a dot denoting each new development in a story.

Circa animation

In both examples, the animations aren’t just frivolous inclusions. They actually provide real value to the app and its usability.


For other apps, interactions act as a way to communicate distinct brand characteristics and aid in users’ understanding of your brand. In this case, animations are a part of the branding exercise. Is your brand playful or serious? Robotic or bubbly? Choosing the proper animations will heighten users’ understanding of—and connection with—your brand.

Path & Tumblr

For Path, mobile is their only platform. By limiting users’ experience with their brand to this one context, they really have an advantage when it comes to using interactions to help define what Path is all about. Following suit, their animations are approachable and playful.

Path animation

Tumblr’s Android app has also been experimenting with this playful feel.

Tumblr animation


Tweetbot is another app that uses distinct animations to communicate something relevant about their brand. Compared to Path and Tumblr, the Tweetbot app feels snappy and mechanical.

@Tweetbot’s animations contribute to the sense that the app is a robot and give it unique charactertweet this


These animations contribute to the sense that the app is a robot and give the app unique character.

Emotive Insight


Other times apps include motion UI elements because they’re—for lack of a better word—fun. However, the amount of time put into designing and implementing these catchy animations can be a huge expense. Because of this, you will rarely see cash-strapped startups include these animations and interactivity. Overall, animations that fall into this category are going for the awe factor over the purpose factor.


If you flip through the introductions screens of the Flickr app you probably won’t notice anything special initially. Slow down, and you’ll see that a lot of thought went into how the images animate. A combination of parallax layers and clever masking allows the drawing to transition in and out with a very illustrative quality as seen in the GIF below.

Emotive Insight

While it’s certainly a nifty little animation that caught our attention, it doesn’t make the most business sense for startups concerned with maximizing limited resources. Flickr is way past the initial funding phase and has the time and money to devote to dazzling end users with thoughtful details.


Striking a balance between creating a heightened user experience and acknowledging business constraints will ultimately determine the success of your app in the long run. Be mindful of why you are using an animation or interaction in your app before devoting precious resources to it. Do this by asking yourself if an animation is for usability, personality, or delight. If it doesn’t naturally fit into at least one of those categories, it’s probably not worth the effort.

For more motion UI design resources check out this post from BeyondKinetic.

Designing Around the Whole Story with User Narratives

User narratives are becoming more popular as a tool for experience design. User stories, those discrete morsels of information that give us personas and a sense of action and motivation, are nothing new to design practitioners. User stories are often the trees, however, and the big picture—the context and purpose of the story—is the forest that designers fail to see. Taken alone, it’s difficult to see how the user stories fit into the overall experience.

User narratives link a set of activities together in a seamless flow. They describe specific activities within a work environment, presenting a “day in the life of…” view of the user experience; using a persona to give the experience life, but providing context and embedding experience goals into the story. This narrative is the first step in designing an experience, serving as a framework for creating the flow and the screens that support that flow. Throughout the process, the narrative surfaces requirements and keeps the focus on both the end user and the context of use.

Creating the Narrative

At Kronos Incorporated, an enterprise software company, we recently embarked on a major new initiative to accelerate into the cloud-based market, and the UX team was tasked with evaluating and evolving many of Kronos’s previously held assumptions about their products and users. Rather than using existing products and well-documented solutions as the starting point, the team wanted to start from scratch and encourage new thinking. We decided that a user narrative could encapsulate requirements, personas, use cases, and work context in one short document.

We had developed personas prior to starting the new initiative, and now the product manager and interaction designer focused on three primary users, fleshing out the stories to highlight each user’s goals and actions, and linking them together in a linear fashion.

The narratives focused on the day-to-day actions of the employees using our products, beginning with their time spent prior to their arrival at work. Moving through that arrival and into their experience on the job, we explored the ways they planned, monitored, and executed tasks throughout the day.

We actively removed any “how-to” descriptions, eliminating the solution-oriented language that has a tendency to creep into requirements, and concentrated, instead, on the why. Focusing on the intent and on the user’s motivation allowed us to create an extended user story that did not prescribe a solution, but instead articulated a series of interconnected business needs. Then we color-coded the value proposition within each narrative, visually depicting how customer benefit from our products throughout the day.

The Narrative in Action

The end result was a non-technical, entertaining description of the expected user experience that mapped product requirements to larger business goals, positioning the narratives in a way that resonated with senior management. Howard Edwards, a Home Depot employee and Patriots fan, is the star of one of the narratives. Below is an excerpt:

“After hanging up his coat in the break room, Howard is ready to work on his first task of the day, which is building a Fall Colors paint display. Howard is easily able to “punch in” and record details about the task he is working on. He can also look at information related to the task like: how long the task is expected to take, and what is the average time it has taken employees at other Home Depot stores in the region to complete the taskHoward is excited to see if he can do it faster than his colleagues. He also sees that there is an employee discussion thread related to this task. Howard joins the thread, which says that the stand used to build the display has a faulty leg, and that it has toppled over in several stores. The recommended fix is to prop the display stand up with a can of paint to keep it from falling over.”

Value Propositions:
  • Effective planning
  • Productivity
  • Membership in a community

The individual narratives varied in length, from 500 to 1,500 words. This easily digestible format made each narrative easy to present at the beginning of a meeting, and equally consumable to people unfamiliar with the project and those intimately involved.

Narratives Have Power and Prowess

The power of user narratives lies in this accessibility and in their chameleonic nature. In the early planning stages at Kronos, we used the user narratives to provide a sense of scope so we could begin identifying workflow and information architecture that would address the user needs. Later, the narratives were an effective primer for bringing senior project sponsors up to speed about who and what the team was designing for, and for onboarding new people into the project.

The power of user narratives lies in their accessibility and chameleonic naturetweet this


Using the narratives brought a refreshing new way to express the big picture and the details together in an engaging story. We found people identified more quickly with the business purpose instead of weaving their own story out of the functional requirements.

A good narrative will transform itself to meet the needs of the team employing it. Developers may create a user narrative to visualize the system as it will be used by a specific group of people, revealing use cases and requirements that might have otherwise remained undiscovered until the application was built. By using a narrative as an introduction and a leave-behind piece, stakeholders—including architects, testers, and service design teams—are able to understand users and their needs, serving to promote a user-centric view even as the UX is just forming.

Because narratives strive to answer questions about who and what and where, when, and why things are done—staying away from how things are done—they leave room for design teams to interpret the narratives for their own process. The narrative that developers use to optimize efficiency could be used to pitch an idea to venture capitalists or stakeholders. That same narrative could be adopted by researchers to help with usability testing, and by the marketing department as the basis for a campaign.

A narrative can go as deep as it needs to, for as long as it needs to, which is invaluable during fast-paced development, using lean and agile methodologies. In these environments, requirements are often being defined simultaneously with interface design. Starting with a narrative means that a team can identify the requirements and get feedback before designing, putting the focus on therequirements and not on the design itself.

Presenting Your Narratives

The very nature of a narrative is compelling to audiences. Humans are more likely to retain facts when they are embedded in a story—the narrative allows us to make an emotional connection with the information, resulting in higher levels of understanding and investment in outcome.

Understanding this, and realizing that the narratives could have a powerful impact across departments, our team wanted to present them in a dynamic way. We introduced the narratives to the company as part of a project kickoff, initially focusing on securing funding and resources while also confirming direction.

Given the diverse level of audience members, we elected to use a Prezi animated slideshow to bring the story to life in a very fluid way, using the narrative as a script while presenting photos of people, places, and things that contextualize the narrative within a realistic setting. We presented specific screen concepts of UI designs, highlighting how narratives drive design by focusing screen design.

Prezi slideshow

The Prezi presentation was compelling


Our user narratives were received positively throughout the company, and have become an integral and ever-evolving part of our design efforts. We plan on continuing to use the narratives as a central theme, serving to connect what can at times be an overwhelming number of functional details that are produced in a product development lifecycle. They provide a consistent storyline to ground planning discussions right up to launching and training, and rescue related conversations from edge cases and dark alleys. Put simply: We love our user narratives.


A Look at Flat Design and Why It’s Significant

There has been a growing tidal wave of flat designs on the web, and recent trend reports have confirmed that they’re only increasing in popularity.

Of course it’s easy to dismiss flat design as yet another fleeting aesthetic trend.

But further investigation into this new philosophy reveals that flat design is a lot more than “just for looks.”

What is Flat Design?

Flat design can be seen as the more sophisticated and versatile cousin of minimalism. While flat designs look great when made within the restraints of minimalism, they can also handle a lot morecomplexity; these designs have a crispness and clarity that can only be achieved by stripping away three dimensional effects. In its essence, flat design has two objectives:

  • Embracing the limits of the screen and working within those parameters rather than trying to disguise them.
  • Using this newfound simplicity as a starting point for streamlining designs, and making websites faster and more functional.

Flat design doesn’t necessarily mean that anything hinting at dimensionality is out of place. For example, this website features an angled illustration with a clear perspective. But the overall trajectory of the trend is towards simplicity and minimalism. The buttons are plain fields of color with sharp corners. There’s not a drop shadow, beveled edge, or gradient to be seen.

Flat Design as a Response to the Problems of Skeumorphism

For every action, there is a reaction. And in the world of digital design, flat imagery is cropping up more, in part as a reaction against skeumorphism. But flat design is more than just an artistic treatment; it’s a response to the serious functionality issues that skeuomorphism presents.

What is Skeuomorphism?

If you’re unfamiliar with the term, skeuomorphism is the practice of incorporating the look of an object that was made in another material into a design: what was once functionality becomes ornamentation. The reference is meant to evoke a sense of familiarity when encountering a new concept/tool/app online. This principle of imitation is all around us; a plastic chair that duplicates the shape of its wooden original is a good example how it manifests itself in the real world.

In the digital world, skeuomorphism is often associated with Apple products, which provide a great example of how it often looks in digital design. Just take a look at Apple‘s dashboard design:

  • The obvious components: The calculator, clock, and calendar are digital illustrations of their real-world counterparts.
  • The subtle details: The drop shadows and beveled buttons, the textured background, and even the shuddering movement of the second hand on the clock are also made to mirror physical products.
The Problems with Skeuomorphism

While there’s something to be said for the philosophy of skeuomorphism, there are a lot of issues that come with using it in digital design. For example, the analog clock featured in Apple’s dashboard is harder to read than its digital alternative, and it’s much more time-consuming to click the buttons on the calculator then it is to simply key them into the Spotlight function that also comes with Apple products. There are actually quite a few problems that arise with adhering to skeuomorphism:

  • By sticking to standards that are irrelevant in a digital format, skeuomorphism limits creativity and functionality.
  • Skeuomorphic elements look inconsistent when combined with less dimensional elements, and often the imitations don’t even make logical sense. For example, Apple’s Find My Friends app has a background that’s made to look like stitched leather. But this element has no relation to any real-world reference.
  • Skeuomorphic elements can take up valuable screen space and loading time with functionless embellishments.
  • They also tend to look wrong when combined with anything else that isn’t treated with skeuomorphic effects, limiting the entire design as well as any particular element.
The Solution Found in Flat Design

The response of flat design makes is to embrace the real limitations of the digital experience, and to do away with the imposed limitations of skeuomorphism. Anything on a screen will never truly look three dimensional, so why not embrace the beauty (and accompanying increase in functionality) that comes from stripping away illusory decoration?

Example #1:

Example #2:

Take the above examples of LayerVault’s website: example #1, the older design, shows a very detailed and elaborate illustration in the skeuomorphic style, which as previously mentioned, looks wrong in combination with the flat, clean appearance of the rest of the site. Compare it with the flat illustrative style of the new design, example #2, and there’s no contest as to which is more compelling and functional. The original illustration is distracting without being informative, while the modified one guides the eye to important information without eclipsing it.

Flat Design Harmonizes and Builds on the Goals of Skeuomorphism and Minimalism

The elements that bring flat design beyond a passing trend into a lasting and comprehensive strategyare twofold:

  • Flat design is tailored to fit an on-screen experience, as opposed to earlier styles which were made to mimic a physical experience.
  • That tailoring lends itself perfectly to enhancing the user experience in a number of ways.

Flat design takes the best aspects of minimalism and skeuomorphism and makes them work together. Like skeuomorphism, flat design looks friendly and approachable to users. But it does this by presenting a clear and engaging interface, rather than disguising and warping that interface to mimic something familiar. Like minimalism, flat design strips down visual elements to expose their essential functionality. But it’s not as restrictive in the way it does this; as demonstrated above, the importance of ornamentation is recognized and utilized.

Flat Design is the Perfect Style for Great UX

Flat design not only reconciles the goals of minimalism and skeuomorphism, it also is uniquely adaptable to usability considerations. By shedding unnecessary styling, it makes for speedier pages, cleaner code, and easy adaptability. It also lends itself beautifully to every type of application; whether viewed on a desktop or a mobile screen, flat design is always legible and adaptable.

No Bottom Line? No Experience

There’s a lot of of romance and poetry that goes into experience design: doing contextual research to identify pain points and problems; getting eye-to-eye with users to uncover their needs and stumbling blocks; brainstorming solutions with pals at the old whiteboard; working with developers to design sleek and sumptuous interfaces; crafting easily navigable solutions that are primed to disrupt the status quo; passionately pitching these darlings to wary stakeholders … it’s a tour de force.

UX practitioners certainly have a lot to be proud of, but when we get caught up in the swell of all this excitement, it’s easy to forget the business needs that underpin the work we do. Experience design can be costly, after all, and it’s most often the economic interests of businesses that fuel and fund the creation of experience-driven technologies. Much in the same way that different design teams use different strategies to create solutions that resonate with users, organizations have different approaches when it comes to balancing the creative drive their design teams bring against the business needs of the clients who sign the checks.

For DDB & Tribal Worldwide, Amsterdam, the secret to fostering creativity in their design teams while keeping business goals at the fore comes from a firm belief in what they call “relevant creativity.”

“Relevant creativity is not just about developing powerful communicative ideas, but also about creating a distinctive strategy as well as distinctive tactics and execution in media and technology,” says Ellen van den Berg, Head of UX for the agency. “This conviction can be found in the DNA of every individual colleague—needless to say, the UX team included.”

The design of their app for McDonald’s Netherlands, which won the Design for Experience award for Bottom Line Impact, found the UX team playing a crucial role in translating business needs into an app that was relevant to customers and met their needs.


“In the process of defining the app’s framework, the UX team clearly defined where we could be creative and ‘bend the rules,’ and where we would need to be strict and stick to strategic direction, while baring usability and technological restrictions in mind.”

According to van den Berg, the app is part of a larger marketing program aimed at building sustainable relationships with customers and servicing them with relevant information and offerings at relevant moments. The app has a clear KPI: bottom-line impact on sales. To reach that goal, their team needed a full understanding of the digital strategy from all client stakeholders involved—not just the marketing department.

The fact that McDonald’s is a franchising business, added extra complexity, as local franchisers have different needs for marketing and sales promotions at different times of day. Aligning the client needs and clearly translating them to business rules was “a challenge and a half,” van den Berg says, especially because the success of the app was hugely dependent on clear client input. The app coincides with McDonald’s carefully regulated marketing calendar, and all of the content to be flexible and customizable, so that external communication from McDonald’s to their consumers is aligned. This move helped established buy-in from the client as well as the consumer. “Together we created an app that is recognized by McDonald’s global as a ‘best practice.’”

Within one week of its launch, the app was downloaded/updated a million times, pushing it to the top spot in the Apple App store and in Google Play (in the Netherlands). More importantly, it brought customers into restaurant, with 2.1% of all McDonald’s customers over a period of 5 weeks using at least one mobile coupon. There was also a 47% increase in “tray value”—upsells for customers using mobile coupons.

Bring the Bottom Line Home … Depot

Customer-facing in-store computer systems generally have a bad reputation for offering stilted UX, so when SapientNitro was tasked with creating a digital kiosk that would augment the appliance shopping experience in Home Depot stores, they took the opportunity to focus on the importance of physical context within a customer’s journey.

“Often, the false assumption is made that digital practices that work online or in the mobile channel also suit in-store experiences,” says Pavani Yalla, Associate Creative Director Experience Design. “However, a customer’s needs and overall frame of mind vary drastically by location. For instance, customers expect very quick and efficient experiences while inside a store and tend to be easily distracted by the environment and a multitude of other products.”

The goal here was to increase in-store sales by 10%, and it was clear that for the in-store kiosk to succeed, it would need to be championed by sales associates. The KPI was usage: the solution needed to serve the customer when the associate was not available, and give the associate a valuable sales tool. SapientNitro’s solution, which was a runner up in the Bottom Line Impact category, allows customers to interact with a sturdy, fully branded electronic kiosk that allows them to compare appliances and work closely with an associate to complete their transactions.


In order to get all sides of a project closer to a solution that delivers the best experience while meeting the bottom line needs, SapientNitro engages clients in a series of workshops at the onset of a project to create alignment on a vision and also co-create a solution, keeping business and user needs in mind. To keep their team inspired while focusing on business goals, the agency relies on a collecting an interdisciplinary group, ensuring a balance between user needs and business needs.

“All members of our internal team are engaged up front during the conceptual workshops,” Yalla says. “This helps them understand the crux of the business needs and the goals of the project. However, we then allow the creative process to shape our ideas, being careful not to limit them.”

Balancing Profitability and Usability in Publishing

Gaining and maintaining profitability in the publishing world has been tricky proposition for many years, especially in the realm of academia. With a keen interest in transforming the publishing industry and the scattershot realm of digital learning, McGraw-Hill—realizing that textbooks are basically obsolete—worked with Salesforce to create an app their sales team could use when presenting their digital textbooks to customers on campuses worldwide.


“In a highly cross-pollinated industry like higher education, the success of this app [a finalist in the DfE awards] has spread to McGraw-Hill’s competitors,” says Mike Portman, User Experience Lead for Salesforce.

According to Portman, 85% of the B2B apps his team develops are still focused on the business needs over the users needs. “Too often, the product owner acts as a proxy for the end user, instead of allowing the end users to represent themselves,” he says. “As a design team, we are constantly faced with clients who ask us to make bad compromises in order to meet their business needs.”

Helping the client feel good about the right compromises makes it easier for the design teamtweet this

Portman sees hope, however, in the slow but steady growth of B2B clients who see the value of experience design—recognizing that the incremental cost for experience design, compared to the total cost of an app, has a very positive ROI. He estimates that experience design should represent 20-to-30% of a project budget, but says they’ve been able to make an impact with as little as 15%.

“Every product owner is going to ask for more features then they need, so the trick is to help them feel good about cutting those low value items. Even with those clients, who make the investment in UX, inevitably we will need to help them feel good about compromises and trade offs. Helping the client feel good about the right compromises makes it easier for the design team to create designs that make the world a better place, one interaction at a time.”

To maximize the effectiveness of their work, his teams engage everyone in the user research phase—extending past the design team.

“For McGraw-Hill, the Senior UI Designer conducted three ride-alongs, the Business Analyst did two ride-alongs, and the Project Manager and Senior Developer each did one,” Portman says. “Theirfirst-hand exposure to the end-user changed the way they reacted to every subsequent step, as we designed a highly contextual, fluid experience model. If they hadn’t had that exposure, they would not have been in a position to defend the highest impact components.”

Come Together

As experience design continues to expand its presence and importance across and within a variety of industries, it’s important that practitioners stay true to the processes and creative approaches to problem solving that helped put UX on the map in the first place. But with more and more businesses looking to experience design to improve their user experience while also improving their bottom line, we’d be wise to look for more ways to balance business needs against the needs of the holy user.


The Book Metaphor

When we design interfaces, we often rely on metaphors as a starting point and source of inspiration. If we are to choose a metaphor for reading, we quickly think about the most obvious of all: the book.

While the web isn’t exactly new, it’s certainly not old compared to print. Therefore it makes sense to borrow design decisions that have proven valuable for centuries and apply them to a digital counterpart. This very act of adaptation is often referred to as designing with metaphors.

In his popular post “What screens want”, designer Frank Chimero describes designing with metaphors this way: “In the case of software on a screen, the metaphors visually explain the functions of an interface, and provide a bridge from a familiar place to a less known area by suggesting a tool’s function and its relationship to others.”

If you put a trash bin on a screen, the person might not know what technical implications it has. But they already have a pretty clear picture on how it might work without having used it before. It’s understandable that designers feel inclined to use metaphors, but they don’t come without flaws.

Let’s have a look at the book. Compared to a magazine or any other printed material, a book is usually linear, has a one-column layout, barely any advertising, and a clearly understandable flow of information. But it goes beyond that.

As Hans Peter Willberg, author from the German book Lesetypografie so beautifully put it: “The book is a thing for the senses.”

White by Kenya Hara

White by Kenya Hara

We can’t mimic the smell, feeling, and atmosphere of a book. Despite that, companies like Appleand Amazon did such a great job in creating devices and apps that mimic most design characteristics of books so perfectly, that it changed the conceptual meaning of the word—and it’s at this point that new problems usually sneak in our user interfaces.

Shortcomings of the book experience have serious implications on the way we think about interfacestweet this


One of the key problems of metaphor-based design is that you can’t replicate the original object without raising new design issues. You have to choose reasonably which characteristics you need and which ones to leave out. While the book does have many benefits, it is certainly not flawless from a UX perspective.

An open book always gives you two columns

You need to remember which page you were on before. A short interruption and you might easily forget on which page you were reading.

It can get bumpy

The reader’s eyes have to make a considerable effort to change focus from the left side to the right, which can be tiring, especially for beginning readers.

It’s sliced in pieces

In a book, content is sliced in arbitrary parts. When you’re writing a book, you don’t think about pages, you think about content. A professional typographer can solve this issue to some extent, but pages are, in fact, a reading impediment from a UX point of view.

Enforced interaction

You need to turn pages. This leads to interruptions and a possible loss of context each time the reader turns the page. When we are reading a scientific book with formulas or source code, and the code is spread across several pages, it’s much harder to understand it. You end up leafing back and forth, in order to make sense of the things you read—a really frustrating experience.

Search and retrieval

In the beginning, using sticky notes might be a good way to keep your notes together and bookmark individual pages, but at some point it won’t work out anymore because of the book’s static nature, which brings us to the next point.

It’s static

Have you ever ordered a book and then found that the type is set too small? Since there is no way to change it, you’re usually stuck with it. (Maybe a good occasion to finally get those reading glasses you were thinking about buying.)


As you can see, the book isn’t as perfect a metaphor as we might think. The shortcomings of the book experience can have serious implications on the way we think about interfaces. It’s not so much about if we want to go skeumorphic, dimensional, or flat, it’s about combining the advantages of the metaphor without incorporating it’s limitations.

Apple did a great job in the new iBooks App on iOS7. While certainly influenced by their anti-skeumporph approach to design, the new version now allows you to change the reading mode from page flips to scrolling. So instead of implementing page flip effects that unnecessarily expose the user to the limitations of the book, they harness the advantages and possibilities of technology to create something that combines the best of both worlds.

When was the last time you used a metaphor in design? Please share the strengths and shortcomings you encountered in the comments section below.


“But what if the firm was driven, not by the goal of short-term profitability, but by the goal of continuous innovation in service of finding new ways of delighting customers? The new bottom line of this kind of organization becomes whether the customer is delighted. Conventional financial measures such as maximizing shareholder value are subordinated to the new bottom line. Profit is a result, not a goal.”

Writing for Forbes, Steve Denning elucidates the work of Clayton Christensen, whose book The Innovator’s Dilemma (first chapter here) continues to redefine business success in the 21st century. After studying many industries over several decades, Christensen concludes that a relentless focus on the user experience, not profit, is what is driving today’s best companies like Amazon, Apple, and Salesforce. Instead of squeezing every last drop out of the existing business (milking the cash cow), these companies are constantly searching for better ways to delight their customers, even if it cannibalizes their existing businesses. Consider that Apple’s greatest competitor for the iPod was not a product from another company, but their own next product, the iPhone.

The Innovator’s Dilemma starts with a brilliant question: “How can great firms fail?” Instead of assuming that firms become incompetent, Christensen assumes they are acting rationally even as they get upended in the marketplace. Instead of asking “How did they get so dumb so quickly?” Christensen asks “Why do leading companies with extremely smart leaders still get disrupted?”. Most armchair analysis generally assumes that leaders become incompetent…and of course incompetence can be used to explain anything.

Christensen, a Harvard business professor, is not a designer and did not intend to get into the game of user experience…nor did he focus much on design when investigating why leading companies tended to be disrupted by smaller companies with seemingly different goals. The importance of user experience wasn’t Christensen’s initial focus…but it was the end result of listening to what the data had to say.

And the data shows that user experience is a key differentiator. But why? Easy. Customer happiness is a leading indicator of the future health of any company. If you are making people happy, and continually invest and innovate to make people happy, then they will keep giving you their money for your product or service. It’s such a simple equation that it goes without saying…and because it goes without saying it is often forgotten. When you’re looking at spreadsheets with dollar signs on them all day it is very easy to lose sight of the happiness of your customers.

In the same way that tweaking a design can lead one to get stuck in a local maximum for that screen, optimizing your existing business around the current product line can get your entire company stuck in a local maximum…so that by the time you realize it’s not working anymore it’s already too late.

So what are the changes this leads to? Here are several:

  • Customer Happiness becomes the #1 Metric.To continually innovate and produce designs that make people happy, profit cannot be the #1 metric of a company. Instead, it’s an indirect play for customer happiness. To solve for customer happiness, now and going forward, is to continually innovate and look for opportunities to delight. One way to measure customer happiness is with Net Promoter Score, or NPS. NPS is a customer loyalty survey given out to customers that asks a simple question “How likely is it that you would recommend our company to a friend or colleague?”. If people are likely to recommend you to a friend you can be confident that they’re happy as a customer. Apple uses NPS to gather customer feedback…it is said their managers call unhappy customers within 24 hours based on this approach. (see my notes inMetrics Driven Design for more)
  • Design is never Done. You don’t release and forget. You release and renew. If the goal is continuous innovation then product teams are responsible for the designs they release and continually improving those designs. Obviously after release a product won’t be pushed on as hard, but its likely that it’s not perfect. Look at Apple’s iLife software…very small improvements every year but enough to keep the software at or near the top…and then a feature like Faces (one of my all-time favorite features of any software) keeps them there for several more years. If a product is successful then it moves the bar higher for everyone, including itself.
  • Experimentation is the new Normal. In addition to continually improving what you have, experimenting with new stuff becomes critical. Experimentation in design is still relatively new for many people. But those companies who are known for experimenting…Amazon, Facebook, Google, Twitter, are finding that it is a key to long-term profitability. It took Twitter years of experimentation to find the right advertising play, but now they have a model that really works for their customers.
    And those experiments should be simple, following Gall’s Law. Continually create simple things and launch them to figure out where the next big breakthrough will happen. The end result of this experimentation is that you compete with yourself. It’s so much better to be your own competitor than to have it be someone else.

Most designers and product people have known for a long time that a great user experience is important for long term success. But when business people start talking design it’s a good indicator that the playing field has changed.


Transform Customer Experience By Rethinking Your Ecosystem

Improving customer experience can increase annual revenue by more than $1 billion for large wireless service providers, airlines, and hotels—and by tens of millions to hundreds of millions of dollars for firms in other industries. But despite these benefits, only 11% of brands earned an “excellent” rating in Forrester’s annual Customer Experience Index study.

What’s holding companies back? As brands go to new lengths to transform their customer experience, their own ecosystems are working against them. That’s because most businesses—even young ones—were conceived with inside-out guiding principles, like reducing costs and optimizing operational efficiency, rather than putting customers’ needs first. For example, one Fortune 500 company’s decision to cut costs by outsourcing transactional data made sense years ago as it promoted its low-cost services, but today that company can’t pull data into its mobile app quickly enough to satisfy users, severely inhibiting the app’s perceived value.

What’s more, customer experience competition is getting fiercer as stragglers claw their way into the middle of the pack across industries. That’s good news for customers on the hunt for good experiences, but bad news for companies saddled with inadequate CX practices trying to stand out from the herd.

To reinvent their place in the market, brands must fundamentally re-think their CX ecosystems: the web of relations among all aspects of a company—including its customers, employees, partners, and operating environment—that determine the quality of the customer experience. At Forrester’s Forum for Customer Experience professionals, I discussed the three initiatives that brands must embrace in order to set themselves up for successful CX innovation:

1. Update organizations

Customer experience professionals possess the deep customer understanding and operational skills necessary to move organizations forward. Realizing this, numerous large corporations like Microsoft, General Motors, and Eli Lilly have appointed experience managers to sit on the executive team. That’s progress, but feisty Connecticut-based Newtown Savings Bank has one-upped the market giants. Committed to delivering on its promise that “the experience matters,” Newtown Savings Bank’s chief experience officer now leads marketing and public relations, and guides the bank’s strategic planning.

2. Upgrade staffing

Typically, managers are separated from day-to-day interactions with consumers. As a result, they too easily develop a mindset that is completely divorced from customer experience realities. Innovative companies are finding ways to infuse their management cultures with an empathetic shared understanding of customers’ needs. A Marriott executive told us that the company is bridging this rift by filling new digital and marketing executive positions with CX-focused managers. Emeritus changed the format of monthly conference calls between headquarters and building managers to make CX, not revenue or occupancy, the first topic of discussion.

3. Rethink partnering

Companies like Facebook, Tesla Motors, and Delta Air Lines see that controlling not only their data, but also the development and deployment of their software, helps them build unique experiences. For example, Tesla built its own eCommerce/customer relationship management system so that it can track a car from manufacture through sale and use. This unified view lets Tesla rapidly correct problems because it can see how a customer uses the car and how the car performs in response. Delta Air Lines has made a similar play by acquiring software IP and passenger data from Travelport, a travel reservations firm. The deal gives Delta greater control over booking, check-in, and in-flight services. As CEO Richard Anderson put it, “We need to own, control, and operate the data around our operations system. We’ll be able to make investments more quickly. We won’t be on a shared software model.”

In this competitive environment, delivering a good experience won’t be good enough for long.tweet this


In this competitive environment, delivering a good experience won’t be good enough for long. As businesses focus on improving their CX ecosystems, they will invent new ways of designing and operating business models, hiring and training personnel, and addressing their customers’ needs. Will your firm be one of the leaders?