Journey mapping is one of the most powerful tools designed to map how users reach their goals.&nbsp;&nbsp;When done properly the value of journey mapping is immense:<ul><li>Understanding process: journey mapping forces you to think about the experience in a more structured and holistic way.</li><li>Building empathy: when you relive customer experience in story format you relive emotions and feel the pain and frustration users felt.</li><li>Define the pain points: If you have an understanding of pain you are empowered to improve the experience.</li></ul>

Why customer journey mapping?

<ul><li>As-is vs To-be journey maps. The as-is state of a process is the “current” state. It’s how the process operates before we make any changes or improvements. The to-be process is the future state.</li><li>User journey vs Customer journey maps. Sometimes your user can be a customer, and in other cases, customers are a completely different group of people</li><li>Journey map vs Service blueprint. Where journey mapping focuses on exposing the end-to-end of your customer’s front-stage experience, blueprinting focuses on exposing the surface-to-core of the business that makes up the backstage and behind the scenes.</li></ul>

Journey maps variations

Journey mapping is one of the most powerful and commonly used tools designed to map/describe how users reach their goals. When we combine storytelling and visualization we immerse ourselves into the…

Stashed ideas

The ultimate guide to customer journey mapping

<ul><li>Delete the word that. For example, "You believe that I'm lying."</li><li>Delete the words, I think. For example, "I think this is a good sentence."</li><li>Avoid words that end in -ing. For example, "The experiences we're seeking end up being underwhelming." becomes "The experiences we seek often underwhelm."</li><li>Write short sentences and paragraphs. Keep paragraphs to less than three sentences.</li><li>Shorten your opening sentence. Make it short, compelling and conversational.</li></ul>

Improve Your Writing Forever

Each week I share helpful ideas in my For The Interested newsletter. Sign up here to get next week’s ideas. Following are the simplest tips I can give you to easily — and forever — improve the…

The Two Minutes It Takes To Read This Will Improve Your Writing Forever

There are many ways to use an interceptor, and I’m sure most of us have only scratched the surface. In this article, I will present my ten favorite ways to use interceptors in Angular.&nbsp;

Find out which interceptor superpowers you can start using today

Manipulating the URL. Sounds a bit risky when I say it out loud but let’s see how easily we can do it in an interceptor.We could, for example, want to change HTTP to HTTPS.It’s as easy as cloning the request and replacing http:// with https:// at the same time. Then we send the cloned, HTTPS request to the next handler.

Everyone wants to see the spinning wheel of fortune when we are waiting for a response. What if I said we could set it up centrally in an interceptor so that we show a loader whenever there are active requests.For this, we can use a loader service that has a show and a hide function. Before we handle the request, we call the show method and through finalize we can hide the loader when done.

Loader

When the API returns a format we do not agree with, we can use an interceptor to format it the way we like it.This could be converting from XML to JSON or like in this example property names from PascalCase to camelCase. If the backend doesn’t care about JSON/JS conventions we can use an interceptor to rename all the property names to camelCase.

Converting

We can do a lot by manipulating headers. Some things are:<ul><li>Authentication/authorization</li><li>Caching behavior; for example, If-Modified-Since</li><li><a href="https://en.wikipedia.org/wiki/Cross-site_request_forgery" target="_self">XSRF</a> protection</li></ul>We can easily add headers to the request in the interceptor.

Headers

Here we have many different cases where we could show messages. In my example, I show “Object created” every time we get a 201 created status back from the server.

Notifications

There are two use cases for errors that we can implement in the interceptor.First, we can retry the HTTP call. For example, network interruptions are frequent in mobile scenarios, and trying again may produce a successful result. Things to consider here are how many times to retry before giving up. And should we wait before retrying or do it immediately?

Errors

Because interceptors can process the request and response together, they can do things like time and log an entire HTTP operation. So we can capture the time of the request and the response and log the outcome with the elapsed time.

Profiling

A mock or fake backend can be used in development when you do not have a backend yet. You can also use it for code hosted in StackBlitz.We mock the response depending on the request. And then return an observable of HttpResponse.

Fake backend

Since interceptors can handle requests by themselves, without forwarding to <code>next.handle()</code>, we can use it for caching requests.What we do is use the URL a the key in our cache that is just a key-value map. And if we find a response in the map, we can return an observable of that response, by-passing the <code>next</code> handler.

Caching

It is just so fundamental for many applications that we have a proper authentication system in place. This is one of the most common use cases for interceptors and for a good reason. It fits right in!There are several things connected to authentication we can do:<ol><li>Add bearer token</li><li>Refresh Token</li><li>Redirect to the login page</li></ol>

Authentication

There are many ways to use an interceptor, and I’m sure most of us have only scratched the surface. In this article, I will present my ten favorite ways to use interceptors in Angular. I have kept…

Top 10 ways to use Interceptors in Angular

B2B2C is a model in which business A sells to business B but interacts directly with business B’s customers under their own brand.B2B2C is by no means some panacea. If it’s hard to build a product that enterprises or consumers love, building one that is loved by both is more than twice as difficult.&nbsp;

B2B2C

<ul><li>B2C is a gamble while B2B is (more) within your control.</li><li>B2B Customers know what they want, while B2C products are a shot in the dark</li><li>B2C consumers are irrational and trend-driven, while B2B clients are more predictable.</li><li>In B2C, it is hard to know if things are working, while B2B has a clear execution path</li><li>Iterating in B2C is hard, while B2B has clear follow-up steps</li><li>B2B Customers will actually pay for your products: Consumers are price sensitive while “businesses make decisions based on cost-benefit analyses.</li></ul>

B2B and B2C: arguments

<ul><li>If you want a predictable growth trajectory and high odds to build a sizeable business, go for B2B.&nbsp;</li><li>If you’re aiming for the groundswell, B2C is your ocean (but know statistics indicate a likely belly-flop!).&nbsp;</li><li>If you’ve accomplished the incredibly hard task of building a product that is 10x better from both a business and and consumer's perspective, the reward is that B2B2C lets you have the best of both models.</li></ul>

B2B vs. B2C vs. B2B2C

Last month, Justin Kan — former YC partner and co-founder of Twitch (B2C) and now Atrium (B2B) — published a piece titled “Why I love B2B over B2C.” My first instinct as a consumer investor was to…

Node.js is a Javascript Runtime built on chrome’s V8 Javascript engine. It uses an event-driven, Non-Blocking I/O model that makes it lightweight and efficient. It can be anything ranging from Reading/Writing local files to making an Http request to an API. I/o takes time and hence blocks other functions, such as printing.

Why Node.js?

In the blocking method, user2's data request is not initiated until user1's data is printed to the screen.&nbsp;

Blocking I/O

On the other hand, using a non-blocking request, you can initiate a data request for user2 without waiting for the response to the request for user1. You can initiate both requests in parallel.&nbsp;

Non-blocking I/O

Otherwise, here’s a quick step-by-step explanation of how the JavaScript Event Loop works.&nbsp;<ul><li>Push main() onto the call stack.&nbsp;</li><li>Push console.log onto the call stack. This then runs right away and gets popped.&nbsp;</li><li>Push Settimeout onto the stack. Settimeout is a Node API.</li><li>After registering it in the APIs, setTimeout gets popped from the call stack.&nbsp;</li><li>Now the second setTimeout gets registered in the same way. We now have two Node APIs waiting to execute.&nbsp;</li><li>After waiting for 0 seconds, setTimeout gets moved to the callback queue, and the same thing happens with setTimeout .&nbsp;</li><li>Only one statement can execute at a time. This is taken care of by the event loop.</li></ul>

The JavaScript event loop

These are libraries built by the awesome community which will solve most of your generic problems. npm (Node package manager) has packages you can use in your apps to make your development faster and efficient.&nbsp;

Require does three things:&nbsp;<ul><li>It loads modules that come bundled with Node.js like file system and HTTP from the Node.js API .&nbsp;</li><li>It loads third-party libraries like Express and Mongoose that you install from npm.&nbsp;</li><li>It lets you require your own files and modularize the project.&nbsp;</li></ul>

Require

A Node module is a reusable block of code whose existence does not accidentally impact other code.&nbsp;

Node Modules

Something that has happened in our app that we can respond to. There are two types of events in Node.&nbsp;<ul><li>System Events: C++ core from a library called libuv..&nbsp;</li><li>Custom Events: JavaScript core.&nbsp;</li></ul>

Events

We have to do this, don’t we?&nbsp;

Writing Hello World in Node.js

Node.js is a JavaScript runtime environment. Sounds great, but what does that mean? How does that work? The Node run-time environment includes everything you need to execute a program written in…

What exactly is Node.js?

‘UI Animation’ is typically thought of by designers as something that makes the user experience more delightful, but overall doesn’t add much value. Thus, UI Animation is often treated like the red-headed stepchild of UX.What most designers think of as ‘UI Animation’ is in fact the execution of a higher modality of design: the temporal behavior of interface objects during realtime and non-realtime events.

It’s not about UI Animation

It is important to distinguish between ‘state’ and ‘act.’ The state of something in UX is fundamentally static, like a design comp. The act of something in UX is fundamentally temporal, and motion based. An object can be in the state of being masked or it can be in the act of being masked. All temporal aspects of interaction can be thought of as happening in realtime or non-realtime. Realtime means that the user is directly interacting with the objects in the user interface. Non-realtime means that the object behavior is post-interactive: it occurs after a user action, and is transitional.

Realtime vs non-realtime interactions

These four pillars represent the four ways where the temporal behavior of user experiences supports usability.<ul><li>Expectation: how users perceive what an object is, and how it behaves. </li><li>Continuity speaks both to the user flow and to the ‘consistency’ of the user experience. </li><li>Narrative is the linear progression of events in the user experience that results in a temporal/spatial framework. </li><li>Relationship refers to the spatial, temporal, and hierarchal representations between interface objects that guide user understanding and decision making.</li></ul>

Motion supports usability in four ways

Principles are the underlying premises and rules of function giving rise to any number of techniques. From there, we can imagine a hierarchy with principles at the top, techniques further down, properties below that, and values at the bottom. I think of technique as akin to ‘ Style.’properties are the specific object parameters that are being animated to create the technique. Values are the actual Numeric property values that vary over time to create what we call ‘ animation'

Principles, Techniques, Properties, and Values

Easing and Offset & Delay relate to timing. Parenting relates to object relationship. Transformation, Value Change, Masking, Overlay, and Cloning all relate to object continuity. Parallax relate to temporal hierarchy. Obscuration, Dimensionality and Dolly & Zoom both relate to spatial continuity.

The 12 Principles of UX in Motion

The following manifesto represents my answer to the question — “As a UX or UI, designer, how do I know when and where to implement motion to support usability?” Over the last 5 years, it has been my…

April Oneill@apron