This lightning talk was given by Grace Kwan at BrooklynJS in August 2018.

1. UI DESIGN FOR ENGINEERS
Grace Kwan
who are scared of design, but have to do it anyway

2. About Me
• Senior UX Engineer at Button
• Specialize in designing for the web
• @gckwan on Medium

3. What We’ll Learn
• User Stories: Clarify the goals of your UI
• Guerrilla User Testing: Quickly validate a prototype
• Branding and Design Systems: Establish meaning and consistency

4. The Design Process
Source: usertesting.com

5. The Design Process
Source: usertesting.com
Guerrilla
User
Testing
Branding &
Design Systems
User Stories

6. The Design Process
Source: usertesting.com
Guerrilla
User
Testing
Branding &
Design Systems
User Stories

7. As a
I want
so I can
User Stories

8. As a vegetarian,
I want to filter restaurants
so I can find options that fit my dietary restrictions.
User Stories
As a delivery person,
I want to see all of my upcoming deliveries at once
so I can plan my route for the day.

9. Why Write User Stories?
• Establish context
• Place emphasis on the user
• Clearly define the goals of the UI

10. The Design Process
Source: usertesting.com
Guerrilla
User
Testing
Branding &
Design Systems
User Stories

11. — Martin Belam
The art of pouncing on lone people in cafes and
public spaces, and quickly filming them whilst they
use a website for a couple of minutes.
”
“
Guerrilla User Testing

12. Why Guerrilla User Test?
• Quick (10-15 min) and cheap way of validating assumptions
• Can be done with extremely lightweight prototypes
• Forcing function for clearly defined users and tasks

13. How to Run a Guerrilla User Test
• Pick a specific objective for your test session.
• Give the user a prototype and a task to complete.
• Capture the feedback (with your user’s permission!)
• Encourage the user to think aloud.
• Repeat with a total of five users.

14. The Design Process
Source: usertesting.com
Guerrilla
User
Testing
Branding &
Design Systems
User Stories

15. The promise your company makes to its users.
Brand (n):

16. Branding 101 for UI Design
• What adjectives describe your product?
• Use your brand color as a highlight color.
• Stick to 1-2 typefaces.
• Differentiate headers using weight, size, style and/or typeface.

19. A set of standards and components that produce a
consistent visual language.
Design System (n):

20. Why Invest in a Design System?
• DRY (Don’t Repeat Yourself)
• Save time, increase consistency!
• POLA (Principle of Least Astonishment)
• Make your users’ lives easier by matching existing mental models
• DRW (Don’t Reinvent the Wheel)
• Lots of great open-source design systems

23. Common Pitfalls
• Use whitespace and typography to create hierarchy
• Don’t rely too much on icons
• Use copy wisely and sparingly
• Keep it accessible

24. Questions?
grace@usebutton.com
(we’re hiring!)