When developer must become designer

A presentation at Connect.Tech in September 2017 in Atlanta, GA, USA by Angel Banks

Slide 1

Slide 1

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

Slide 2

Slide 2

Hello! Angel Banks UX Designer at First Data Co-Director of Women Who Code Atlanta Haze Daze (Youth Hackathon) Program Manager at Goodie Nation Find me on twitter: @angelmbanks

Slide 3

Slide 3

● ● ● ● Grow and showcase women in tech 500+ women and allies of all genders Downtown Atlanta CFP is open now! papercall.io/we-rise-tech

Slide 4

Slide 4

http://ng-atl.org

Slide 5

Slide 5

1 What UX is And what it is not... @angelmbanks

Slide 6

Slide 6

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

Slide 7

Slide 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 @angelmbanks

Slide 8

Slide 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. @angelmbanks

Slide 9

Slide 9

UI is not UX UI UI is a part of UX UX @angelmbanks

Slide 10

Slide 10

How are they different? UX Designers UI Designers UX designers are concerned with the overall feel of the product and are particular about how the product is laid out. 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. @angelmbanks

Slide 11

Slide 11

2 Bad UX @angelmbanks

Slide 12

Slide 12

Bad UX ◉ Inappropriate messaging Place your screenshot here @angelmbanks

Slide 13

Slide 13

Bad UX... ◉ Too many paths Place your screenshot here @angelmbanks

Slide 14

Slide 14

And in real life…. @angelmbanks

Slide 15

Slide 15

@angelmbanks

Slide 16

Slide 16

@angelmbanks

Slide 17

Slide 17

3 Developer → UX Designer @angelmbanks

Slide 18

Slide 18

UX Design Process @angelmbanks Diagram featured by Cindy Wilcox

Slide 19

Slide 19

Strategy ◉ Stakeholder discussions to determine: ○ Client goals ○ Business objectives ○ Project scope @angelmbanks

Slide 20

Slide 20

Discovery ◉ Gather data ○ Competitive analysis ○ Content audit ○ Analytics review ○ Surveys ○ User interviews @angelmbanks

Slide 21

Slide 21

Analysis ◉ Analyze your findings ○ User personas ○ Journeys and use cases ○ Heuristic review ○ Participatory design sessions @angelmbanks

Slide 22

Slide 22

Design ◉ Finding the solution to your problem ○ Sitemaps ○ Sketching ○ Wireframes ○ Prototype ○ User testing @angelmbanks

Slide 23

Slide 23

Production ◉ Before we code... ○ Further user testing ○ Further design iterations @angelmbanks

Slide 24

Slide 24

4 Design Principles @angelmbanks

Slide 25

Slide 25

KISS Principle ◉ ◉ ◉ ◉ Keep it short and simple User friendly Minimum number of actions Avoid unnecessary and distracting animations @angelmbanks

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

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 @angelmbanks

Slide 29

Slide 29

Consistent Style ◉ ◉ Create UI components of content/information Use design patterns, libraries, and style guides @angelmbanks

Slide 30

Slide 30

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. @angelmbanks

Slide 31

Slide 31

Example by BlueSteel Solutions

Slide 32

Slide 32

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

Slide 33

Slide 33

Material Design Guidelines @angelmbanks

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

Atomic Design ◉ ◉ Created by Brad Frost Methodology that consists of 5 stages to create a UI in a hierarchal manner. @angelmbanks Diagram featured by Brad Frost

Slide 37

Slide 37

Diagram featured by Brad Frost

Slide 38

Slide 38

6 Design pitfalls @angelmbanks

Slide 39

Slide 39

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

Slide 40

Slide 40

7 What now? In the future…. @angelmbanks

Slide 41

Slide 41

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

Slide 42

Slide 42

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 ◉ The Elements of User Experience: User Centered Design for the Web and Beyond - Jesse James Garett ◉ Atomic Design - Brad Frost ◉ Medium Blog - Sophia Voychehovski Prater ◉ Babich.Biz - Nick Babich ◉ Design Systems - Alla Khomatova @angelmbanks

Slide 43

Slide 43

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