Building Enterprise Web Apps on Angular-Material

2f774212696fd39fac6baee7bb4a3296?s=47 Kyle Ledbetter
February 04, 2016

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

2f774212696fd39fac6baee7bb4a3296?s=128

Kyle Ledbetter

February 04, 2016
Tweet

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
  17. None
  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
  21. None
  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>
  23. None
  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