ŷ������

Working as a UX designer in the enterprise world can be challenging, but the experience can also be fun and rewarding. If you enjoy solving complex problems and function well in an environment with well-defined boundaries, enterprise UX could be right up your alley.

Having worked on a design team in a large corporation for the past four years, I’ll share tips and observations for more successful design amidst the politics and complex workflows.

Knowing Your Users in the Flesh

Many��enterprise companies, including ones that build consumer products, have also established a presence in the B2B space. This means their software is used by very specific, and sometimes narrow, groups of industry professionals.

For example, UX designers work on projects ranging from medical software, to e-commerce platforms, to HR portals. Because these tools support a defined process, doing thorough initial research is crucial to designing a successful application.

No matter how much prior knowledge you have about the field, working on a B2B application dictates a steep learning curve. On the plus side, most enterprises have a well-defined relationship with their clients. You can leverage this relationship to get in contact with users to do field studies and interviews.

Photo credit: . .

One of the best ways to gather information about users is through immersion. Spending a couple of days in their workplace reveals wealth of information about their physical and social environment, tools they use, and all the nuanced responsibilities. You can watch your application in action and interview users shortly afterwards, which provides valuable insights into how what you can streamline. While moderated usability testing sessions in a lab or remote setting are still helpful, nothing beats watching how users interact with the product in a realistic setting (especially if you bring your team along).

For example, one of the companies I worked for built applications for ambulance paramedics. As part of their job, paramedics are expected not only to treat transported patients, but also collect and record their contact and insurance information. This task was challenging because of the stressful and fast-paced work conditions.

Photo credit: . .

To put ourselves in users�� shoes, my team actually spent a day riding in an ambulance to observe medics respond to 911 calls. It was eye-opening to find out how many responsibilities paramedics juggled in the little time they had. We learned that filling out patient reports was secondary to taking care of the patient and it was often done with many interruptions. Every second counted, so we had to create a stripped-down interface featuring information in bite-sized chunks, clear color contrast, and highly legible text.

Surviving the Dangers of UX Complexity

Complexity has become synonymous with enterprise software and it stems from legacy business processes. Users of enterprise applications are busy professionals who have important jobs and they can no longer accomplish these jobs within Excel or Google Docs. They look to enterprise application vendors for more powerful tools that don’t further complicate their work.

��

Image credit: . .

From the previously mentioned paramedic example, it becomes clear that most workflows involve multiple steps and interactions with others. While designers might not have the power to simplify these workflows, we can create applications that align with users�� goals in the most intuitive ways.

One of the ways to tackle complexity is to break the process down into key steps and analyze the purpose of each step. This approach brings redundancy and duplication to light and informs decisions about how to best prioritize functionality. As discussed in another post, before you design anything.

Understand the dangers of perceived complexity, which does not reflect how complex the software really is, but how complex it looks to the user. Reducing perceived complexity makes the interface feel simple and familiar, giving users the confidence in their own ability to learn and use the application. There are many ways to by relying on progressive disclosure, reducing visual noise, and reusing the same elements to minimize the learning curve.

Capitalizing on Teamwork

Unlike startups where designers work in many different capacities, responsibilities are clearly differentiated in big organizations. This translates into a larger number of people who work with a UX designer and have a say in the final product. Most likely, you will be partnering with project managers, software engineers, visual designers, content creators, marketing specialists, user researchers, and many others.

Photo credit: . .

On the upside, you have a larger pool of experts to draw on. Each of these specialists uses their knowledge to help you solve problems outside of your area of expertise. For example, a visual designer will take care of fonts, colors, and graphic assets, while you can focus on your part of the project (perhaps that’s the overall UX design, or just the ).

For more tips on collaborative design, check out the free ebook.

On the downside, engaging with multiple stakeholders adds steps to the design process and slows down decision making. When the slightest change, such as replacing an icon or removing a tooltip, requires a blessing from another team member, the project does not move forward until all approvals are received. Added wait times are dangerous because they stall the team and offset timelines. Also, be prepared for lengthy discussions with a lot of opinions tossed around the room. Even though everyone’s input is important, you will be exercising your ability to moderate these conversations and make hard decisions to avoid .

Here’s a few tips to smooth out the process:

Start broad, then narrow down �� In early brainstorming sessions, you want as much input as possible from everyone on the team. But once you’ve gathered all the ideas, only the core product team should decide which ones make the cut.


Explain design decisions as business decisions �� If you want to be taken seriously, you must know how to express design as a vehicle for growing the business. For example, instead of explaining how a minimalist interface reduces visual noise, take it a step further and talk about how it focuses user attention to improve conversions.


Master the art of feedback �� Understand that feedback is negotiation. Feel free to give feedback on other people’s feedback, relying on your own user research and usability testing results to justify decisions. People are much less likely to argue with facts than with design principles.

��

Photo credit:

In the example above from a Yelp redesign exercise, notice how CEO Marcin Treder proactively describes his thought process for even the simplest of design decisions. Using the , the two other team members are both able to quickly provide feedback without resorting to dragged-out email chains.

Based on the advice, the next step here is for Marcin to respond to Jerry and explain why high color contrast isn’t always the default solution, especially if your interface already uses vibrant colors. He’ll want to tie it back to the business value: a high-contrast button might be reserved for the “Sign Up�� call-to-action, which deserves to stand out for the sake of conversions.

Embracing New UX Projects & Responsibilities

UX practitioners who work for Fortune 500 companies never have a shortage of work. The abundance of projects ranges from brand new initiatives to redesigning and improving existing products. In addition, there’s likely to be ongoing work on , process optimization, and team building.

Photo credit:

Redesign efforts are commonplace because most large companies already have established products. The reasons behind the redesign vary: adding new functionality, giving product a facelift, updating the technology behind the scenes, and so on. A redesign project is an opportunity for the UX designer to shine because ditching the old convoluted interface and rethinking the workflow to be more intuitive on a lot of people who use the application on the daily basis.

Even the most conservative of corporations are facing pressure from startups and tech giants to shift from an engineering-driven culture to a design-centric culture. Companies with established UX culture set up their own “labs�� dedicated to research and experimentation with new tools. While that’s good news for designers, it also means that you need to develop more than just design skills to stand out:��

Be a master facilitator �� Great design requires great processes. Know how to moderate the design studio sessions described in Conduct stakeholder interviews. Whatever you do, don’t just sit back and design or else you’re not offering up your real value, which is injecting design into the company culture itself.


Think like a scientist �� Designers who can’t interpret data well will fade into obscurity. Understand how to use common analytics tools like Google Analytics so you can have more meaningful discussions with marketers and business analysts. Hone your ability to balance that quantitative data with qualitative user feedback. Understand that good design isn’t about finding the best solution, it’s discovering the right problem and building accordingly.


Build out your T-skills �� Specialize in one specific UI or UX field, but understand its implications on every other profession. You don’t need to be an SEO or HTML master, but you must understand how design decisions impact everything on the back-end.

Source: based on

Taking the Next Step

When you take design out of its “black box��, you’ll find that others become more receptive to new approaches. It might feel counterintuitive since you might fear being devalued by revealing the curtain, but the opposite is actually true. Know your user, interpret their behavior like a scientist, then share that knowledge with the whole team. Meanwhile, understand that you also need to empathize with your coworkers just as you empathize with users.

If you’d like to practice what you’ve learned, feel free to give a try.

I’ve played around with its collaborative design features and found them quite helpful for visualizing design problems and gathering feedback from different teams. It certainly helps cut back on all the email chains (which are plenty in large corporations). Going��from an idea to prototype in a single tool also helps reduce documentation��since stakeholders can see the entire process unfold with automated notifications. When you work in an enterprise environment with plenty of product requirements and technical requirements, it always helps to reduce the busywork.��

Have you ever wished to create complex sliders, tabs or large menus? Have you already spent long hours adding interactions to create such complicated elements?

The pain has just ended! By means of Multistate elements you can achieve such effect easily in UXPin. If you’re not using UXPin yet, you can sign up for���� With that, let’s get started.��

Creating a Multistate Element

First of all, you should select an element or some elements. As soon as you do it, you’ll see States icon in the properties menu where you can change your element(s) into a Multistate Element.

This is the right place to apply particular States to your element.

Editing States

After adding a State, enter its Edit mode by clicking ��Edit State�� icon in properties menu or just by double-clicking on your Multistate element.

You’ll see State switcher (marked in blue) at the top of your element indicating that you’re in the Multistate element edit mode. What’s more, around your Multistate element you’ll see a blue dashed line (hint: the same dashed line appears when you edit the group).

In the properties menu you can introduce all changes needed.

Switching Between States

You can easily switch between particular States of your element. Just enter interactions menu, in “Action�� dropdown see States: Set state, next state and previous state.

What’s interesting, you can choose some special effects such as flip or fade to switch between your states! Here you can see how they work:

Interactive Elements

We’ve prepared a small library based on Multistate elements for you! It’s called “Interactive Elements�� and you can find it in the libraries�� dropdown on the left side of the editor.

What’s inside? A ready-made clickable carousel, product thumbnail and tabs. You can adjust them to your needs freely. It’s also a great way to learn how Multistate Elements work �� just play with them a bit and you’ll see yourself!

Give what you’ve learned here today a try with .

Working on a product, like UXPin, is opening yourself up to an ongoing conversation with your users. Over time, you get to learn more about your users and how they’re using the product. And you also learn what’s bugging them (pun fully intended).

We learn a lot from users, receiving emails from them that something in the app isn’t quite working like they thought. We listen to them and work to make things right. Because those little annoyances can add up and it’s the little things that matter the most.

So with that, let’s take a look at the most recent updates that’ll make your life easier while using UXPin. And if you’re not yet using UXPin, give it a try with .

1. Right-Click Interactions

We heard that the right-click interactions weren’t triggering properly in the preview panel. When someone tried to use the interaction, it also opened the browser’s right-click menu.��Now you don’t have to worry about it anymore. Right click on element in the preview will only fire the interaction you wanted. Check it out:��

��

��

��

Above: On the left, the right click opening up the browser menu. On the right, the corrected interaction.��Photo Credit:

2. “All Icons�� Category

For those of you who extensively use the icon sets, this update will make you smile.��

Previously, when searching for icons you’d click on the “all icons�� category and get �� well not much. That wasn’t fun at all. We’ve fixed it as you can see in the two images below. Now when you select all you’ll get a treasure trove of icons to choose from.

Above: The icons now appear when you select “all.����Photo Credit:

3. Dragging Smaller Elements

One thing we introduced in our latest batch of changes is the ability to select and drag very, very tiny elements (smaller than 13×13 px) on the canvas.

��

Above: Now it’s easier to adjust UIs and move small icons.��Photo Credit:

4. The Search Box

We saved the best one for last: the search box.

One of the most commonly reported, small, yet annoying thing was very slow search box. It was lagging making finding an element cumbersome. Looking for the right element should be quick and painless. And now it is.

Above: The painfully slow search box that was annoying our users. Photo Credit:

��

Above: The improved, faster search box. Photo Credit:

More to Come

We’re continually making improvements to UXPin and listening to user feedback from all of you. In the meantime, start playing around with these updates as you build your projects.��

Give what you’ve learned here today a try with .

��

If someone asked you to define the word “flow�� or describe an example of one, what would you say? Would you immediately think about flow as it relates to user experience or interaction design? Maybe�� but, maybe not.

In this post, I’ll describe��how to create smooth user flows based on my experience as a UX designer.��

You may think about flow in terms of water. For example, how snowmelt flows into waterfalls and streams, which in turn, flow into reservoirs, lakes and the ocean.

You may also think about flow in terms of air. Did you know that a golf ball has dimples to (which reduces drag), causing the ball to fly farther than a smooth ball?

Photo Credit: New Brunswick Tourism (Herring Cove Golf Course, New Brunswick, Canada), via Wikimedia Commons

You can also measure the success of a flow (or lack thereof) in terms of efficiency. Just look at NASA and Boeing who collaborated on .

The teams outfitted a Boeing 757 tail with special technology that could potentially make flight more efficient. The impact of this? Lower fuel burn that might save airlines millions of dollars, which in turn, could save frequent flyers hundreds, possibly even thousands, of dollars on plane tickets. Sounds good to us!

How Flows Relate to UX Design

So what do all these notions of “flow�� have in common?

Flow depicts movement: movement through water, through air, through websites, through apps, etc.


Flow is variable: Flow variability can cause a golf ball to fly farther (or fall short); a plane to cruise faster (or have more drag); and an online shopper to checkout with ease (or abandon her cart).

Long story short, the concept of flow is important. The success of your website or app is often contingent upon how well your modeled flows meet the needs of your targeted users (personas), as well as the needs of your business.

Because lo-fi prototypes lack visual detail, the user flows are the heart of your prototype. Lo-fi prototypes help you focus on creating the smoothest flows for users to accomplish their goals.

Building a Flow with Users in Mind

When you build a user flow, what’s the first thing you should think about?

It might be obvious�� your users!

For example, if you are designing a business intelligence tool that allows users to create reports and share them, you will want to have at least two flows: one flow for the Data Consumer (i.e. the user receiving/reviewing the reports) and an entirely separate flow for the data analyst (i.e. the user building/sharing the reports).

��

Photo credit: Persona tool in

Before you start creating your prototype flows, you should clearly understand your personas�� motivations and needs. Ask yourself, what drives my personas and what are they trying to accomplish?

Once you’ve created your persona, you can better grasp user goals. Map out both sets of goals so you know what your prototype needs to accomplish.

For templates and helpful tips on creating personas, check out the chapter “Analyzing Users Before Diving Into Design�� in the��free ebook .

Considering Goals & Entry Points

If you are designing a website user experience, another good practice before creating your flows is to determine and map out where your users are coming from. Based on Morgan Brown’s advice in , we’d recommend you consider the following sources for your web or mobile prototype:

Direct traffic


Organic search


Paid advertising


Social media


Referral sites


Email

Photo Credit: “�� by is licensed under

Different entry points define different user behavior. Take a look at the difference in the below hypothetical scenarios for someone looking to buy a smartphone on Amazon.

Organic Search Visitor:

Searches for reviews of iPhone
Enters Amazon.com.
Uses search bar to find iPhone
Browses more iPhone reviews
Uses search bar to find Samsung Galaxy
Browses Galaxy reviews
Returns to original iPhone Amazon vendor
Buys iPhone

Direct Visitor: ��

Enters Amazon.com
Uses search bar to find iPhone
Buys iPhone

Now, we’re not saying the comparative shopping experience is that simple (or that the behavior between direct and organic visitors is always black-and-white). We are saying, however, that you must map out these different flows in order to deliver a comprehensively smooth experience.

To view some sample flows based on these entry points, check out the article . The author, , has created three different user flows, where each flow originates from a different entry point and aligns with specific user and business objective.

Creating a Flow Outline

At this point, you should know:

Which users/personas you will be designing your flows for
What user and business objectives need to be accomplished
Where your users are coming from (i.e. entry points)

Now you can think about what happens before and after a user is on a particular page. Like it’s��described in , you can link up your pages and create as many flows as you need.

One quick way that you can begin to begin exploring different page flows is by creating a simple flow outline. Before sketching or prototyping, a written outline helps you explore the most important part of your app or website �� the content. Building flows around content gives you a much more accurate assessment of the total number of pages required for the user experience.

Here are a couple techniques for outlining your flow.

Writing-first Approach to Outlining a Flow

You can use the writing-first approach, which Jessica Downey writes about in her article . This outlining method helps flesh out ideas and build a “common understanding�� of each page of your app or site.

Let’s create one for, say, a banking app. The scenario: someone wants to turn on auto deposit. Note in the outline below, content in [brackets] represents action buttons/links.

Step 1: Would you like to set up auto deposit?

[Set auto-deposit]

��

Step 2: Select Deposit Frequency

[Once per month][Twice per month]

[Every other week][Every week]

��

Step 3: Deposit Once per Month

[Select calendar day]

��

Step 4: Set Amount

Display amount field

[Set auto-deposit]

��

Shorthand Approach to Outlining a Flow

You can also try used by Ryan Singer at . Ryan’s approach treats flows as ongoing conversations.

For our banking app example above, we can create a shorthand for Steps 2 and 3 that looks something like this:

To see how Singer demonstrates shorthand for Basecamp and how he can illustrates complex flows with this outlining process, check out .

Sketching and Prototyping a Flow

Now we’re ready to create a low-fidelity sketch for each page in our flow outline and/or flow shorthand. The sketches bring your ideas to life with more detail around layout and structure. Once you have created your sketches, a simple low-fidelity prototype can help you test those ideas with users.

��

Photo Credit: “�� by is licensed under

You can sketch out user flows in a variety of ways, as demonstrated in and from . Before committing to any particular flow, however, create a simple prototype to validate that its alignment with your user and business objectives. It doesn’t have to be anything fancy —��your prototype can be so you can start understanding how users flow between content and actions.

Photo Credit: “�� by is licensed under ����

From there, you could continue iterating the sketches on paper and cut them out for a paper prototype, or move to a digital prototyping tool like .

Photo credit:

Real Examples of Flows and Their Teardowns

Now that we’ve shown you the process for creating your own user flows and turning them into sketches and low-fidelity prototypes, we’re going to leave you with some interesting examples of real UX flows for user onboarding.

Photo Credit: “�� by is licensed under

User onboarding is a great scenario in which it requires particular skill to balance user needs and business needs. The user wants to dive straight into the app with as little learning curve as possible. The business obviously also wants the user to dive in, but they also want to gently nudge users into upgrading their plans. To see deconstructed examples of what we’re talking about, we highly recommend going to .��

You certainly need to master the art of in order to create flows that educate users while helping them discover the benefits of upgrades.

Next Steps

When it comes to��mastering user experience, there’s absolutely no substitute for practice.

I’ve used UXPin in my own career to create user flows, interactive wireframes, lo-fi prototypes, and even animated prototypes. Apply what you’ve learned here��and feel free to create a so you can start experimenting.��

I’d recommend you start by wireframing basic flows like a mind map (making each box represent a step in a user action). Once you feel satisfied, feel free to build wireframes for each page, then add interactions to bring your flow to life with a prototype.��

Our welcomes its newest addition: . The guide explains the 10 hottest web design trends. Plenty of visual examples included.

Let’s take a look inside.

With advancing technology and changing tastes, this ebook keeps designers on the forefront of their field. You’ll find plenty of eye candy and thorough advice.

This “designer’s almanac�� spans 186 pages across 10 chapters (one for each trend). Each trend is deconstructed into simple techniques illustrated by 166 examples from dozens of top companies, including AirBnB, Google, Spotify, Dropbox, Reebok, Dribbble, Adidas, Bose and Uber.

The e-book helps you know:

The pros and cons of all 10 trends


How to design for the latest iteration of flat design


The tricks to keeping a minimalist layout from appearing dull


How long-scrolling facilitates responsive design


The evolution of card design, and its practical application


The best guidelines for HD web design


If you should use stock or custom photography


The best animation and interaction design techniques


How to balance creativity with readability in typography

Some sites look good and some sites function well, but there are a select few that do both with an extra sense of magic.

These sites engage us on a deeper level, command our attention and take root in our imagination. They draw us into their world and make us forget our own �� even if just for a moment.

In this post, we’ll analyze 18 sites with brilliant interaction design. We’ll explain how you can learn from them to be a better designer.��

Interactivity and enjoyment feed one another. In his book , psychologist Eliot Aronson explains that, when performing a task, a person is likely to justify the action in their head. This can easily lead into a self-fulfilling prophecy of the user enjoying any given site that they invest even a small amount of time into.

Interactivity does not always need to be about interactions �� emotionally engaging content like videos or poignant visuals can achieve the same results. In this case, simply watching and/or reflecting on the content is the user’s role in the interaction. This experience is just as immersive �� as anyone who’s ever seen a movie can tell you �� and forms the same connection.

For a more detailed analysis of how to design interactivity and its best practices, as well as the techniques behind 9 other modern design trends, check out the free e-book.��

1.��

Source:

We’ll start with a familiar name, KFC. This satellite site celebrates the life of their founder and mascot Colonel Sanders in a variety of different ways, including written history, oral history, music, videos, interactive maps, and even online games.

The entire site is joined through animation, with transitions between each area, starting with the site’s introduction. Interactivity is immediate, as hovering over the six initial choices creates movement (not to mention signifies to the user that these elements are interactive).

Source:

2.��

Source:

The popular travel site is a perfect example of interactivity without many real interactions: their video background is engaging enough. AirBnB depicts the magic in the everyday moments experienced when traveling, such as being woken by an excited child (above)

Much like a well-made film, these videos establish an emotional connection with the user. Aside from being fun to watch, the looping videos also serve the site’s business purposes: they establish some personal context around the service provided, and get the user excited about going on vacation.

3. ��

Source:

While not as well-known as the first two examples, the Lærepenger Quiz nonetheless has a commendable grasp on interactivity.

Right from the start, the site features a catchy value statement and only one main call-to-action, focusing the user’s options. The value statement is key: aside from explaining what the site is about, it’s phrased in a way to generate interest �� most people are naturally curious about how much they know about money, and would like tips on saving it. Notice which words are in bright orange.

Source:

As soon as the call-to-action is clicked, the site asks the user simple questions: name, sex, age, and location. While slightly boring, these questions are small enough that they don’t dissuade the user from continuing (the progress bar at the bottom removes more worry). The answering of the questions personalizes the quiz, generates demographic data, and deepens the user’s investment.

Source:

4.��

Source:

Chanel certainly knows how to create an atmosphere with their Café Society site. They combine video, still images, and poetically written product descriptions �� all united with an interactive scrolling navigation �� to immerse the user in an environment rich with the elegance and fashionability the brand is known for.

5.��

Source:

Scrolling in general is an excellent strategy for immersive interactions. The Seattle-centric site for the Space Needle shows off stunning visuals and displays content with scroll-activated, animated boxes �� a far more entertaining method than simply listing facts about the city. Like we described in the free e-book users aren’t normally accustomed to scrolling upwards on a site to learn more, but the navigation pattern works for this specific context because it matches the on-screen journey.

6.��

Source:

An art project unlike any other, Nest features pictures of personal objects donated by real people and a short, written description of the sentimental significance of each object. This alone would be enough to establish emotional connections with users, but the interactive design takes the experience to the next level.

Remember that this site is designed for art enthusiasts who probably appreciate a more avant-garde approach to interface design. The design works in this context, but definitely wouldn’t be suitable for a corporate site or ecommerce site.

Users can preview descriptions by hovering over stars, which reveal enticing descriptions such as “The most depressing thing…�� or “I was nearly divorced because…�� These curiosity-provoking statements lead to a zoomed in cluster of stars, with instructions for the user to “connect the dots�� with their cursor to display the full object and story.

Source:

The percentage of objects seen (with the word “achieved�� to frame it as an accomplishment) give extra incentive to fully explore the site.

7.��

Source:

Simple and straightforward, some sites like Beatbox Academy simply offer online games and tools to hold their users�� attentions. You can’t really show off the fun of beatboxing in a static format, so the beatboxing soundboard is a clever device to try out a few techniques. In doing so, they’ll more likely want to learn more and browse the site’s instructional products.

8.��

Source:

Education facilities, too, understand the value of engaging the learner in increasing both memorability and enjoyment. In the case of the Aquatic Macroinvertebrate Collection, users can examine lesser-known species by zooming in and out of various body parts and reading the descriptions.

The effects themselves aren’t groundbreaking, but they definitely create the wonder of exploring something new and exciting. Never forget that it’s not about the best design, but the right design.

9.��

Source:

Celebrating YouTube’s 10th Anniversary, this quiz uses a unique interface to encourage deeper immersion than other, more basic online quizzes. Going beyond clicking on the right word, users must drag and drop cute icons representing the answers into the “drop zone.�� This system allows for creative and fun use of icons (instead of common text), and entices more user involvement with a drag-and-drop system.

Additionally, the entire site is rich with superb animation. The answer choices all shift and “dance,�� creating visual delight while the user thinks on their answer. In between questions, the background expands and contracts, distracting from and thus easing the loading time. It’s a clever technique that we described in greater detail in .

Additional Examples
10.��

Source:

11.��

Source:

12.��

Source:

13.��

Source:

14.��

Source:

15.��

Source:

16.��

Source:

17.

Photo credit:

18.

Photo credit:

Conclusion

A main goal for any website (or movie, or book, or any piece of media, for that matter) is to establish a connection with the user�� and interactive design is one of the most reliable routes there. The difference between low and high interactivity may seem like only a few extra clicks, but the effects on the mind are much greater.

The extra emotional investment makes the difference between using a website, and experiencing one.

If you’d like to create similarly delightful and usable sites, feel free to start prototyping with our .��No code required, your imagination is the only limit.��

��

Traditionally, there’s been a divide between designers and engineers who are separated by either a wall or floors. It’s created a tension where both sides are constantly infuriated with one another. Designers feel that developers don’t adhere to what they designed and the developers think designers don’t understand that some things just can’t be implemented.

Yet more and more engineering-driven companies are filling their ranks with design talent. Now the two sides are having to collaborate more closely, which comes with its own set of unique challenges, which we dive deep into in our newest free pocket guide, .

We sat down recently with Quantcast Principal UX Designer Jonathan Smiley to discuss what it takes to change an engineering-focused company to be more design orientated.

Design is No Longer a ‘Nice to Have��

Before Jonathan joined��, he spent five years at as a partner and Design Lead. At ZURB, he worked with a lot of big companies, such as McAfee, on a variety of design projects. He was also responsible for creating the open-source framework .

Photo Credit: (Jonathan Smiley is on the right)

Now he’s leading the design charge at Quantcast because, like so many other engineering-driven companies, the company realizes how important design is to the longevity of their service.

“Companies are starting to realize focusing on design isn’t just a differentiator,�� Jonathan told UXPin.

A found that companies that emphasized design generally performed better. Those companies grew 299 percent between 2012 and 2013, according to researchers. As the researchers state in the study:

Great design helps make products and services more aesthetically pleasing, more compelling to use, and more relevant in a world that seems to change at an ever-increasing pace.

The minimum threshold for design is higher these days because of the growing “ubiquity of evolved technology,�� added Jonathan. The saturation point has been hit, especially for industries in Silicon Valley and the United States. Technology is all around us, all the time, making design more crucial than ever before.

“It’s not a nice-to-have. It’s a must-have,�� said Jonathan.

He also said that the onus is no longer to bring out newer gadgets, but to create the ability to do more with them. He added that designers must make applications easier to use or they’re going to shoot past people’s ability to actually use them.

He emphasized that designers need to decrease the difficulty for people. As he put it, design is about making people accomplish an action able do the thing �� whatever action that is �� while engineering makes the action work.

A Difficult Shift

Quantcast has been and remains an engineer-focused company with more than 100 developers. The design team in comparison is much, much smaller �� only five strong so far. However, that doesn’t mean that the company doesn’t know the value of design.

Photo Credit:

Co-Founder and CEO is a big proponent of design, according to Jonathan. While there has been a creative culture initiative to bring design to different parts of Quantcast, that doesn’t mean that the transition from an engineering-focused company to a design-centric organization has been easy.

“It’s a difficult shift,�� said Jonathan.

The biggest challenge for the design team is working alongside the engineers. “It’s getting better, [but there are] still a lot of executional issues because our skills set is misaligned with theirs,�� said Jonathan.

That misalignment can take it’s toll, creating overhead for the design team having to execute on a front-end code.

The engineering team at Quantcast are full-stack developers who aren’t as comfortable with HTML/CSS. The design team uses a lot of tech –��such as , interactions, animation, and responsive web design �� that engineers just don’t know as well as they do back-end code.

According to Jonathan, the engineers appreciate when designers who are code savvy, like himself, assist with the front-end coding. However, the design team doesn’t have bandwidth to do all the coding. And that can frustrate engineers who don’t have the skills yet to write code for Quantcast’s projects.

��

��Photo Credit:

Jonathan said that they’re trying to figure out the best solution �� like growing the design team to take front-end code off the engineers�� shoulders, or training them to do it themselves. Right now, it takes the engineering team longer to write front-end code but they’re doing their best to close the gap, said Jonathan.

However, Jonathan and the design team have been working on bridging the traditional divide between engineers and designers, creating a more cohesive working relationship. And that includes changing the process and getting the engineers more involved.

A Better Way

When Jonathan first arrived at Quantcast, he did what had always been done:��bring the specs to the engineers. He delivered mocks with detailed explanations that explained how to implement his design. The engineers then went at it. What came back was perfect �� well, pixel perfect, which doesn’t really work when you’re .

The engineers had actually measured the design down to the exact pixel, Jonathan said. He realized there must be a better way.

Jonathan decided to help the engineers out by taking a stab at the markup, then explaining what he’d done. His goal: teach engineers all the latest front-end techniques that the design team was already familiar with.

Quantcast encouraged more design thinking by holding code parties with designers and engineers. They also hold design workshops, including a planned one on typography.

Becoming More and More Design Centric

The Quantcast designers use a process that isn’t too different than ones you’d find in other design-centric organizations. They build wireframes and prototypes, using tools such as Sketch and InVision, then review those with stakeholders to further hone the designs. The design team also performs a complete visual pass.

��

Photo Credit:

The design team also carries out user tests, where researchers do iterative testing every two weeks. Once they have a final version, the designers code enough of the design so that the engineers can build it out.

When it comes to code, however, Quantcast doesn’t use a framework despite the fact that Jonathan spearheaded the popular during his time at ZURB. That’s because Quantcast doesn’t have specific browser support requirements, which means the design team can use any toys they want. Flexbox is one of those toys. Since Flexbox makes layout easy, the design team can build things from scratch, said Jonathan.

The designers give the engineers as much as they can. If it’s something more complicated, Jonathan is always willing to help the engineers out so that they can get it done. ��

“It’s better than what it was,�� said Jonathan of the process. And while it may be a work in progress, the process is helping unite designers and engineers rather than divide them.

��

Photo Credit:

��

Photo Credit:

Photo Credit:

You can help enable a design-centric and collaborative environment in your organization with UXPin. Get started with a��.

Ever wondered how to design��the perfect email template for any device? We’ve got you covered with��this practical piece that explains a mobile-first approach to email design.��

If you’re a smartphone user, you’ve probably experienced the frustration of opening an HTML email on your device and having one or more of the following things happen:

An overlapping mess of graphics, text and icons greet you and you immediately think “unsubscribe�� and/or “delete.��


The text is so tiny, you either zoom way in (and then you have to drag left, right, up and down to see the rest of the text) OR you get your reading glasses.


The tap targets are way too small for your giant fingers.


The spacing between the tap targets is unconscionable so when you try to tap one thing, you end up tapping three things.

So how do we, as UX professionals, fix problems like these in our emails? How confident are we that it’s even worth our time to address HTML email problems on smartphones? Case in point: in the company’s report, reported that email opens on mobile devices rose steadily from 8% in 2011 to 48% in 2014.

The math’s pretty easy on that one �� a whopping 500% increase!

Photo credit:

As user experience designers, we’ve all seen how Responsive Web Design (RWD) techniques and a “mobile-first�� approach have modernized websites over the last four years. But many of us are still in the dark about how to apply those principles to HTML email design. With more people than ever opening emails on their mobile devices, it’s time that we take a critical look at our design approach and examine the process for creating great email experiences, regardless of screen size.

Shorten the Responsive Email Learning Curve

If you are starting from square one when it comes to designing responsive HTML email layouts, you can find a vast amount of resources online that range from to .

It’s definitely worth your time to look at different approaches to designing mobile-friendly emails, including the as well as the .

Not sure where to start when it comes to actually coding your HTML email layout? Don’t worry about it. You can also for free.

And finally, check out the awesome that all email designers should print out immediately and tape on the wall.

Identify the HTML Email Layout that Achieves your Goals

What goals do you have for your HTML email? Maybe you want to maximize click-throughs on a “Learn More�� button? Or, perhaps you are pushing for a greater social media following via the Facebook and Twitter tap targets.

Whatever the case, you want to identify the layout that will help you achieve your business goals. For example, if you are looking for a 1:2 column newsletter layout, here’s a responsive HTML email design with a hero image, navigation, ample white space and touch-friendly CTAs previewed in an iPad Mini viewport.

Here’s the same layout in a previewer for the Gmail app on an Android device.

So, what kind of layout will help you achieve your business goals? As a UX professional, an important part of the process is to investigate the type of content you are sending to your audience and the actions you would ideally like them to take.

Build a Low-Fidelity Responsive Email Prototype

OK, so what’s next?

Try building a low-fidelity responsive prototype of your HTML email that includes breakpoints for the screen sizes and devices you’re supporting. If you cocked your head after reading that, it’s totally understandable. Let’s break it down.

A helps you visualize the hierarchy of your email layout. You put in the basic building blocks of your email without actually putting in content or pretty visuals. Think grayscale boxes with a sprinkling of text placeholders.


By adding responsive breakpoints to your HTML email wireframes, you can build an interactive prototype that simulates how your user will see the email on his or her iPhone, Android mobile device, tablet and desktop.

Step 1: Create a Wireframe for Mobile View

Because we’re taking a mobile-first approach to responsive email design, you’ll want to start by creating a wireframe for your mobile view. makes this super easy by having pre-made spaces and breakpoints for mobile device spaces.

If you haven’t already, go ahead and . Feel free to follow along by checking I’ll describe below. For the purposes of this tutorial, we’ll use Greeked out content—however, you should always use real content (or at least rough content) since that’s what your users care about most.��

Start by creating a new wireframe. In the tabs area, click ��+Add responsive version�� (you can ignore the Default tab).

When presented with the option to choose a preset, select “iPhone (320px)�� (mobile-first, remember?). Once selected, uncheck the checkbox for “I want to copy all elements from:�� because we don’t need it at the moment.

In the new 320px canvas, drag and drop your email elements. For example, you can put a hero image, some headings and a few text elements in place for the mobile-friendly email view. Customize the elements so they fit the breakpoint.

That’s our first design using the breakpoint for the responsive HTML email layout. Next, we’ll set up additional breakpoints to simulate email interactions for users on tablets and desktops.

Step 2: Resize Wireframes for Tablet and Desktop Views

Now that you have the wireframe of your mobile HTML view set up, let’s add wireframes for both the tablet and standard website views.

Again, click ��+Add responsive version�� in the tabs area and select “iPads (768px)�� or “Standard Websites (992px)�� from the present drop-down list. Time-saving tip: If you check the checkbox for “I want to copy all elements from:�� and select the initial breakpoint (“iPhone 320px��), all elements from that wireframe will be copied to your new wireframe and breakpoint.

Once you add your tablet and website canvases, you can easily rearrange / resize your HTML email elements for that view.

Step 3: Preview��Prototype

OK, now you have all the building blocks in place. You have your HTML email wireframes for mobile view, tablet view and desktop view. Let’s check out the simulation! In UXPin, click the “Simulation�� button.

Now, you want to make sure that you can simulate how your design will adapt to different viewports (e.g. mobile vs tablet vs desktop). To do so, click the Settings icon and check the option for “Auto Resize�� (lower right-hand corner of your screen when previewing).

Nice! Let’s test it out. We’re able to simulate our HTML email’s iPhone 320px breakpoint:

A tablet’s 768px breakpoint:

And a desktop’s 992px breakpoint:

Summing It Up

OK, so you may have skimmed the title of the article and then skipped down to this section (CliffsNotes, right?) or you read the entire article and are eagerly awaiting the summary.

In short, users are viewing emails on their mobile devices a lot more than they used to, which means designers should consider Responsive Web Design techniques and “mobile-first�� principles when creating their HTML email layouts.

As a UX professional, take a critical look at your approach to HTML email layouts and follow the steps below to ensure great email experiences, regardless of screen size.

Educate yourself on designing responsive emails


Identify the HTML email layout that achieves your goals


Build a Low-Fidelity responsive email prototype

Feel free to practice what you’ve just learned in UXPin with a .

If you design websites, chances are you rely on a few tools: a code editor, a graphics editor, a web browser. In most cases, one of each does fine.

Unless you need both Photoshop and Illustrator. Or you decide to test on more than one browser. In this piece, we’ll explore the symptoms of tool overload and how to cure the ailment.��

While they’re technically not design tools, don’t forget about email, and an instant message app. If you consider the browser to be an app platform, then you can add Facebook/Twitter/Instagram/etc to the mix of apps you use to run your day. And a prototyping tool. Oh, and maybe a checklist or project management app.

Odds are against you having to use every app at your disposal. At best you need to spend time learning their ins and outs. At worst, you use multiple tools for the same reason. It doesn’t have to be this way. In this post we’ll look at ways to evaluate your tool usage to streamline your workflow.

Tools of the Trade Become the Trade Itself

There’s a saying: ��a poor designer who blames his or her tools. Yet we can’t work without them. In a way, they define �� or at least influence �� our work. when they became practical thanks to Photoshop’s layer styles. Vectors were in when .

Above: Creative use of gradients. Image source:

Nowadays many easy effects like round-corner buttons, visual effects and �� yet again �� easy gradients. And Photoshop’s layer effects never went away.

Even given all that, it’s not easy to see ��always see how your tools affect your work. We’re often so accustomed to our tools that certain techniques become habit, even in the planning stages of a design. That’s one of the many reasons .

But realizing your tools�� influence on your work is easy when you step back and ask some hard questions.

Look at your body of work. What is your signature style, and is it tied to a particular tool or technique found only in a certain program?


Think about your favorite apps. What do you launch when you first boot up, and how much of your time do you spend using it?


When was the last time you tried a tool with which you had no expertise?


Do you swear that your favorite tool is superior to the competition?

The answers vary, of course. But the first step in identifying dependency is to realize its influence on your work. There’s building experience in a particular tool, and there’s letting it control your style.��

Great Tools Empower Without Control

Great tools let you do many things (to a certain extent) For example, tools like , , and our own wireframing & prototyping app aim to do several related things very well. They’re open-ended. They put you in control of an entire medium, and their shortcuts help you work efficiently.��

Some tools are more specific.

For example, turns video files into animated gifs. That’s all it does, and we find it handy to make quick snippets for product demos. But we rarely launch it, let alone keep it active on a daily basis. Such tools are secondary to our work, and stay safely out of the way when inactive.

Above: Screenshot of our prototyping app. Image source:

So what makes a tool vital or secondary? When does a tool get in the way?

The fastest tool is the closest at hand. The best image editor is the one that’s already running on your computer. If you only need to resize an image, you could use Gimp. It’s cheaper and may run faster than the venerable PS. Heck, even Preview �� which comes free on every Mac �� . But Photoshop often wins because it’s what people already have open. It’s a tool of tools, a few of which we use regularly (image size, save for web, adjust colors, etc).


The most capable tool is what makes you capable. A great tool doesn’t do work �� it enables you to carry out your craft. If you’re handy with bezier paths, then choosing a tool comes down to familiarity.


A dangerous tool comes with many tempting presets. Can you ? One-button designs are convenient if you’re in a hurry, but rarely qualify as a design process. You should beware techniques that substitute for skills and critical thought. That’s not to say that WordPress is a bad choice. But if you find your work looking like a bunch of defaults, then it’s time to rethink your thought process.

Ideas for your workflow

Unless you already curate your app collection, chances are your favorites have evolved naturally over time. Here are some ideas to take that a step further.

Close down a set of tools for one hour each day. The social media world will get along without you while you focus on your work. Or vice-versa, close out the Creative Cloud and focus on Facebook to stay current. The key is to discover if you work better when you focus on one type of tool for an hour. “Specialize�� your time.


Read the docs. Spend a few minutes to keep up-to-date with the latest features in your favorite apps. You may be surprised at the hidden features that developers add or refine, and how they might improve your workflow.


Clean out your dock. If you’re on a Mac, quit every app and . Then, as you launch each app, ctrl-click > options > keep in dock. That will help you focus on the apps you actually use.


Review your favorites. Putting your thoughts into words not only cements ideas about your favorite tools�� features, but it also helps others decide what to use, and why.

Above: A Mac Dock ready to show your most commonly used apps.

A few simple tests:

What apps do you have installed that are not running on your computer right now?


Which apps have you not launched in the last week?

Going Forward

Too often we rely on many tools to get the job done. By focusing on the tools that matter, we can be more productive. It’s like being with your tools.

Earlier we asked four questions. The answers vary per person, and even per year as everyone’s style develops. But they’re worth revising:

Is your signature tied to a particular tool or technique found only in a certain program?

If you answered “yes,�� then it might be time to up your game. Relying on an app’s quirk ties you to that app. The tool is defining your work when it should derive from your personal taste,

Take Photoshop’s layer styles, for example. Drop shadows are dead simple to apply, but assume that the underlying surface is flat. A few years ago people defied convention with their own curved shadows.

While this technique may feel , it illustrates how bucking native tools can lead to interesting new ideas.

What do you launch when you first boot up, and how much of your time do you spend using it?

Chances are, you use them quite a lot. Maybe , for example, But you might be surprised at how many background processes go unused, consuming valuable RAM without contributing anything to your workflow. Try this: disable or remove your “launch at startup�� apps, then re-add them as you discover their usefulness in your daily work.��

When was the last time you tried a tool with which you had no expertise?

Try something new. Shelve Photoshop and try or . Opt for over Illustrator. Take advantage of . Experiment with different tools and you’ll either discover one you like better, or realize what features you use most in your old standby. Your old favorite will still be there when/if you decide to switch back.

Photo credit:

One of the biggest trends of the 2010s is still evolving today. Flat design, which started to gain momentum in 2013, is still currently one of the most used �� and talked about �� techniques in web design.

But how has it sustained itself for so long? What is it about flat design that attracts designers and developers? And how has it dominated the industry in so short a time?

The Appeal of Flat Design

The benefits of flat design are written right on the surface. Take a good, long, look at a flat UI and you’ll really start to appreciate how what you see is what you get.

��

Photo credit:

For example, as shown by the Danish home goods retailer (above), flat design gives users exactly what they want and need: the content. In this case, there’s only enough navigation for someone to browse products, while the rest of the interface dedicates itself to high-resolution product images. Set against a grid of muted colors, the interface is meticulously organized yet visually interesting.

In fact, the three main reasons flat design is thriving today are:

It’s simple and intuitive �� As modern technology (both software and hardware) strives for simpler learning curves, simple interfaces feel like a very natural means to that end. Like we described in , removing unnecessary clutter and sticking with the basics allows users to focus on their tasks and experiences, which themselves are becoming more involved.
It’s perfect for �� Because flat design is naturally minimalist and grid-dependent, the content easily shifts whether you’re working with an adaptive framework (one design per device) or a responsive framework (one design that shifts based on device). Less items on screen also means less data to process on the back-end, which speeds up load times for all devices.
Self-perpetuating popularity �� No one admits to following the crowd, but when all the big players in web design are doing something similar, the smaller players are going to take notice and do the same. While this wave will crest at some point, flat design is built upon enough solid usability principles that it will certainly reincarnate (to a certain degree) in whatever new design philosophy strikes next.

So that explains the why of flat design’s success, but how can we account for the how?

The Evolution of Flat Design

While flat design seemed to almost take the design community overnight, it’s certainly taken some time to evolve. Early showcases of flat design were incredibly flat with a desire to lose all of the skin of the previous, but today’s flat design is starting to include more touches of flair and ornamentation (and not just for the sake of aesthetics).

Enter “Almost Flat�� or ��,�� as coined by designer Ryan Allen.

“Flat 2.0 is an evolution, not a revolution,�� Allen wrote. “Where flat design was a radical departure from the rampant skeuomorphism of days gone by, Flat 2.0 is a playful branch off the flat tree. Flat design is the Christmas tree, Flat 2.0 is the ornaments and candy canes. And presents. No tinsel though, that stuff is a mess to clean up.��

��

Photo credits: Left image- �� . . Rotated and cropped from original.

�� Photo credits: Right image- �� . . Rotated and cropped from original.

��You can see the evolution in a number of other places as well.

When Apple adopted flat design for its interfaces, the look was not quite as flat as one might have expected. Before the release, as flat design and minimalism were seeing a resurgence, many speculated about the “flatness�� the interface would include. While it was nothing like the previous hardcore skeuomorphic iOS look, there were hints of shadows and other elements that were not considered completely flat, as you can see from the comparison above. That’s where the “almost flat�� idea originated.

Most of the flat design being created right now is more in that style. There are hints of shadows, colors that did not fit the rules of flat and typography choices that break the ideals of an entirely flat design. This evolution is why flat design continues to stick with the web design community: it evolves well and into a number of

You can almost see the evolution in the three examples below �� like watching a monkey learn to walk upright and lose its hair.

Photo credits:

Photo credits:

Photo credits:

The first (HLK Agency) is distinctly modular and clean. The second (Agency Survival Kit) includes small hints of shading, shadows, and even texture with its envelope image. The third (Forest App site) incorporates completely flat elements with fearless touches of realism (the background photo in particular).

Compared to the of 2010-2011, flat design 2.0 is a much more restrained yet confident design aesthetic. The design philosophy incorporates just enough minimalism for clear visual hierarchy, but isn’t afraid to layer on some realistic effects to improve the of the interface.

Of course, the issue with skeuomorphism wasn’t in its design philosophy (in fact, we think slight touches of real-world familiarity improve usability) but in the execution. Most sites of the early 2010s era tried too hard, reflecting the real world as much as possible simply because it was the hip thing to do. Flat design was certainly just as guilty of its own indulgence (remember how heavily-gridded sites were around 2012?), but now it’s at least developing into a far more mature look and feel.

Material Design: The Ultimate Form of Flat Design 2.0?

Material design is perhaps the most interesting embodiment of flat design 2.0.

All you need to do, actually, is just take a look at the meticulously documented .

Google’s Material Design is rooted in three design virtues:

Visual cues should be grounded in reality
Basic design theory prevails in visuals
All motion should have meaning

These ideas are quite similar to the ideas behind flat design with two major differences: greater focus on motion/animation and layering of design elements. This makes material design sound a lot like.

��

��

Photo credit:

It’s easy to argue that flat and material design are incredibly similar or vastly different (some of the roots lie in the Apple versus Android debate.)

What we do know is both concepts share similar visual traits �� color, shapes and overall structure. Some of the difference (especially Material Design’s paper-like layering) lies in the root of the concepts. Material design is documented and focused, while flat design has evolved almost onto itself. There’s no doubt, however, that flat design certainly influences Material Design when you consider the bold images, crisp edges, and vibrant look and feel common to both methods.

Material design, if anything, takes a more practical stance than traditional flat design. By allowing for element layering along the Z-axis, it retains the visual maturity of flat design while being just skeuomorphic enough to communicate to the user.

Flat design arose as the antithetical reaction against skeuomorphism. Material Design, on the other hand, arose as an ecosystem made up of the best parts of flat design with an added dimension of physics. We go into more depth on Material Design in the free e-book, .��

Conclusion

When you consider the spirit behind flat design (visual simplicity) and skeuomorphism (visual familiarity), you find that both concepts can certainly co-exist. The tricky part, as recent years and the future will certainly prove, is finding the perfect balance between the two.

Material design is undoubtedly an evolution of flat design, but the design philosophy is still mostly reflected through Google’s web properties and Android apps. If flat design inspired material design, then it will be especially interesting to see how material design will influence the design languages to come.

If you want to create flat designs and give life to them, give UXPin a try with .��

��

��