Chapter 9/17 : How to design great UX? Fundamentals of design
Previous: Chapter 8 — How to Test & Validate MVP?
Next: Chapter 10 — How to run Design Sprint
[Back to- 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 the 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 -
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.
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 a restaurant menu using Food Panda and Swiggy Apps.
You’ll notice that in Food Panda (first set of screenshots) the 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.
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) -
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 -
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).
Further, developing a sitemap helps you define the structure of functionalities of your product. Sitemap prevents the user from getting lost.
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.
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.
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 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.
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.
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.
Prev: Chapter 8 — How to Test & Validate MVP?
Next: Chapter 10 — How to run Design Sprint
[Back to content page — Product Management 101 ]
Want to learn more?
Enroll into Product Management:A-Z — The complete product management online course with 25+ chapters, 40+ live assignments and product interview tips . Built with inputs from experienced Product Managers working @ Top Tech firms like Google, Adobe, Amazon; the course has 500+ enrollments from 40+ countries.
Book Mock Interviews with product experts to practice your interview skills & get detailed feedback.
Check out PM Interview Questions — An exhaustive list of unique Product Management interview questions answered by product experts.
Click 👏 if you found this useful. SHARE to help others find this article.
It gives me 🔋 to write knowing people find value in it.
Originally published at zapupp.com
