Building Enterprise Web Apps on Angular-Material

How we're leveraging Material Design as a design spec and web framework across a suite of new big data apps at Teradata
- created for UX Dev Summit 2016

Transcript

1. Building Enterprise Web Apps on Angular-Material Kyle Ledbetter – UX Architect - Teradata
2. Teradata comes from NCR (National Cash Register) Founded in 1884 Teradata spun off in 2007
3. We’ve traditionally shipped hardware Long release cycles Waterfall development Extensive testing before release Work in same location Thousands of engineers
4. To the cloud! Our team is the tip of the spear for agile, software- only products
5. Lots of opportunities Pick modern software (Go, Angular-Material, Docker, Mesos) Decide collaboration (Slack, Github, Hangouts)
6. But some problems Very few frontend devs of varying skillsets Different office locations (also remote) Information Architect San Carlos Product A UI Designer San Diego Product B JavaScript Engineer San Carlos Product C UX Architect Austin Product D Usability Engineer San Carlos Product A
7. Chapter of Frontend Devs & Designers across product squads UX Cross-Org SQUAD SQUAD SQUAD SQUAD Product Owners Backend Dev Quality Engineering Product Owners Backend Dev Quality Engineering Product Owners Backend Dev Quality Engineering Product Owners CHAPTER Frontend Design & Dev Frontend Design & Dev Frontend Design & Dev Frontend Design & Dev Backend Dev Quality Engineering
8. As the centerpiece of our UX Why Material Design Design spec is married to code framework(s) Officially backed by Google (& a massive open source community) All breakpoints, form factors & most devices considered Spec & frameworks are continuously extended by core & community Mass adoption ensures familiarity w/ UI & improves public perception High importance on usability & accessibility
9. It’s a design spec married to code framework(s)
10. Official implementations from the horse’s mouth (Google) Google knows a thing or two about the web Polymer Angular-Material Material Design Lite There’s also a plethora of great non-official implementations like Bootstrap Material, Material-UI (react), Ember-Paper, LumX (angular), Materialize, MUI and many more…
11. The spec keeps growing & iterating for you w/o your time Elements are added for you, such as the data table and stepper
12. So many devices & breakpoints have been considered Everything from watch to phone to tablet to desktop to car to tv have been considered, and all provided for you and tested by the world
13. Focused on Accessibility Polymer & Angular-Material boast extremely impressive support for screen readers, keyboard interactions, reachable controls, operable controls, ARIA (roles, states & properties), text alternatives, semantics & more.
14. Familiarity for Users, Designers & Developers Speaking engagements, attracting new hires and then onboarding them
15. Inspiration, Community & Resources Oh My Hundreds of icons in formats any team can use Several color palette tools for designs and developers Templates for every app & language
16. Deep, Immersive & Specialized Views VS shallow views that include everything under the sun
18. Don’t Hack the Core! The open source approach to not hacking the core works for design!
19. In design mockups, interactive mockups & production code Shared Reusable Components
20. Stick to the spec (don’t hack the core)! You can still design anything
22. <md-toolbar> <md-sidenav> <md-card> <md-tabs> <md-button> <md-card> <md-tabs> <md-card> <md-list> <md-list-item> <md-icon> <md-tab> <md-card> <md-fab>
24. <md-toolbar> <md-list> <md-card> <md-tabs> <md-toolbar> <md-subhead> <md-fab>
25. We created a reusable Stepper component based off the spec Extending Framework from the Spec
26. We created a reusable Stepper component based off the spec Extending Framework from the Spec
27. Charts and visualizations aren’t currently covered by the spec Obvious Areas to Extend the Spec
28. For extending the style guide and UI repositories Follow the Open Source Model master squad squad squad squad squad Github Pull Request Fork Pull Request Fork
29. YOU SERVE MOTHER MATERIAL (ego aside, it’s all about the spec) Usability isn’t always sexy, these aren’t Dribbble shots.
30. What about our brand? But won’t we all look like Google? Material is being adopted worldwide (immediate familiarity) Even if you look like Google, is that so bad? (associated w/ high quality) We’ve seen this fear before. (Bootstrap, Foundation, 960 Grid) Think of all your favorite apps from desktop to phone that use native UI Your brand should be about features & UX (not the color of a toolbar) Think of this as a Web SDK or HIG (just like OSX, Windows, iOS, Android)
31. SPEED TO PRODUCTIVITY The most important metric
32. Spend time prototyping & developing features instead of new UI Functional UI in 1 Sprint Interactive Mockup PM Feedback UI Implementation SPRINT WEEK 1 SPRINT WEEK 2 SPRINT REVIEW PM Signoff UI Implementation UX Collaboration UX PM UI Revisions UI Collaboration API Development API API Questions
33. Let’s keep the conversation going online Thanks Y’all! Kyle Ledbetter @kyleledbetter KyleLedbetter.com http://tinyurl.com/uxd2016