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
   

   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