Designing for good CX, UX and UI

---

Let's first understand the meaning of UI, UX and CX. 

User Interface (UI) -  UI refers to the actual interface of a product/solution, as for example - the visual design of the screens a user navigates through when using a mobile app, or the buttons they click when browsing a website.  UI design is concerned with all the visual and interactive elements of a product interface, covering everything from typography and color palettes to animations and navigational touch points (such as buttons and scrollbars).  In case of physical products, UI is packaging of the product. The shape, color, dimension of the packaging used for a product play a critical role in attracting a user/customer. A good User interface makes it easy for the user to understand and use the solution.

User Experience (UX) -   User experience (UX) refers to each and every element that impacts User's experience while purchasing and using the product. This could be anything from how a physical product feels in your hand (UI), how many varieties of the products are listed on an e-commerce website, or how easy the checkout process is when buying the product. The goal of UX design is to create easy, efficient, relevant, and all-round pleasant experiences for the user. UX is measured with metrics like success rate, error rate, abandonment rate, time to completion of tasks. 

Customer Experience (CX) -  Customer experience (CX) encompasses all of the interactions the customer has with all aspects of a company - including a specific product within a brand or a specific service they provide. CX is measured in overall experience, likelihood to use again, and recommend to others. CX is measured with metrics like churn rate, retention rate, customer lifetime value (CLV), and net promoter score (NPS). As for example, if a 3rd party delivery person throws the package containing a fragile item over the fence, the customer is going to blame the company only, and this is going to damage overall CX, no matter how good the purchasing experience was. 

Following 10 design principles are very useful for effective UI design:

1. Discoverability:  The solution and its features should be easily discoverable, instead of requiring a user to read about them in documentation. 

2. Simplicity: The interface should be easy to understand and use, irrespective of a user’s experience, knowledge, or level of concentration. The interface should not be cluttered with unnecessary information that distracts from accomplishing the primary task. 

3. Structure:  A user interface should be architected in a way that is organized and makes sense to the thought process and in alignment to the journey of the end user.

4. Affordances:  It means you look at an object and by looking at an object, you know how to use it. Interfaces that “hint at” the way they are meant to be used. The interface’s perceived affordance might be at odds with its actual affordance (e.g. a door with a handle seems like it should be pulled, but the door actually needs to be pushed). You can add signifiers to the interface to help a perceived affordance match the actual affordance (e.g. a label next to the door handle that says “push”). 

5. Mapping:   It is used to describe the relationship between control elements and their effects in the real world e.g. steering wheel design needs to rotate it clockwise, in order to turn the wheel right-side. Interfaces should speak the language of the users who use it, favoring language in their terms and not system-oriented language. 

6. Consistency:  It ensures that once we learn how to operate an interface, we can apply the same to another interface. Design interfaces using familiar components which behave the same, so users do not need to re-learn your interface from scratch. 

7. Constraints:  Preventing a user from performing erroneously in the first place by constraining their possible behaviors. Password reset flows with client-side validations are a good example of this: they prevent the submit button from being made available until the user has successfully met password requirements. 

8. Tolerance :  The user interface should be designed such that errors that inevitably occur, do not cause too much setback for the user in accomplishing their primary task. Supporting standard functions like 'Undo' and 'Redo' are examples of this.

9. Feedback:  Users should receive clear and direct feedback in response to errors generated by operating the interface. 

10. Flexibility:  An interface should accommodate a wide range of users with varying levels of expertise. Allow users to use your interface in ways that fit with their standard workflows: e.g. some users are more comfortable copying and pasting using the right-click menu commands instead of keyboard shortcuts. Both accomplish the same task, but fit in to different user workflows.