When developer must become designer

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

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

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

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

http://ng-atl.org

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

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

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

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

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

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

2 Bad UX @angelmbanks

Bad UX ◉ Inappropriate messaging Place your screenshot here @angelmbanks

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

And in real life…. @angelmbanks

@angelmbanks

@angelmbanks

3 Developer → UX Designer @angelmbanks

UX Design Process @angelmbanks Diagram featured by Cindy Wilcox

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

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

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

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

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

4 Design Principles @angelmbanks

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

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

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

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

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

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

Example by BlueSteel Solutions

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

Material Design Guidelines @angelmbanks

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

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

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

Diagram featured by Brad Frost

6 Design pitfalls @angelmbanks

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

7 What now? In the future…. @angelmbanks

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

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

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

Angel Banks
@angelbanks

1 / 43

As a developer with limited resources, experience, and time, how can you embrace your inner UX designer? What is UX and why should you care? Is there really a difference between UX and UI? Which design tools should you use?

In this session I’ll provide you a UX checklist to take you from developer to designer/developer.