Comics of the Week #392

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Working honey

A thief’s discount

 

Fun research

Can you relate to these situations? Please share your funny stories and comments below…

Source

7 Reasons Clients Don’t Trust Your UX

One of the most frustrating scenarios for a UX designer is when a client’s team takes time to think things over and comes back with a batch of design changes without any explanation.

Everything may seem fine: you had perfect communication with the client, gathered and formulated all the requirements for project deliverables and put your heart into the work. But something goes wrong and your design concept gets turned down.

Let’s figure out the reasons why clients don’t trust your UX design and subsequently reject it—and trust me, it’s not because they’re overly officious, or in a bad mood. This article is for passionate UX designers who want to develop enduring relationships with their clients.

1. Your Client Wasn’t Involved in the Design Process

The process of creating a product takes time and effort, every designer knows that. However, your client may have another opinion. They may wonder: What’s so hard about opening up Photoshop or Sketch and crafting interfaces? This is a common pitfall in communication between a UX designer and a client; your client isn’t involved in the design process, so they don’t understand what’s happening and why it’s happening.

To solve this issue, consider involving your client in the process of user experience design to increase the chances that your design idea will be understood. If the client knows all the design stages well, they are likely to realize the benefits of each stage for designing a great user experience. As a rule, UX designers divide the design phase into several stages that include requirements gathering, research, low-fidelity prototyping, high-fidelity prototyping, and user research. The client should be included in each of these stages.

Requirements Gathering

At this stage, project requirements are elicited from the client. What’s the goal the client wants to achieve? What features are we going to build? Who’s our target audience? We ask these questions to map out the project and establish our client’s expectations.

Research

This stage determines how the product will be positioned on the market and defines the end users and their preferences. The research stage helps you define your scope of work and prioritize your tasks.

Low-Fidelity Prototyping 

At this stage, you present low-fidelity prototypes ‒ in other words, rough sketches ‒ that represent the product. The benefit of low-fi prototypes is that your clients are able to see at least a rough project framework while realizing that the work isn’t done yet, and therefore not associating low-fi prototypes with the finished product.

High-Fidelity Prototyping

By sharing high-fidelity prototypes with your clients, you’re able to validate your design ideas before they’re implemented at the production stage. High-fidelity prototypes help you and your clients find out which ideas are worth implementing and which aren’t, discover if the product has value, determine how user-friendly the product is, and so on.

Usability Testing

Even though different companies implement usability testing at different stages, UX designers know that it’s better to eliminate testing of low-fidelity prototypes since they often require additional clarifications. However, testing high-fidelity prototypes that precisely imitate your end product allows all test participants to behave naturally and allows you to detect system flaws and fix them before such fixes are too expensive.

2. You Didn’t Establish Client Expectations

On the web, you can come across detailed manuals on client expectation management with regard to companies and design agencies.  As a rule, establishing client expectations falls on the shoulders of project managers, business analysts, or core executives—leaving UX designers uninvolved. So what should a design team do in case a project is past the phase of requirements gathering and the client’s demands are already finalized?

Consider explaining to your client’s team why each phase of the project matters.

  • Collaborate with project stakeholders at each stage of design so you’re able to continuously get feedback on your design.
  • Coordinate your UX strategy and your project vision with your client’s goals.
  • Plan reviews of updates and reports when all stakeholders are available.
  • Give reasons for prototype changes by appealing to your target audience’s interests and the feasibility of features.
  • Realign priorities; discuss possible risks tied to sudden prototype changes or changes to the stakeholders’ schedule.

3. You Forgot Your Strengths

A UX designer’s work stretches beyond the bounds of simple interface design: you have to keep up with the latest design and marketing trends, become a kind of psychologist to understand the behavior of your users, and be a good researcher.

One common kind of research conducted by UX designers is UX competitive research or UX-focused research. UX competitive research is aimed at evaluating the strengths and weaknesses of competing designs—like usability and interaction design—and comparing them to your own product.

The key benefit of UX competitive research is figuring out if your product rivals your competitors’, and generating new ideas to solve your current UX problems. In addition, the deliverables of UX-focused research, such as spreadsheets with detailed explanations of strengths and weaknesses of your competitors’ UX patterns, may serve as a specification for your project.

If you decide not to bother with UX competitive research, your client may be disappointed. As a famous proverb says, “forewarned is forearmed”: if you don’t understand your client’s business and its competitors, then you may fail to reach your target audience.

A few tips below will come in handy if you want to satisfy your client with a comprehensive competitive analysis.

Get Started with UX-Focused Research

Select Your Competitors

A product’s advantage is based on its novelty, uniqueness, and simplicity. Choose competitors whose products share the same values and features as your product so that you’ll be able to get your end-users’ expectations right on the money.

Select the Criteria For Assessment

Select the criteria that will help you implement an adequate assessment. Your business goals and issues should be reflected in measurable and explicit criteria. For example, for an ecommerce website you’ll likely include the following criteria: “Can users add items to wish lists?” or “Is the In-Stock feature available?”

Create a Matrix with Competitors’ UX Features and Patterns

Transfer all the findings about your competitors into a tangible matrix  that reveals all the strengths and weaknesses of your rivals’ products and compares them to your own product.

4. Your Prototype is Perplexing

On the internet, there are dozens of articles concerned with prototyping. I won’t preach about the importance of prototypes here. Sooner or later, all designers start to realize they need a draft version of a product that can be revised or simply thrown away if a design solution doesn’t work.

Although the benefit of prototypes is obvious, clients can still face a challenge making sense of your prototype. While you’re working closely with your design and keeping every detail in your head, even a small update can make your client go through all the screens again to get the big picture. Such confusion often becomes a reason for new changes, since a client doesn’t have a clear understanding of the interactions between objects.

This is a common predicament for interfaces that revolve around objects like blog posts or products: it’s hard to determine actions before the objects exist. Instead of heading straight for flows and interactions, it’s better to define objects and what actions they’ll be associated with.

The adepts of such an approach call it OOUX: object-oriented user experience design. I hasten to point out that “object-oriented” here is not the same as in “object-oriented” design in programming, even though the concepts share the similar idea of looking at a system through the lens of objects. OOUX means determining and designing objects first and defining actions (like sign-in, checkout, and search) after.

In contrast with a classic human-centered design approach to prototyping that strives to define first how user personas will achieve their goals (their actions), OOUX provides a universal language for developers, UX designers, and clients since people find it easier to perceive a system through objects rather than actions.

Lately, I’ve been trying to postpone designing a prototype as long as possible. Instead of designing interactions, a client and I get to decide together on objects inside the system. Such an object-oriented approach helps us elaborate a framework’s structure faster and better. Let’s take a look the object-oriented approach to prototyping:

5. Your Specifications Aren’t Complete

As I just mentioned, UX designers use an object-oriented approach to provide a better understanding of a system and its objects. The end result is a transparent and clear visual model of a framework.

However, while you’re making decisions in a group chat, during a brainstorming session, or in comments on a shared document, your specification fails to get updated. Therefore, your prototype is at risk of causing misunderstanding and becoming a source of argument if it lacks a CTA inventory.

CTA inventory is a term first introduced by Sophia Voychehovski ‒ a UX designer and avid follower of the OOUX community. A CTA inventory is a list of calls-to-action (CTAs) applied to objects inside your system. Examples of CTAs include “create,” “edit,” and “delete.” These CTAs are likely to be applied to blog posts (objects) inside a blogging platform system.

Sophia Voychehovski differentiates CTA inventories according to their fidelity. A low-fidelity CTA inventory includes a basic roadmap of all objects, content, metadata and CTAs inside a system. A high-fidelity CTA inventory features all the low-fi items plus information like user roles, CTA rationales, placement, priority, and more:

CTA inventory is a specific term applied in an OOUX environment, and we’re not trying to convince you that such an approach is the only right way to deliver a successful UX design. The point here is that you should experiment and try out approaches to communicating and collaborating with your client.

The benefit of a CTA inventory is that it offers a matrix with all the objects and interactions within a system. The matrix serves as a great visual alternative to a traditional prototype and long descriptive specifications. Such an approach allows for faster decision making, idea generation, and synchronization of updates. A CTA inventory can even help you get an immediate response right on the spot! A great plus of a CTA inventory is that it encourages iterative development and better prioritization.

6. Your Design Doesn’t Tell a Story

World-famous companies like Apple, Airbnb, and Zappos generously share their stories with the world. We all know their values, their corporate culture, and how they care about their users. Storytelling plays an important role in a company’s success: thanks to stories, companies are able to convey their value propositions to people and engage with large audiences.

Professionals in many spheres including marketing, copywriting, and user experience design are familiar with the concept of storytelling. In UX design, this concept is relatively new. Generally, there are a few ways that UX designers employ the power of storytelling:

  • as an approach to marketing and selling a product;
  • as a framework in UX design (an approach to defining user personas and their stories to get insights about end-users);
  • as a technique to build an emotional response from end-users (a storytelling structure in UX design that strives to convey a product’s feel).

Embody captivating content in a classic narrative structure—beginning, body, and climax.

Storytelling as a UX framework doesn’t replace detailed interaction design. However, stories help you to reflect a connection between your concept and your client’s idea. Stories can be used at different stages of UX design.

While your clients and end-users don’t observe the process of crafting user personas and background stories, they’re able to perceive how storytelling builds a bond with a product. Long story short, without a well-built narrative  in UX design, your product will look like a batch of typical screens and formal descriptions—and this will likely dissatisfy your client.

7. You Don’t Have a UX Strategy

Why might a lack of a UX strategy become a reason for a client’s mistrust towards your prototype? A modern approach to creating a digital product should be based on real evidence‒not hypothesis‒and on a deep understanding of business goals and user needs. Working on screens that vaguely reflect a real user’s behavior results in endless iterations with design changes and, as a result, an incomplete product.

A UX strategy is one of the indicators of a mature and deliberate approach to user experience design. According to Jaime Levy, UX strategy combines the concepts of UX design and business strategy to present a toolkit for UX designers on how to create products aligned with business goals. UX strategy includes setting the vision of a future user experience, prioritizing your goals, and creating a model of how you’ll assess commercial success.

The goal of a UX designer is to demonstrate the experience an end-user is going through and share the knowledge the designer gains with all the project’s stakeholders.

Modern companies implement UX strategies to do the following:

  • Outline business goals and align business goals with UX design
  • Prioritize business goals
  • Get measureable KPIs for UX design
  • Map out areas of responsibility for UX design

It’s important to point out here that a UX strategy soaks up everything that was mentioned in this article: it involves your client in the design process and aligns business goals with UX design. It’s an attempt to mitigate confusion while still at the prototyping stage, and uses innovative approaches like storytelling to reinforce engagement with your audience.

Wrapping Up

Despite the fact that the term “UX” has been around for a while, it remains a challenge to prove to your clients that focusing on your users’ needs is a must and that a product’s success depends largely on UX design solutions. However, practice makes perfect. Analyze your communication with clients: decide what works well for them and what doesn’t; see how they react to your ideas and how you can facilitate cooperation.

As you might have already guessed, UX designers should be empathetic and smart to comprehend their clients. So don’t stop improving, and eventually you’ll be rewarded with the satisfied smiles of the people you design for.

 

Bio

Hi, my name is Violetta. When I’m not designing interfaces and user experiences at RubyGarage, I do abstract painting or sip cocktails at my favorite bar. Follow me on Dribbble and Behance.

Source

NBC News Redesign is On Its Way

NBC News is getting a new design! Read all about it! There are so many young people who may never get that joke, unless they like watching period movies. Well, much like humor itself, NBC News is moving with the Times (sorry), and building themselves a whole new design system, in conjunction with the external design agency Code & Theory.

The current NBC News site remains untouched, which gives us time to grab some good before and after screenshots. The new design system is currently being tested on two sub-sites — or “verticals” — called Mach, and Better. And I have to say, it’s looking good.

Like many other sites, NBC News is leaving behind the classic newspaper-esque visual theme in favor of something more modern. In fact, the new design system goes further than the tech-tabloid (techbloid?) style recently embraced by Huffpost, and straight into tech blog territory. Perhaps it even stretches into design blog territory.

The Current NBC News Site

Their new style places a stronger emphasis on imagery and video than the old one, presumably out of a desire to give context to every headline (and get more clicks). But no, they really doubled down on the video as well: they straight up developed their own HTML5 video player for use on their sites.

The Mach Vertical

Additionally, they have embraced a touch of asymmetry on both the desktop and mobile versions of their sites. They’ve gone for a streamlined and pixel-perfect variation on the increasingly popular “collage” look. In the meantime, they’ve actually toned down their traditional branding a little in favor of making each sub-site look like its own thing. This is largely accomplished through the heavy use of accent colors that are different for each vertical. That in itself is a nod to the peacock logo, but it also serves to separate their properties. The tech-minded vertical “Mach” goes for the classic deep blue, while the self-improvement and health-focused “Better” is accented in green. I find myself compelled to suggest a nice depressing brown for their political section, when they get around to it.

The Better Vertical

The typography is solid, and designed to scale to all screen sizes. The headlines are set in the beautiful Founders Grotesk Condensed, and the body text in Publico. These typefaces were chosen for legibility, and as I have yet to encounter any issues, I’d say they got it right.

The really big thing about the design, however, is that it’s meant to be modular, instead of relying on strict page templates. They want to be able to put any kind of content pretty much wherever they want to while maintaining consistent branding and style, so flexibility was a priority. Given the sheer variety of content a large news agency might have to include on their site, this is important.

They didn’t just update the look, they updated their whole process for putting news where people can see it

Now, does this design system live up to its aspirations? Well, like all design systems, it’s probably going to need some iteration, which is why NBC News made the very smart tactical move of testing it out on sub-sites. Still, looking at Mach and Better, and reading the stated goals for the design system in their Medium post, I’d say they got awful close. (Incidentally, they talk about their tech stack in that post; they use Drupal.)

The longer I look at it, the more I realize that the visual refresh is, perhaps, not the most important part of the redesign. They didn’t just update the look, they updated their whole process for putting news where people can see it. That said, I do love the new look. I might be biased, given how similar it is to some design and tech blogs, but I do.

I think this revamp is going to work out for them.

Source

4 Smart Ways to Use Illustration in UI Design

As the saying goes, a picture is worth a thousand words. Human beings are highly visual creatures able to process visual information almost instantly—90 percent of all information that we perceive and that gets transmitted to our brains is visual. A single image can convey more to the observer than an elaborate block of text. Furthermore, in lots of cases a fairly complex idea can be easily conveyed with just a single still image. This happens because human brain is able to recognize and understood an image faster than text copy.

Photos have long remained companions of good interfaces, but more recently it’s possible to notice an increased interest in using illustrations. This happens for the reason: Illustrations give designers more freedom for creative effects and more control over image choices, both with content and technical details.

In this article we’ll define what ‘illustration’ means in term of user interface design and how it can be used to improve user experience.

The Essence of Digital Illustration

Historically, the verb “illustrate” used to mean “to clarify.” In modern graphic design, illustration becomes a working functional element. Illustrations became a tool for communication. The aim of illustration is to enlighten, to clarify, to deliver the message by means of visual elements. Where words can tell you something; illustration can show you something. To make the illustration functional, the image should be easily recognizable and the information it transfers should be decoded similarly by different viewers.

Here are some instances where illustrations are able to bring value to design and users…

1. Homepage Illustrations

Good web design has a significant impact on potential customers.  People judge a company based on the quality of a website, whether that’s fair or not. User perception is what really matters. As a result designers constantly try to find new ways how we can improve the experience for visitors. And just like in the real world, first impressions rely heavily on visuals. This is where illustrations enter the scene.

Homepage illustrations are able to create more artistic feel to the whole website. They appeal to users’ imagination to establish a stronger personal connection with the user. Using unique custom-made illustrations can distinguish you from the crowd and create a better brand recall.

Illustrations help Intercom create a very personal connect with users.

2. Mascots

Mascots are those little characters that are able to make your product more authentic, trustworthy and engaging. Mascots create a connection between the user and the app/website: they bring life to the interaction process, keep users’ attention and become the memorable element of user experience. This is a great way to get people engaged.

Probably the most popular example of how a mascot can help to improve the user experience is the email newsletter service Mailchimp. Freddie, the friendly chimp of Mailchimp, appears on every page, taking in a different role, to either draw attention to a certain element or to crack a joke in order to make the user feel better.

Good mascots provide the solid basis for positive user experience.

3. Illustrations for Onboarding and Tutorials

Illustrations provide visual aid. They are able to clarify messaging by boiling down concepts into easily-understood visuals. Pictures speak louder than words—and make the experience go faster. That’s why illustrations are so popular for onboarding and tutorials.

Onboarding screens introduce the key features or benefits of app to the user.  Illustration used during onboarding provides context, adds clarity, or leads the user to their next step. When combined with a minimal interface, illustrations can really help deliver the key message without too much copy.

Image credit: Ramotion

An engaging and interactive onboarding automatically invokes the users interest in the app at the initial step. It makes the user happy and feel eager to start using the app. Animations and illustrations have always gone hand-and-hand.

Using illustrations you can transform a long and boring tutorial into an interesting and joyful experience. An instruction manual with images is easier and faster to understand than a lengthy explanation. Even apps/sites that don’t incorporate the drawn style throughout still can use cartoons for instructions and tutorials.

 

4. Illustrations for Reward Screens

We all familiar with rewarding experience from video games: almost every video-game has a set of achievements or trophies that are gained by completing a set of criteria. The phrase “Achievement Unlocked” has almost become synonymous with progression or successful completion. But why is rewarding so valuable for us? The answer is simple: it makes the interface experience feel like there’s a human on the other end, not a computer.

Rewarding is a truly emotional interaction: positive emotional stimulus builds a sense of engagement with the user. People forgive the app’s shortcomings when you reward them with positive emotion.

A Mayor’s badge on Foursquare. This type of Illustrations creates delight and a joyful experience.

Success state is a great place to show that you care about your users. Reward the user with an animation when they accomplish personal goals. For example, when a user reaches inbox zero, create deeper engagement with app features using animation.

Conclusion

Illustration is a powerful and important tool for enhancing user experience and making interface both attractive and efficient. While there’s no hard or fast rule on using illustration in your design, it’s important to keep in mind one thing: keep illustrations useful. Ultimately, any illustration should provide a deeper understanding of your product or brand.

Source