Product Design

1
 UX Basic Terms

• UX vs. UI
• Product Management and UX
• Building blocks: Components and Controls
 CTAs
• Affordance

2
 Common Components

• Text • Carousels
• Buttons • Icons
• Binary Selectors • Nudge and Animation
 Radio Buttons • Menus
 Checkboxes • Filter/Sort
 Switches/Sliders • Tags
• Input Fields • Pages
 Text/Number Boxes  Pop-up
 Combo Boxes  Slider
 Date Pickers  Full Pages

3
Common Components

4
UX Design Principles
 Consistency

• Things that look similar should behave similarly

• Vice-versa
• Use the same component to mean the same thing throughout

6
 Hierarchy and Information Architecture

• Information should be presented in layers

 When going from Summary to Detail page, don’t lose
information.
• MECE, Pyramid Principle – not just for consulting
presentations!
• Keep context when moving pages:
 Use breadcrumbs.
 Allow navigation back through hierarchy; NOT like
Browser “Back” button.

7
 User’s Internal and External Environment

• Is the user relaxed, angry, or anxious?

• Is the user at home, work, at commute, or in a noisy place?

8
 Proximity

• Gestalt design principle

• Objects close to each other perceived as related group
• Action component for a field to be placed next to the field:
 Light switches near mirrors or appliances
 Room light switches near door – “enable” room at entry

9
 Navigability

Users should always be confident about:

• Where they currently are
• How far they have come, how much further to go
• How to exit safely

10
 Familiarity

• Use commonly-understood icons, gestures, and controls to

design UX
• MAANG companies spend a lot of money and effort coaching
customers about UX interaction
 Minesweeper
 Apple Phone Shake
 Affordance

11
 Simplicity

• KISS
• Reword text to make it simpler
• Have someone else review app for content and usability

12
13
 Non-Redundancy

Avoid unnecessarily adding multiple interactions for the same

outcome on a page.

14
 X
Your transaction has
been successfully
completed!

OK Close

15
 Device Form Factor and Biology

• Smartphone screens are small; Smaller when

the keyboard is up:
 Layout elements accordingly
• Fat-finger problems
• Unavailable Gestures:
 Right-click
 Hover
 Camera Scan
 Tilt

16
Exercises
 Search

For an e-Commerce site, design the experience for the following:

• Clicking on the Search Bar
• Typing
• Search Results page

18
 Filter

Continuing from the eCommerce site earlier, design filters:

• Which filters to show
• How to indicate on/off
• How to apply/remove filters

19
 Covid19 Vaccination Slot Booking

Assume
1. User has already logged in, hence system already knows:
• User's and Additional family members' personal details
• Current vaccination status of all members
2. Same vaccine needs to be administered for 2nd dose with minimum time-gap
between both doses.
3. All data of all vaccination centres, slots available in each by day, age group for
each slot, and vaccine manufacturer is known by system.
4. Vaccine Slots and Vaccine availability are restricted by age group.

Design:
The screen(s) for user to book a slot for themselves or a family member

20
 Step Tracker

Design a step-tracker application where:

• User has already signed-in with Google/Apple account, and has provided
access to Fitness data (i.e., step count per day is available)
• User should be able to set a Daily/Weekly/Monthly target of steps
• User should be able to see Daily/Weekly/Monthly view of steps
• (Optional) User should be able to enter distance or time walked if device did
not capture the same, and system should convert that to steps.
• (Optional) Users should be able to form a group and set challenges, and view
a leaderboard

21
 Thank You!

© 2023 Hero Private Limited. All rights reserved. This session is the proprietary of Hero Vired and/or its licensor.
Your use/access or download shall be governed as per our IPR Policy.