This document discusses how developers must take on user experience design roles when working as solo practitioners or on small teams. It covers UX design processes like strategy, discovery, analysis, design and production. It also provides an overview of UX principles like keeping it simple, using grids and consistent styles. Design systems and style guides are presented as tools to help one-person teams work efficiently. Common pitfalls like not following process and focusing only on visuals are also discussed.

1. When Developer Must Become Designer
How to be a one-person UX team

2. Angel Banks
UX Designer at First Data
Co-Director of Women Who Code Atlanta
Lead of Women Techmakers Atlanta
Curriculum Director of GDI Atlanta
Find me on twitter: @angelmbanks
Hello!

3. ● Grow and showcase women
in tech and allies of all
genders
● 500+ attendees
● June 21st - June 22nd
● Super Early bird tickets -
$125
● werise.tech

4. http://ng-atl.org

5. What UX is
And what it is not...
1
@angelmbank
s

6. “
Some people think design means
how it looks but of course, if you
dig deeper it’s really how it works.
Steve Jobs
@angelmbank
s

7. This is User Experience Design
◉ Guides us to understand problems to solve
◉ Empathize to learn user pain points
◉ Guides the team to discover solutions to user
problems
◉ Identifies stumbling blocks, refines, and iterates to
create the "best" user experience
@angelmbank
s

8. This is User Interface Design
◉ What you see, read, and the choices you make
◉ What it looks like (colors, branding and etc.)
◉ Ensures the UI visually communicates the path
◉ Style guide ensuring a consistent design language is
applied across the product.
@angelmbank
s

9. UI is not UX
UI is a part of UX
UI
UX
@angelmbank
s

10. UX Designers
UX designers are concerned
with the overall feel of the
product and are particular about
how the product is laid out.
How are they different?
UI Designers
UI designers are in charge of
designing the screens with
which the user interacts while
following the path laid out by
the UX designer.
The boundary between UI and UX designers is blurred and it is
common for companies to combine these roles.
@angelmbank
s

11. Bad UX2
@angelmbank
s

12. Place your screenshot here
Bad UX
◉ Inappropriate messaging
@angelmbank
s

13. Bad UX...
Place your screenshot here
◉ Too many paths
@angelmbank
s

14. And in real life….
@angelmbank
s

15. @angelmbank
s

16. @angelmbank
s

17. @angelmbank
s

18. Developer
→ UX Designer3
@angelmbank
s

19. UX Design Process
Diagram featured by Cindy Wilcox
@angelmbank
s

20. Strategy
◉ Stakeholder discussions to determine:
○ Client goals
○ Business objectives
○ Project scope
@angelmbank
s
https://www.interaction-design.org

21. Discovery
◉ Gather data
○ Competitive
analysis
○ Content audit
○ Analytics review
○ Surveys
○ User interviews
@angelmbank
s

22. xtensio.com

23. Analysis
◉ Analyze your findings
○ User personas
○ Journeys and use cases
○ Heuristic review
○ Participatory design
sessions
@angelmbank
s

25. Design
◉ Finding the solution to your problem
○ Sitemaps
○ Sketching
○ Wireframes
○ Prototype
○ User testing
@angelmbank
s

26. Production
◉ Before we code...
○ Further user testing
○ Further design iterations
@angelmbank
s
https://www.smashingmagazine.com

27. UX Laws4
@angelmbank
s

28. FITT’S LAW
◉ The time to acquire a target is a
function of the distance to and size
of the target.
◉ Takeaway -> Make elements such
as buttons easy to find and
positioned appropriately.
@angelmbank
s
https://lawsofux.com/

29. HICK’S LAW
◉ The more choices a person is
presented with, the longer the
person will take to reach a
decision
◉ Takeaway -> give users a clear
path to making decisions,
provide fewer options, and give
recommendations.
@angelmbank
s
https://lawsofux.com/

30. JAKOB’S LAW
◉ Users spend most of their time
on other sites and prefer your
site to work the same.
◉ Takeaway -> simplify by using
familiar design patterns.
@angelmbank
s
https://lawsofux.com/

31. LAW OF PROXIMITY
◉ Objects that are near, or
proximate to each other, tend
to be grouped together.
◉ Takeaway -> group similar
components and content into
clusters for users to view at a
glance.
@angelmbank
s
https://lawsofux.com/

32. LAW OF SIMILARITY
◉ The human eye perceives
similar elements in a design as
a complete picture, shape, or
group, even if those elements
are separated.
◉ Takeaway -> ensure links and
navigation items are styled
consistently but differentiated
from normal text.
@angelmbank
s
https://lawsofux.com/

33. MILLER’S LAW
◉ The average person can only
hold about 7 items in their
memory at a time.
◉ Takeaway -> chunk your
content. Organize your content
in smaller, more manageable
groups
@angelmbank
s
https://lawsofux.com/

34. PARETO PRINCIPLE (80/20 Rule)
◉ For most events, about 80% of the
effects from 20% of the causes
◉ Takeaway -> Focus your efforts on
areas the will bring benefits to
most of your users.
@angelmbank
s
https://lawsofux.com/

35. SERIAL POSITION EFFECT
◉ Users have a propensity to best
remember the first and last items
in a series.
◉ Takeaway -> Place key actions on
the far left and right within
elements (navigation) to increase
memorization. Place the least
important items in the middle of
lists
@angelmbank
s
https://lawsofux.com/

36. Design Principles5
@angelmbank
s

37. KISS Principle
◉ Keep it short and simple
◉ User friendly
◉ Minimum number of actions
◉ Avoid unnecessary and
distracting animations
@angelmbank
s
brianedwardsuk.com

38. Content First
@angelmbank
s
◉ Not design first
◉ Focus on content first
◉ Right message to the right
person at the right time
◉ Prioritize content based on
user needs

39. Clear Navigation
◉ Intuitive for user
◉ Keep it simple
◉ Reduce learning - limit the number of paths for user to
complete one task
@angelmbank
s

40. Grids
◉ Ensures elements line up
◉ Invisible skeleton
◉ Helps you keep elements
within the constraints of
your layout
@angelmbank
s
https://css-tricks.com/snippets/css/complete-guide-grid/

41. Color
◉ Psychology of Color
○ Red = aggressive
○ Purple = royal, romantic
○ Brown = rustic
◉ Limit to 4 max
◉ Contrast is important
◉ Cohesive color palette
@angelmbank
s

43. Consistent Style
◉ Create UI components of content/information
◉ Use design patterns, libraries, and style guides
@angelmbank
s

44. Easy to Read
◉ Keep font size and type consistent
◉ Don’t be too cute with color
◉ Follow ADA compliance
○ Font size
○ Font color
○ Color contrast
@angelmbank
s

45. Shortcuts6
@angelmbank
s

46. Style Guides
◉ a “living document” to track repeatable elements:
○ Color
○ Font
○ Navigation menus
○ Buttons
○ Tabs
○ Animations
◉ Really good ones will include context, naming conventions, and
code standards.
@angelmbank
s

47. Example by BlueSteel Solutions

48. More Design Languages...
Google Material Design
Visual design language Google
created to synthesize good
design principles.
A consistent overarching style
architecture that guides the UI
design.
@angelmbank
s

49. Material Design Guidelines
@angelmbank
s

50. Additional Design Languages
iOS Human Interface Guidelines
Guidelines established by Apple to
ensure consistent design patterns for
mobile iOS apps.
IBM Design Languages
Out of the box user design
experience for web and mobile
apps which incorporates IBM’s
core design principles.
@angelmbank
s

51. Design Systems
Diagram featured by Marco Lopez
◉ Includes typography, layouts, grids, colors, icons, components,
vocabulary, style guides, and documentation.
◉ A system that combines UX principles, design rules, and UI
patterns.
@angelmbank
s

52. Atomic Design
◉ Created by Brad Frost
◉ Methodology that consists of 5 stages to create a UI in a
hierarchical manner.
Diagram featured by Brad Frost
@angelmbank
s

53. Design pitfalls7
@angelmbank
s

54. Avoid...
◉ Jumping the process
◉ Worrying about the tools
◉ Focusing on the visuals
◉ Design Envy
◉ Learning UX Jargon over UX principles
@angelmbank
s

55. What now?
In the future….
8
@angelmbank
s

56. Upcoming Design Trends
@angelmbank
s Image by AltexSoft
◉ Microinteractions
◉ Conversational UX
◉ Omnichannel UX
◉ UI that reflects the impatient user
◉ Content shapes design
◉ Virtual and Augmented Reality

57. Resources
◉ Lean UX - Jeff and Josh Seiden
◉ Design Web Usability - Jakob Nielsen
◉ Don’t Make Me Think: A Common Sense Approach to Web
Usability - Steve Krug
◉ Atomic Design - Brad Frost
◉ Hello Web Design - Tracy Osbourn
◉ Babich.Biz - Nick Babich
◉ Laws of UX - Jon Yablonski
@angelmbank
s

58. Any questions ?
You can find me at
◉ @angelmbanks
◉ angelicambanks@gmail.com
Thanks!
@angelmbank
s