This document discusses challenges in designing user experiences for large-scale web applications and provides solutions. Some key challenges discussed are unclear expectations from stakeholders, changing requirements, and lack of understanding of the product ecosystem and target users. Solutions proposed include clearly defining the design goal and ecosystem, profiling different types of users and their needs, streamlining workflows, taking a modular approach to design that allows for growth, and optimizing the user interface for performance.

1. User
Experience
for
Large-scale Web-Applications
ges
Ch allen
ngs
Learni
io ns
Solut
ign
Des

2. About me…
-­‐
Industrial
designer
from
IIT
Mumbai
-­‐
Designing
User
Experiences
for
10
years
-­‐
Now:
Principal
InteracBon
Designer
in
Yahoo!
-­‐
Past:
Worked
with
HumanFactors
Contact:
ashutoshk77@yahoo.com

3. I will talk about…
SDLC CLDS
challenges
learnings
design
solu+ons

4. My perspective…
UserXperience
Business
Technology
Development

5. Why User Experience ?
Technology
Business
Constraints
Needs
User
Experience
Func+onal
Needs

6. Challenges means…
Things
with
a
sense
of
difficulty…such
as
Unclear
understanding
of
expecta4ons
+
Compromised
user
experience
+
Stretched
development
4melines
+
Mul4ple
quality
review
cycles
=
Increased
development
cost

7. C1 Keeping stakeholders on the same page

8. L1 Often teams…
Get
requirements
as
LIVE
Receive
changing
SCOPE
(3>5>all
browsers)
Focus
on
own
SILOS
Lack
in
full
understanding
of
product
ECOSYSTEM
Have
low
understanding
of
target
USERS

9. S1 State the design goal…
Business
Needs
Compe44ve
Review
User
Needs
1
Stakeholder
Views
2
Related
Products
3
Data
Gathering
Design
Defini+on
“Defining problem is as important as solution itself”

10. S1 Design the Eco-system…
Visualiza+on
of
design
and
interac+on
ecosystem
for
a
Netbook

11. S1 Define your users…
Profile
2:
Prospec4ve
Customer
John
Doe
45
Year
old
Director
ITES
NYC,
NY
“Tell
me
why
I
should
do
business
with
your
company”
John
is
a
director
of
IT
services
in
a
major
finance
company
for
4
years.
He
has
been
with
this
firm
since
15
years.
He
is
responsible
for
ApplicaBon
development,
maintenance
of
data
recovery
center,
and
planning
for
business
in
future.
He
does
not
use
ABC
product/Service.
Mo4va4ons
John
is
not
involved
with
detailed
invesBgaBon
of
individual
enterprise
soluBons.
He
needs
to
know
the
big
picture,
and
will
direct
his
staff
for
a
detailed
analysis
before
he
makes
a
purchasing
decision.
Goals
•
Get
general
product
info
•
know
about
compeBBve
advantage
•
Pricing
info
•
A[er
sales
support
model
and
terms
Pain
Points
•
Limited
info
about
product
on
website
•
Unclear
info
about
customizaBon
and
future
tech
support
•
Lack
of
customer
support
channels

12. C2

13. L2 Understanding User Needs…
Iden4fy
typical
user
groups
Write
simple
user
stories
(usage
scenarios)
Document
their
KEY
tasks
(80%
vs.
20%)
Op4mize
Task-­‐flows
(beyond
current
processes)

14. S2 Understand users…
52
years
old
On
the
job
25+
years
Uses
computer
1-­‐2
+mes
per
week
Personality
Traits:
Professor
in
a
PG
college,
about
to
re+re
in
2-­‐3
years.
Infrequently
uses
computer
at
home
to
communicate
with
sons
seUled
in
different
ci+es.
Key
decision
maker
in
extended
family
vaca+ons
to
spend
quality
+me
in
leisure
as
well
as
pilgrimage
loca+ons.
PC
Gupta
Professor
Things
I
need
to
know
Things
I
want
to
do
 Railways
tour
packages
 Choose
and
tweak
standard
journey
plans
 Detailed
Travel
I+nerary
and
route
map
 Plan
journey
stopovers
 Accommoda+on
op+ons
 Compare
cost
and
finalize
Travel
plan
 Easy
and
simple
informa+on
 Book
+ckets
 Do’s
and
Don'ts
for
railway
booking
process
 Seek
customer
support
 Associated
rules
and
regula+ons
 Promo+onal
discounts

15. S2 Streamline workflow…
App
1
1.
Review
Documents
Enter
Deal
Deal
Desk
Email
App
2
2.
Check
Approvals
Excel
Buyer
Seller
Agent
Staff
3.
Close
Deals
Deals:
The
Task
Flow
1
2
3
4
5
View
Deals
Iden4fy
Deals
that
Review
Funding
Allocate
Funds
Handover
are
Ready-­‐to-­‐Close
to
Back-­‐Office

16. C3

17. L3 Visualize future roadmap…
Think
ahead
about
future
needs
What
you
need
aier
3years
should
start
now
Priori4ze
and
follow
phased
approach
Naviga4on
design
and
UI
containers
should
grow

18. S3 Modular design…

19. C4

20. L4 Find what users REALLY need…
User
Tasks
Interface
Object
Objects Attributes Display type Actions
1. Search
Travel
Plans
2. Find
Trains
Traveler Gender List Save
Age Input Form Edit
3. Plan
Journey
Breaks
+
First Name Read only Details Add New
4. Define
Travelers
Last Name Copy
Address Export
5. Make
Payment
Contact Phone Clear
e-mail Delete
Login
Password
UI
Container
object
oriented
interface
structure

21. S4 Expose UI as needed…
Show
what
users
need
NOT
what
database
structure
Use
deferred
creates
Accordion
panels
Show/hide
vs.
enable/disable
Dual
Mode
UI
(basic
and
Advanced)
Simple
wizards
Educa4ve
interfaces
(QA
format)

22. C5

23. L5 UI is ALSO responsible for Performance
Keep
modular
and
fluid
UI
containers
Keep
nested
DIVs
as
simple
as
possible
Use
CSS
Sprite
to
minimize
HTTP
requests
Keep
CSS
and
other
assets
lighter
in
size
Define
and
follow
CSS
nomenclature

24. S5 CSS sprites…

25. C6

26. L6 Often development teams…
Care
about
their
own
module
Put
less
priority
to
UX
guidelines
Do
not
follow
UI
pamerns
fully
Hack
solu4ons
Prac4ce
what
is
EASY
NOT
what
is
important

27. S6 Simple checklists…

28. S6 Master repository for…
UI
wireframes
CSS
file
and
strict
version
control
Image/sprite
library
Best
coding
prac4ces
UI
style
guide
UI
layout
templates
UI
controls

29. C7 Lack of communication

30. L7 Development teams…
Re-­‐invent
the
solu4ons
NOT
reuse
Do
not
share
hacked
solu4ons
Deviate
from
standard
prac4ces
Drop
features
instead
of
solving
them

31. S7 Set communication channels…
Core
team
UI
style
guide
UX
Master
CSS
Sprite/images
team
UI
layout
templates
UI
controls
Regular
flow
Dev
4
Dev
1
Dev
2
Dev
3

32. C Credits…
@
Yahoo
Image
Search
@
Google
Images
@
Flicker
Images
@
Core77
@
My
Colleagues
@
Learnings
with
my
Clients

33. Contact:
ashutoshk77@yahoo.com