UI Design for Engineers
1 like17 views
The document provides guidance for engineers on designing user interfaces. It discusses writing user stories to clarify goals, conducting guerrilla user testing for quick validation, and establishing branding and design systems for consistency. User stories are presented as a way to establish context and focus on users by describing tasks like filtering restaurants from a vegetarian's perspective. Guerrilla user testing is defined as quickly filming users completing tasks on prototypes to validate assumptions. Design systems are explained as establishing visual standards and reusable components to reduce repetition and match users' expectations.
UI Design for Engineers
- 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