Presented at the Web Meetup Melbourne (November 2017) - "Web Accessibility, UX Approaches, and Lessons Learned from 22 years in Design" Human-centered design and right-time right-context experiences are hugely important for building user-centered web applications. Competing with detailed considerations of the system user are business objectives of speed and value to market. Now, with the convergence of experiences in new technologies such as the Progressive Web, UX approaches such as early stage prototyping and testing, the establishment of accessible front-end design systems and Lean, experimental feedback loops are more important than ever. These UX practices support nimble, collaborative design behaviour and limit system front-end technical as well as design legacy in all that we build in our systems. The goals of these UX approaches are to benefit our users as well as optimise our workflows and human interactions in our teams. https://www.meetup.com/en-AU/the-web/events/244943794/

1. Convergent Experiences
Why UX Approaches to Designing Modern Web Systems
are Super-Dooper Important

2. Continuous attention to technical excellence
and good design enhances agility.
http://agilemanifesto.org/principles.html

3. https://medium.com/@daughterofbev
https://medium.com/interactive-mind
@daughterofbev
Catherine Hills
UX Lead & Agile UX Coach

4. Users spend most of their time on other sites.
This means that users prefer your site to work
the same way as all the other sites they already
know. Design for patterns for which users are
accustomed.
Jakob Nielsen’s Law of Internet User Experience

5. From Mobile First and Atomic Design to now
A brief snapshot of technology and device behaviour in the Web

6. ç
Catherine Hills @daughterofbev
It’s been a little while

7. Building mobile first allows teams to utilize
this full palette of capabilities to create
rich context-aware applications instead
of limiting themselves to an increasingly
dated set of capabilities.
Luke Wroblewski (2009)

8. ç
Catherine Hills @daughterofbev

9. ç
Catherine Hills @daughterofbev
Increasing mobile users

10. ç
Catherine Hills @daughterofbev
In 2017, multiplatform use is normal

11. It’s no longer only a question of is it a
desktop, tablet or mobile experience,
now it is a question of whether it is a web
or native app experience, or both

12. ç
Catherine Hills @daughterofbev
Are native app users using
embedded web browsers?

13. ç
Catherine Hills @daughterofbev
The web reaches 3x as many people, yet
engagement is higher in native experiences

14. Along with IoT, designers and engineers need
to think about native apps behaving like the web,
website apps behaving like they’re native
And how it impacts on the user. It’s all about lowering friction
between experiences, as well increasing visitors,
engagement and conversion

15. ç
Catherine Hills @daughterofbev
Progressive Web Apps and Instant
Apps

16. ç
Catherine Hills @daughterofbev
Larger screens still have use-cases
And the usage may or may not require web applications

17. ç
Catherine Hills @daughterofbev
The Internet of Things is a thing
https://www.ihs.com/info/0117/IoT-Trend-Watch-2017.html

18. Now, what is a web application?

19. ç
Catherine Hills @daughterofbev
What is a web application?

20. What is User Experience (UX) Design?

21. User Experience (UX) is defined as:
a person's perceptions and responses that
result from the use or anticipated use of a
product, system or service
ISO 9241-210

22. ç
Catherine Hills @daughterofbev

23. Human-centered Design (HCD) is defined as:
An approach to systems design and
development that aims to make interactive
systems more usable by focusing on the use
of the system and applying human
factors/ergonomics and usability
knowledge and techniques
ISO 9241-210

24. ç
Catherine Hills @daughterofbev
Understand users’ mental models and
match with the design model
Don Norman – Conceptual Models

25. ç
Catherine Hills @daughterofbev
Thinking of user needs and value
Peter Morville - Semantic Studios

26. ç
Catherine Hills @daughterofbev
Synthesising this with feasibility & viability
Innovation Drivers

27. Look beyond surface-level qualities to
assess the value of websites.
A website that looks (or sounds) good
does not mean that it is. Good websites
contain engaging features that help
people accomplish their goals.
Jakob Nielsen: Don’t be fooled by surface-level design

28. ç
Catherine Hills @daughterofbev
UX is more than Visual Design
The user experience
development process is
all about ensuring that
no aspect of the user’s
experience with your site
happens without your
conscious, explicit intent
‘Elements of User Experience’
Jesse James Garrett (2011)

29. ç
Catherine Hills @daughterofbev
Full Stack Designers and Engineers?

30. ç
Catherine Hills @daughterofbev
To be deep in all the things at the
same time is unusual and unicorn-ish

31. ç
Catherine Hills @daughterofbev
Like other disciplines UX Designers
are T-shaped
Just like everyone else…

32. ç
Catherine Hills @daughterofbev
And can’t be all the things all the time…
This isn’t real and rarely
possible, although
general to moderate
knowledge in many
things is possible at
maturity in career

33. What is Agile & Lean UX Design
and
Why are design systems so important
and enabling of software delivery
Web, Native App or otherwise?

34. It isn’t this

35. ç
Catherine Hills @daughterofbev
In order to do all the things a good user
experience requires, it must be done as a team
Engineering
spans from
thinking it to
making it
‘Better Together’
https://lithespeed.com/lean-ux-
dont-part-1-3-2/

36. ç
Catherine Hills @daughterofbev
Agile, cross-functional teams support this
Self-organised,
autonomous
and aligned
teams and
individuals who
trust each other
https://www.infoq.com/presentati
ons/spotify-culture-stc

37. ç
Catherine Hills @daughterofbev
Working together reduces the why
are we making this effect
Understanding
the “why” needs
the whole team
‘Better Together’
https://lithespeed.com/lean-ux-
dont-part-1-3-2/

38. ç
Catherine Hills @daughterofbev
Otherwise we risk design only being this
Visual design
isn’t bad, but in
software it
shouldn’t be the
only thing a UX
designer does

39. ç
Catherine Hills @daughterofbev
If we automate design, so this can all be done
Style-driven Design &
Development (SDD)
consistency and
systems enable Lean
UX and Agile
collaborative design
behaviour to be
possible

40. ç
Catherine Hills @daughterofbev
In becoming Lean

41. ç
Catherine Hills @daughterofbev
In becoming Lean
Reducing waste in the design process:
• Fewer drawings/design artefacts = faster
development
• Advanced Tools (living style guides) = gives
team greater capacity to be nimble
• Fewer parts = the app more usable and higher
quality reusable components, easier to use
and recognise, more familiarity
• Easier maintenance and simpler design =
mitigated system legacy (tech & design) and
less waste

42. ç
Catherine Hills @daughterofbev
Tools used to create/communicate design
In order of fidelity
Production
Code

43. ç
Catherine Hills @daughterofbev
Bring these together = Lean
In order of fidelity
Supporting Communication/tools
For System Presentation Annotation
Maybe
Production
Code

44. A design system and style guide
is everyone’s responsibility
Business, Design and Engineering

45. Some styleguide scenarios
Remember: the goal is to increase
collaboration, improve team communication
and reduce waste

46. Scenario 1
Style guide out of sync/
not maintained, multiple
sources of truth

47. Scenario 2
Style guide but still multiple
sources of truth

48. Scenario 3
Scenario 3
Single source of truth –
design artefacts outside of
production app are
communication tools

49. Scenario 4
Single source of truth
with both an internal
and externalised
styleguide app

50. 2 become 1

51. ç
Catherine Hills @daughterofbev
Removing conflicting sources of truth

52. ç
Catherine Hills @daughterofbev
A communication tool, not a source of truth

53. ç
Catherine Hills @daughterofbev
Use the right technology for your app

54. ç
Catherine Hills @daughterofbev
Designers behaving like engineers
Instead of static
design artefacts:
• Version control
Sketch files
• Manage merges
of files via ‘merge
meetings’ or push-
pull git-like systems

55. ç
Catherine Hills @daughterofbev
Steps to preparing for Style Driven Development
1. Conduct a view, design pattern
and content audit of the system
2. Conduct a front-end code quality
audit to identify improvements
3. Map components to a framework
eg. Brad Frost’s Atomic Design,
together with engineering
4. Mirror this framework in Sketch files and
production code
5. Use the same language and naming
conventions across design and
engineering to maintain a common
language
6. Conduct a review of usability and
benchmark this against the rebuild
7. Take the opportunity to upgrade your
system accessiblity in the same pass

56. ç
Catherine Hills @daughterofbev
Strategies for improvement and re-usable patterns
• Slice improvements of front-end
architecture initiative by initiative,
in parallel to a clean up of code
• Utilise system architecture upgrades
as a case for improving the
architecture in the front-end eg.
separation of concerns and
microservice architectures
• Map scenarios during engineering
and designer pairing sessions to
ensure all states and interactions are
accounted for, reducing bottlenecks
in delivery
• Include imperatives for usability and
accessiblity improvements, including
’fall back’ scenarios whilst building
out the best case pattern executions
• Create a push-pull system to reduce
bottlenecks in engineering and
design

57. ç
Catherine Hills @daughterofbev
Strategies for improvement
Let it go, but also embrace the
new superpowers you’ll be given
in a positive way

58. ç
Catherine Hills @daughterofbev
For the (web) UX team
1. Be collaborative (agile) in
your design methods
2. Pair with engineers on screen
to establish if existing or new
patterns are needed *
3. Maintain rigour in organising
your system’s styleguide
4. Plan from the beginning with
engineering, don’t assume they
will be involved later on
5. Increase Lean behaviours and
reduce design “waste” to
improve efficiency
6. Use design artefact fidelities
intelligently
7. Be flexible J
* you don’t need to code

59. ç
Catherine Hills @daughterofbev
Finally, remember the user
Consistency is one of the most
powerful usability principles: when
things always behave the same,
users don't have to worry about
what will happen.
https://www.nngroup.com/articles/top-10-mistakes-web-design/

60. https://medium.com/@daughterofbev
https://medium.com/interactive-mind
@daughterofbev
Catherine Hills
UX Lead & Agile UX Coach