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

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

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

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

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

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 

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 

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 

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

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… 

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

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 

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. 

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

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 

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

No content

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

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

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

No content



No content



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

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

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

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 

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

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) 

SPEED TO PRODUCTIVITY The most important metric 

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 

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