This is part of the UX/UI workshop I conducted at SJCIT , Chikbalpur on 1st April 2019 . UI/UX workshop is organized with an objective to provide students with understanding the value of user experience in product design and to have hands-on exposure to the Product Development process. More details: http://desops.io/2019/03/31/ui-ux-workshop-for-startups-at-sjcit-chickballapur-1st-april-2019/

1. Session
UX&UI
Samir Dash
1 April 2019
SJC Institute of Technology, Chikkaballapur

3. Which is tastier?

4. The mental model in this room declares the winner.
And the winner voted
by the room is…

5. Presentation of chocolate?
Packaging?
Color?
Your prior experience ? (With similar chocolates)
What helped you make the choice?

6. User Interface(UI)
contributes to the
Experience
you build for your product.

7. Good UI
is result of implementation of
Good Experience.
However the fact is UI & UX are complementary.

8. How you define
Good Experience?

9. You experience through
5 senses.

10. Human collects the information through
these
Processes them using these
MIND HEART

11. User Experience is
NOT limited to
Visual or Auditory.
also includes
Mental Models
&
Emotions

12. Human Computer Interaction(HCI)
related
Experience
is shaped in same way.

13. HCI is revolved around
Mental Model & Emotions
through
Touchpoints
around these …

14. User Experience
is about
Mental Model + Emotions.

15. User Experience
Is about
Understanding
User Needs Pain-points
& then Catering to those needs

16. On the way improve any
touch-points
related to these.

17. In HCI at every
touch-point
there is one or more
UI.

18. In HCI at every
touch-point
there is one or more
UI.
https://onotes.com/#he-t https://onotes.com/#he-t

21. Touch-points
Are not limited to HCI.
PEOPLE
SAYS THINKS
FEELSDOES
USER
THINKS SAYS
DOESFEELS Touch-point of
feedback loop
USER
THINKS SAYS
DOESFEELS Touch-point of
feedback loop
PROCESSESUSER
THINKS SAYS
DOESFEELS Touch-point of
feedback loop
PROPS

22. All service maps are about
touch-points.
All typical UX maps focus on touch-points revolve around user (PEOPLE) in an ‘as-is’ PROPS and PROCESS context.

23. UX UI

24. UXUI Design
Empathy Mapping
Usability
User Research
Design Thinking
Visual Design
Information Architecture
Interaction Design
Interaction Design
User Testing
Persona
HCI Usability
Usability
Design System
CX Design
Product Design
Product Design

25. UCD
User-centered Design
a framework of processes

26. User Study
User Profile
Persona
Functional Requirements
Non-functional Requirements
Conceptual Design
Platform Analysis (Capability, Constraints]
Task Analysis
Usability Goals
[Quantititive, Qualititive]Prototyping [Low fi – hi fi]
Usability Evaluations
Formative Evaluations (Thinking Aloud, Co-discovery,
Constructive Interaction, Coaching methods,
retrospective testing)
Performance measures
Meet Usability Goals?
YES
Summative Evaluations
Deployment
NO
UCD User-centered Design

27. Research
Information
Architecture
Interaction
Design
Visual Design
UI Development
Know your user
and segment,
market and the
pain-points,
needs.
Know your
data-points,
eco-system,
entity, ontology
etc.
Define flows,
map the data
points to those
flows. Decide
on views, touch
points etc.
Translate the touch
points as per visual
design system.
Generate specs,
guidelines based
on the target.
Prototype,
implement the
design. Code or
setup the
environment and
prepare the UI.

28. Research
Information
Architecture
Interaction
Design
Visual Design
UI Development
Know your user
and segment,
market and the
pain-points,
needs.
Know your
data-points,
eco-system,
entity, ontology
etc.
Define flows,
map the data
points to those
flows. Decide
on views, touch
points etc.
Translate the touch
points as per visual
design system.
Generate specs,
guidelines based
on the target.
Prototype,
implement the
design. Code or
setup the
environment and
prepare the UI.
Design Thinking

29. …with user
…touch points and pain-
points
… solutions around
the pain points
… check feasibility of
solution
… check impact and
effectiveness
insights à
innovation
observation à
understanding
understanding à
insights
validation à
observation
innovation à
validation
…with user

30. …with user
…touch points and pain-
points
… solutions around
the pain points
… check feasibility of
solution
… check impact and
effectiveness
insights à
innovation
observation à
understanding
understanding à
insights
validation à
observation
innovation à
validation
…with user
• Empathy Map
• User Journey Map (As IS/ To BE)
• Service Design Map
• Customer Journey Map
• Persona
(Awareness about domain and associated
disciplines, methodologies, technology feasibility
etc. )
• Empathy Map
• User Journey Map (As IS/ To BE)
• Service Design Map
• Customer Journey Map

31. What
tools
to use in
Design Thinking?
Persona
Task Analysis
Empathy Map
As is Journey
To Be Journey
Affinity Mapping
Mind-Mapping
…
Pen + Paper
Whiteboard
Post-Its
…
Software (purely optional)
UCD Tools Physical Artifacts / Tools

32. ...having a grand workshop
...having many post-its
... not an event
What
Design Thinking
is NOT about…

33. ... A way of life
…. Part of everyday design process
Design Thinking
is about…
u can follow it yourselves
u can follow it with your team...
Golden principle
more collaboration better results
as it helps you to free from your biases
helps to overcome your limits

34. Let’s Try…

35. Finding
user-needs
starts with
search for stories.

36. GETTING
CONTEXT

37. Understanding
context
is the
first step.
Scenarios
Domain & Market Insights
User Segment and behaviour
Reports
Stories
Life goals of Users
Existing Solutions/Products
Statistics

38. GETTING CONTEXT
SECONDARY
RESEARCH

39. Domain
understanding
by numbers.

40. RESEARCH

41. Social Behavior
understanding by
numbers or trends.

42. Competitive
Analysis
of
products
or
solutions.

43. RESEARCH

44. ACTIVITY
Research on the Enterprise collaboration tools for software task
management.

45. GETTING CONTEXT
CONTEXTUAL
INQUIRY

46. Contextual Enquiry
Is about
Listening
and
Empathizing
at the
same time.

47. STORIES

48. Each user-need or
pain-point
is a
story.

53. CASE-STUDY

54. CASE-STUDY

55. CASE-STUDY

56. GETTING CONTEXT
OBSERVATION/
ETHNOGRAPHY

57. Observe.

58. Loud & Expressive
Busy and chaotic
CASE-STUDY

59. MASSCLUSIVITY STATUS ANXIETY
consumers' never-ending quest for status and standing out amidst a SEA OF
SAMENESS and MASS CLASS standards.
[Alain de Botton]
http://www.trendwatching.com/trends/MASSCLUSIVITY.htm
'exclusivity for the masses’ is all about consumer’s need for respect and
privilege among the masses
The consumer in emerging
mass markets exhibit
“Massclusivity” and “Status of
Anxiety” .
CASE-STUDY

60. multi-taskingin
distracted environments
CASE-STUDY

61. … for distracted environments, benefits
may exist in using motion gestures to execute commands.
… motion gestures result in significantly less time looking at the
smartphone during walking than does tapping on the screen, even with
interfaces optimized for eyes-free input. 1
Tapping a screen is still the most common interaction technique
performed with a touch screen mobile phone. However, it is also one
of the most demanding, as it requires precisely acquiring a particular
location on the screen.
Moreover, incorrect selections originate errors, burdening users with
error recovery mechanisms, and requiring new attempts to achieve
accurate selection.
Smartphones are frequently
used in environments
where the user is distracted
by another task, for example by
walking or while doing something
behaviour pattern
recommendation
Use micro-interactions that use less visual attention to
handle key application action
The interface must limit the need for visual attention
during interaction
CASE-STUDY

62. CASE-STUDY

63. CASE-STUDY

64. CASE-STUDY

65. GETTING CONTEXT
TECHNOLOGY
DOMAIN /
FEASIBILITY

68. Design for thumb access

69. Targets of Interactions for the Use-case
Desktop (When app is
Active/Open)
App UI with Board view of Cards
Notification module
Desktop (Outside App / App is not
active)
Push notifications as similar
actionable cards
Mobile (Outside App /
App is not active/Device
locked)
Push notifications as
similar actionable cards -
minimalistic
Mobile App (When app is
active)
Responsive and liquid
layout provides device
specific easy to use
experience.
SMS + Email
The additional
means of
communication
are supported.
IA – Navigation , Layout Data-points

72. EXPERIENCE
MAPS

73. Empathy Map Experience MapUser Journey Service Design Map

74. EXPERIENCE MAPS
EMPATHY MAP

80. ?
?
?

81. EXPERIENCE MAPS
AS IS
USER JOURNEY

82. Journeys
help in understanding
User
and in
Task Analysis

83. User-Journey maps
help you get the list of
pain points/insights
from different stages of the
user’s journey.

87. CUSTOMER JOURNEY
FRONT
STAGE
BACKSTAGE STAGE
Line of interaction
Line of Visibility
Line of interaction
SUPPORT
PROCESS
EMPLOYEE
TECHNOLOGY
CUSTOMER
Entry in Store Selecting in Store Billing/Payment in Store Leaving Store
picks the itemAsks about specific
item
submits items for
billing
swipes credit card for
payment
left store.
enters store
ACTIVITY Fill the Service Design Map
0/9//@L,0092/@L
10 min
CUSTOMER JOURNEY
FRONT
STAGE
BACKSTAGE STAGE
Line of Visibility
Line of interaction
EMPLOYEE
TECHNOLOGY
CUSTOMER
Entry in Store Selecting in Store Billing/Payment in Store Leaving Store
picks the itemAsks about specific
item
submits items for
billing
swipes credit card for
payment
left store.
enters store
ACTIVITY Fill the Service Design Map
10 min

88. CUSTOMER JOURNEY
FRONT
STAGE
BACKSTAGE STAGE
Line of interaction
Line of Visibility
Line of interaction
SUPPORT
PROCESS
EMPLOYEE
TECHNOLOGY
CUSTOMER
Entry in Store Selecting in Store Billing/Payment in Store Leaving Store
picks the itemAsks about specific
item
submits items for
billing
swipes credit card for
payment
left store.
enters store
ACTIVITY Fill the Service Design Map
0/9//@L,0092/@L
10 min
CUSTOMER JOURNEY
FRONT
STAGE
BACKSTAGE STAGE
Line of interaction
Line of Visibility
Line of interaction
SUPPORT
PROCESS
EMPLOYEE
TECHNOLOGY
CUSTOMER
Entry in Store Selecting in Store Billing/Payment in Store Leaving Store
picks the itemAsks about specific
item
submits items for
billing
swipes credit card for
payment
left store.
enters store
ACTIVITY Fill the Service Design Map
0/9//@L,0092/@L
10 min

89. CUSTOMER JOURNEY
FRONT
STAGE
BACKSTAGE STAGE
Line of interaction
Line of Visibility
Line of interaction
SUPPORT
PROCESS
EMPLOYEE
TECHNOLOGY
CUSTOMER
Entry in Store Selecting in Store Billing/Payment in Store Leaving Store
picks the itemAsks about specific
item
submits items for
billing
swipes credit card for
payment
left store.
enters store
ACTIVITY Fill the Service Design Map
0/9//@L,0092/@L
10 min
CUSTOMER JOURNEY
FRONT
STAGE
BACKSTAGE STAGE
Line of interaction
Line of Visibility
Line of interaction
SUPPORT
PROCESS
EMPLOYEE
TECHNOLOGY
CUSTOMER
Entry in Store Selecting in Store Billing/Payment in Store Leaving Store
picks the itemAsks about specific
item
submits items for
billing
swipes credit card for
payment
left store.
enters store
ACTIVITY Fill the Service Design Map
0/9//@L,0092/@L
10 min

90. CUSTOMER JOURNEY
FRONT
STAGE
BACKSTAGE ACTION
Line of interaction
Line of Visibility
Line of interaction
SUPPORT
PROCESS
EMPLOYEE
TECHNOLOGY
CUSTOMER
Entry in Store Selecting in Store Billing/Payment in Store Leaving Store
welcomes
Asks about specific
item
Browses in Catalogue
and answers
submits items for
billing
helps in packaging
items
swipes credit card for
payment
provides bill & receipt wishes goodbye
left store.
enters store
billing system
update
inventory data
payment gateway
connection
picks the item
Inventory
Management
Software
Weigh & Packaging billing & receipt
generation
Weigh & Management
System
Sample Service Design Map

91. PERSONA

95. ACTIVITY
AD CREATOR
A Developer who works on
Online Ad-campaigns
AD REVIEWER
The Manager or Lead who
leads developers and reviews
their work.
Create Persona of each of the following:

96. STORY
BOARDING

97. Task flow/ Activity Scenario / …

98. UI Flow/Interface specifics/ ….

101. TO-BE

104. PRIORITIZING
AGREEMENT

106. Respect & Be Ethical
SX

107. Design
should
Not
be
Intrusive.

108. https://www.behance.net/gallery/8602703/Socio-cultural-
User-Experience-(SX)-and-SxD

110. It’s not only about the user
also about others who are around him.

111. http://www.slideshare.net/MobileWish/sx-heuristics

112. IA

113. From data points to UI

114. Boot Animation
Home Screen
CustomizationsOffline references
Pre-initialization Initialization Post-initialization
Regular phone usageUn-boxing experience
Outside device On the device
Language selection
Typical un-boxing experience involves customizations as a part of the post device- initialization step.
Typical Unboxing Flow
Account Setup
Connect to
network
Cloud data update
Customizations

115. Boot Animation
Home Screen
Account Setup
Connect to
network
Cloud data update
Customizations
Offline references
Pre-initialization Initialization Post-initialization
Regular phone usageUn-boxing experience
Outside device On the device
Language selection
Minimal post initialization steps. After Language selection the user is navigated to the Home-screen
that can have language based customized UI elements and theme.
Suggested Unboxing Flow 1

116. Boot Animation
Home Screen
Account Setup
Connect to
network
Cloud data update
Customizations
Offline references
Pre-initialization Initialization Post-initialization
Regular phone usageUn-boxing experience
Outside device On the device
Language selection
Super minimal post-initialization steps. After boot animation the user is presented to the home-
screen, where Language selection can be one of the other options.
Suggested Unboxing Flow 2

117. Boot Animation
Home Screen
Account Setup
Connect to
network
Cloud data update
Customizations
Offline references
Pre-initialization Initialization Post-initialization
Regular phone usageUn-boxing experience
Outside device On the device
Language selection
Super minimal post-initialization steps. In the boot animation it self the language options are
presented as an integral part of the animation.
Suggested Unboxing Flow 3

119. INTERACTION

120. Device attributes impacting UI

122. Follow Mental
Model

129. MOBILE
FIRST

130. Browser UI to Mobile UI

131. Interaction Target : mobile app/ browser
How the design is mapped to a simple Mobile flow.

132. Navigation Layout - Mobile
The collapsible sidebar houses the main
navigation.
Clicking on Drawer menu opens
the side panel with the main
nav
Interaction Target : mobile app/ browser

133. Viewing Alerts - Mobile
The right-hand side panel in mobile app is used
for all the alerts. Clicking on the alert icon will
display this.
Interaction Target : mobile app/ browser

134. PROTOTYPE

135. Post-it /Paper
Prototype.

136. Post-it /Paper
Prototype.

138. Navigation
flow in
wireframe.

139. Visual
Mockups from
wireframe.

140. Visual Mockups
placed within HTML.

141. Simulated
HTML
Prototype.

142. Testing HTML
prototype on
device.

143. Fully functional
Interactive
HTML-JS
Prototype.

144. Real working
prototype in a
simulated
environment.