Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Enterprise Web Apps on Angular-Material

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

Kyle Ledbetter

February 04, 2016
Tweet

More Decks by Kyle Ledbetter

Other Decks in Design

Transcript

  1. Building Enterprise Web Apps on Angular-Material
    Kyle Ledbetter – UX Architect - Teradata

    View Slide

  2. Teradata comes from NCR
    (National Cash Register)
    Founded in 1884
    Teradata spun off in 2007

    View Slide

  3. We’ve traditionally shipped
    hardware
    Long release cycles
    Waterfall development
    Extensive testing before release
    Work in same location
    Thousands of engineers

    View Slide

  4. To the cloud!
    Our team is the tip of the spear for agile, software-
    only products

    View Slide

  5. Lots of opportunities
    Pick modern software (Go, Angular-Material,
    Docker, Mesos)
    Decide collaboration (Slack, Github, Hangouts)

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  9. It’s a design spec married to code
    framework(s)

    View Slide

  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…

    View Slide

  11. The spec keeps growing & iterating for
    you w/o your time
    Elements are added for you, such as the data table and stepper

    View Slide

  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

    View Slide

  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.

    View Slide

  14. Familiarity for Users, Designers &
    Developers
    Speaking engagements, attracting new hires and then onboarding them

    View Slide

  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

    View Slide

  16. Deep, Immersive & Specialized Views
    VS shallow views that include everything under the sun

    View Slide

  17. View Slide

  18. Don’t Hack the Core!
    The open source approach to not hacking the core works for design!

    View Slide

  19. In design mockups, interactive mockups & production code
    Shared Reusable Components

    View Slide

  20. Stick to the spec (don’t hack the core)!
    You can still design anything

    View Slide

  21. View Slide















  22. View Slide

  23. View Slide








  24. View Slide

  25. We created a reusable Stepper component based off the spec
    Extending Framework from the Spec

    View Slide

  26. We created a reusable Stepper component based off the spec
    Extending Framework from the Spec

    View Slide

  27. Charts and visualizations aren’t currently covered by the spec
    Obvious Areas to Extend the Spec

    View Slide

  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

    View Slide

  29. YOU SERVE MOTHER MATERIAL
    (ego aside, it’s all about the spec)
    Usability isn’t always sexy, these aren’t Dribbble shots.

    View Slide

  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)

    View Slide

  31. SPEED TO PRODUCTIVITY
    The most important metric

    View Slide

  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

    View Slide

  33. Let’s keep the conversation going online
    Thanks Y’all!
    Kyle Ledbetter
    @kyleledbetter
    KyleLedbetter.com
    http://tinyurl.com/uxd2016

    View Slide