Chapter 9: How to Design Great UX –  Fundamentals of Product Design

 

[PreviousChapter 8 – How to Test & Validate MVP?]

[Back to content page —  Product Management 101]

After you have conducted user research and developed artifacts, next step is to start building your product. The first step towards development is to come up with design and interactions for your product.

“Most people make the mistake of thinking design is what it looks like. People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” — Steve Jobs

The core of design is not how a product looks but how seamless it is for a user to use the product.

User Experience (UX) is what brings the product to life for the user.

We have experienced various products which have varying user experiences.

A product with good User Experience (UX) feels intuitive and easy to use. On the other hand, while using a product with poor UX, you struggle with basic things.
For example, you find it hard to read text or you can’t find what you’re looking for, and you’re not clear where or what to do next.
With a good UX, you are able to effortlessly accomplish the task at hand. Using the product feels fun and you seem to enjoy doing the task. UX can make or break your product. A good UX can be a strong product differentiator.

Let’s take a look at following examples of how bad design can lead user experience way down

Example of bad design – Complex Interface

Example of bad design – Long Form

Bad design example – Deceptive Imagery
CNN in 2014 — Before you can even reach the news content you came for, you have to navigate through an aggressive red banner that follows you to let you know about recent updates and news sections. That’s in sharp contrast to how CNN re-designed its site later.

Example of bad design – Lava B5

Lava came up with this mobile phone model B5 where they did away with the keyboard layout that every single person is familiar with!

As a product manager, designing a great user experience should be one of your prime concerns.

So, how to create a great UX?

There are two key attributes for a great UX –

1. Usability – it indicates how easy it is for the users to use the product.
Usability focuses on the user goals and the tasks they need to perform to achieve their goal and effort required for the tasks.

Example, the following screenshot illustrates the task of selecting a dish from restaurant menu using Food Panda and Swiggy Apps.
You’ll notice that in Food Panda (first set of screenshots) user has to select a dish and then add the dish to cart; however, in case of Swiggy, user can directly add dish from the menu.

Also, navigating through different menu section is much easier in Swiggy than in Food Panda.

Food Panda – User has to select a dish from the menu then add it to the cart.

Swiggy – User can directly add dish (from the menu) to the cart

2. Delight Do customers enjoy using your product? How appealing the product looks and feels on basis of aesthetics and simplicity.

Trello is a perfect example of UX that’s simplistic yet very effective –

Another example is the following screenshot that depicts a user booking return flight via MakeMyTrip app. You’ll notice a stark difference from Akbar Travels (where the screen seems so cluttered) –

MakeMyTrip has a better interface than Akbar Travels

So, how to start developing UX that’s highly usable and delightful?
We do by focusing on each of the components of user experience.

There are 3 components of UX –

1. Design Objectives

Start with the user goals. A good starting point would be to use your target persona and the user journey to map out phases of your user journey as well as user goals for each phase.

Let’s take an example of a grocery shopping app. Following are the user goals for each phase of the journey –

User Goals for each phase (Grocery Shopping App)
2. User Flows / Site Maps

User Flow is the path a user follows through a product to complete a task. The user flow maps the user’s entry point through a set of steps towards a final action (e.g. purchasing a product).

User Flow (Grocery Shopping App)

Further, developing a sitemap helps you define the structure of functionalities of your product. Sitemap prevents the user from getting lost.

Sitemap

3. Visual Design — UI

This is the component of UX that defines how your product would look like. Based on the available time and requirement, you along with designers come up with a low fidelity (Wireframes/Sketches/Mockups) or high fidelity (Clickable Prototype) design.

Low Fidelity v/s High Fidelity Design

You could use following tools to create wireframes or mock-ups –

Low Fidelity –
Mockplus
Balsamiq Mockups
Visio

Photoshop

High Fidelity –
InVision
Justinmind
UXPin

4. Interaction Design

It is the design of the interaction between the user and the product. It consists of everything from a button to a link to a form field. The 5 dimension of interaction design are –

1D: Words — especially those used in interactions, e.g. button labels.
2D: Visual Representations — the graphic (image, icon or typography) that users interact with.
3D: Physical Object — through what object (device) does the user interact with.
4D: Time — media that changes with time (animation, video, audio).
5D: Behaviour — how does a user perform an action, what happens post the action.

Interaction Design (by Jakub Antalík)

Check out some cool interactions here.

Design Principles 

Gestalt Principle

You could make use of Gestalt Principle to see if the design is coherent or not.

Gestalt principle of Proximity —
The brain perceives objects placed together as more related objects. A good example is how medium home page is arranged with stories representing different sections grouped together.

Gestalt Principle of Proximity – Stories on the same topic grouped together

Gestalt principle of Similarity —
The brain perceives similar objects as more related objects. The nav bar menu has similar properties in terms of color, size, arrow shape — which suggests that they serve the same purpose of expanding the menu to help a user navigate.

Gestalt Principle of Similarity – Nav Bar items looks similar.

 

You could read more on Gestalt Principle here.

Principle of Visual Hierarchy –

Visual hierarchy is all about working with color, contrast, typography, spacing, and other basic principles — to organize and prioritize your content.

Visual Hierarchy

Read more on Visual Hierarchy –
https://designschool.canva.com/blog/visual-hierarchy/

Next chapter, we’ll understand how to run a design sprint to come up with a great UX.

[PreviousChapter 8 – How to Test & Validate MVP?]

[NextChapter 10 – How to run Design Sprint]

[Back to content page —  Product Management 101]

LIKE & SHARE if you found this article useful.
It gives me 🔋 to write knowing people find value in it. 

Share & Help others find the resource