Building Angular Material Enterprise Web Apps: Kyle Ledbetter with Teradata

Show Details

Hello Tech People. Today I'm joined by Kyle Ledbetter from Teradata. Kyle is a Senior UX Designer and a Senior Level Front-end Developer at Teradata. Teradata is a global leader in data warehousing, big data analytics and data driven marketing.

We discuss innovation in the enterprise, building enterprise apps with Angular Material and reasons to use Angular Material.

I'm honored to be able to speak to a leader in the UX world.

Show Transcript

Carlos:  Thank you for tuning to Tech People where real life tech practitioners share their professional experiences. Hello tech people, today we have Kyle Ledbetter on the show. Kyle has quite the profile. He is both a senior UX designer and also a senior level front end developer. I met Kyle in a conference recently where he gave a talk about angular material and I thought he would be a great fit for the show. Also, Kyle has a very interesting point of view on the day to day of Tech People as he is a senior UX experienced architect at Teradata. Kyle, thanks for coming on the show man, how are you doing today?

Kyle:  Yeah, thanks, I'm doing great. Excited that you have this podcast. I was excited to meet you and hopefully, I'm going to have some information that can help others like me in enterprise where it seems like UX is still kind of a new notion, which is kind of a crazy thing but it's reality.

Carlos:  It is. So, tell me a little bit about yourself and what is it that you do today?

Kyle:  I work at Teradata, I'm heading up the user experience org across a whole new suite of products. We're building out a new office in Austin and we have offices in California and a lot of people working remote. Essentially what I am trying to do is hire creative individuals that are cross-disciplined. We're going to be a small team, so people have to be able to be able to jump around from design to develop. They have to know what testing is. They have to know what usability is. We have a small group of heavy hitters working on a lot of products so we jump around a lot.

Carlos:  How did you end up at Teradata? I know you have a little bit of Joomla in your background also Ebay.

Kyle:  Yeah. Back in the day... I'm going to feel old now, but back in the day me and some buddies were involved in the Joomla CMS project which is a huge open source initiative. Some people don't know Joomla powers probably around 3% of all websites, so there is a lot of them out there. I got on board around the early days of Joomla but I always had gripes about the user experience. It was designed originally essentially by engineers, just like a lot of things in the enterprise world. I got involved and redid the whole admin UI and UX, it was when Bootstrap 3 came out so we did it with that. It was a big change. Responsive was new and hot, so that was exciting back then. We got hired on at Ebay, which had a huge internal Joomla site for their data analytics. Then we moved around a couple of companies after that and ended up at Teradata.

Carlos:  That's very cool, so it's not like... It's interesting to see the progression, especially from ending you basically at the Enterprise. What we are going to be talking about ... oh, before I jump into that I hear some rumors that we are going to run into each other at ng-conf. Is that true?

Kyle:  Yeah. Definitely. We 're going to have a handful of our crew over there. We were there last year, we sponsored. This year we're coming just to party with everybody. We will have Teradata UX people hanging out.

Carlos:  Alright, so for everybody listening, Kyle and I are going to be chatting about building enterprise web apps on Angular Material. The three areas we are going to cover are innovation of the Enterprise, because I think it starts there. We've got to kind of fight with the old ways of doing things. We are going to talk about why material designing and we are going to jump into Angular Material as a little more in depth. Kyle, the goal of this interview, as I told you, is to help other fellow engineers who are in a position similar to yours. Or they are part of leadership of a large corporation. We need to show them the way and why this is in their best interest. Let's find some ways to help these people because I feel bad for them. Again, going back, innovation of the Enterprise... I think it's important that before we jump into Angular Material and material design and what it is and all that. Let's just back up a second, let's start at the beginning which is kind of an innovation in to plant the seed of the corporation. Historically, how have things been at Teradata in terms of working in modern ways?

Innovation in the Enterprise Space

Kyle:  A lot of people might not know that Teradata is an old company originally. They come from National Cash Register. They literally made cash registers back in the day and they morphed into big data in the mid 2000's. Teradata split off in 2007. Even 2007 in this day and age is a long time ago. That is when iPhone came out, right? Things have changed since then. User experience wasn't even around really in it's current form back then. Teradata is a traditional company that's moved from hardware and now is venturing into software and Agile and all these new things. We have a little bit of both. We've got a lot of appetite for innovation and modern things. We have top down support all the way up to the president and above really for all these new methodologies. They understand UX is important. Then we've got all the way from the bottom up. We've got the grass roots effort going on. We've got a lot of people coming from Open Source. They know how to work out in open with code and GitHub Enterprise. Then we have internal hackathons and things like that where we... You have to attack from both ends and we're in a good place because we've got support and cover from both ends.

Carlos:  Got it, but let's say you didn't have that sort of support from the top. How do you plant the seed in order to have leadership buy in?

Kyle:  The good thing is that typically UX folks at least have some experience in the design world, maybe some marketing. Hopefully, you've got some individuals that have entrepreneurial experience. You honestly have to sell. You have to sell internally at companies just like you have to sell with public companies with b to b, c to b c to c. Like, it's all selling and grass roots efforts is where it starts. The way that we started when I came on board... Even though I had very top support, we didn't have a lot of middle tier support. What we started doing was cataloging existing products that had user interfaces and started mocking them up with a slant on UX, right? Traditionally products were designed by engineers for DBA's. Dashboards originally were looking like that in 1969 in Nassau Space Shuttle, right? A thousand switches and toggles everywhere. Everything you could think of on one screen instead of really the thought that goes into things at UX about pushing things down, keeping it minimal, only surfacing the most common 80%.

Carlos:  Do you think that given that... For example, the company that you're at and many other companies that are older... I say older, that are a few generations older, maybe 20, 30 years. That's really young. Let's say they're 20 years old, which is in relative terms, a young company. They have different skill sets because they hired all these people back when things were done differently. How do you, I don't want to say how do you fight that, but how do you evolve how do you help the organization evolve and how do help define a new org chart?

Kyle:  It's hard, right? You've got an existing culture. Culture can't just be changed. Culture is your people. You can't copy and paste a culture from another company over the years. It just never works that way and it takes a long time to evolve. You've got to hire those key individuals. It's all really with the people you hire and bring in. They have to be natural leaders that are used to fighting the good fight. You have to find those open minded individuals on the other side of the fence because in all my experience with my past few companies I've worked at, you come in thinking that it's going to be an uphill battle and there's challenges, but there are people on the other side that know... they know they need to learn, but they don't know what they need to learn. It's like for a while a lot of companies know they needed cloud, but they didn't know what cloud was. Now companies know they need the new UX. They are open minded to it and you are always going to get pushed back. It wouldn't be a job if there wasn't some challenges.

Carlos:  Absolutely. What would you say are some of the risks of not evolving?

Kyle:  I honestly think it's... without being too dramatic... It's evolve or die. I think in this day and age, with the way that the internet and GitHub and start-ups and communication across the globe and Agile... The way that everything has evolved, it doesn't take long and it doesn't take much for some small start up that doesn't need a lot to come and disrupt your industry. Open source is always a big shake up in our world just because it lowers barriers and entry to costs. Even though open source is free, we all know it costs something.  Hadoop shook up the big data world. Even though it wasn't on par with some of the other paid offerings like Teradata it still changed things up. There was an ease to get things going and it's on boarding. There is always some new comer that can pick one thing about you that's really poor and destroy you. You have to be ready to catch up evolve, but not always catch up. You have to have foresight, so you bring on the right people that are thought leaders and you really need to rely on them to tell you what's going on in the market and to look ahead.

Carlos:  What would you say are the benefits aside of diminishing these risks? What are some tangible benefits of doing it?

Kyle:  Specific to UX or just in general?

Carlos:  Yeah, specific to UX.

Kyle:  To UX, it's really customer satisfaction. With a product company like ours, it's more customer experience than user experience. Historically, a lot of these products are hard to use and people were in an echo chamber so they never knew. The engineers were off hidden somewhere in a cave. The customer's were complaining for years and years and years, but nobody ever heard anything because they didn't do all the testing and the feedback cycles that you have with the UX. Some people, including myself, for a long time thought of UX as more of the interface side and just make things pretty. The most valuable part is the feedback loop and the constant iteration for making things better, easier, and more pleasurable.

Carlos:  Wait, it isn't about making things pretty?

Kyle:  Don't get me wrong. I do like to put lipstick on a pig, but it is really about the feedback cycles. It's about being in the customer's face and really let them know that you hear them and you want to evolve for them.

Carlos:  This is a question I actually didn't plan for, but it just came. What do you think about those designers who think that the solution comes from within versus through a process. Those that are like me and my ideas versus the process that we can put together and come to solutions. What do you think about that?

Kyle:  I think it's a maturity thing. There's a little bit of fear involved sometimes when you put in a lot of work in a design. I know I've done it a lot where if you get too tied to something and if you love it too much, you don't really want to get feedback because there is a chance they won't like it or they are going to want to change something. This is kind of a nice segway. I don't want to take you off track, but this is honestly why with our crew we are using material design and we are following the spec exactly. I didn't want people to fall in love with their design too much. I wanted them to make it where they could throw it away and everything was a sketch and we could quickly change things.

Carlos:  This is perfect segway to material design. We've now convinced leadership, right? We now get to actually do things the way we should be doing. You are basically into answering my next question which is, first of all, what is material design?

What is Material Design?

Kyle:  Material came out of Google. There was a time when Google didn't care about design and didn't care about user experience. They had isolated teams with products that didn't look the same. They didn't have designers on every team. They were just interested in building tooling and building things fast and iterating on it. They were iterating on the future end, but not on the UX end. Larry Page got an effort together of all the Google designers. I think it was called Project Kennedy when they first kicked it off a few years back, they uniformed all their designers from across the company and came together with this design language. They say it's a metaphor. They tried to bridge the tangible world with the intangible technology world. They use depth with like laying paper over each other and there's shadows and depth and interaction between those things. It was developed for mobile First but it's now fully implemented on anything. It was developed for Android, but now of course since Android is everywhere, they flushed out the spec all the way from the watch, to the desktop, to the TV, to the car. Material is a design spec that just covers any interface you can think of and any interaction you can think of. It's extremely detailed.

Carlos:  Is this an alternative to Zurb's Foundation?

Kyle:  Foundation and Bootstrap are really just frameworks. The neat things about those was that they're devoid of styling because they wanted you to put in your own branding of styling on top of them. There was no real design spec, although people now have built them. I'm sure there are examples on top of those. They're not baked in together. Material design itself is just a design spec and then there are implementations. There's a ton of them now but the official implementations also come from Google. There is an Angular implementation called Angular Material, and there is Polymer, which is a web components implementation.

Carlos:  We'll jump into Angular Material in just a sec. Before we get there, how does material design make life better for the actual engineer but also for the product owner?

Kyle:  For a smaller company, or for a big company like the one I work at, with a small team of UX resources, we only have a handful. I actively only work with five, but there are probably another ten in the entire company and there's 10,000 employees at Teradata. That tells you how few of us there are. The best thing about material design as a spec and the frameworks that come with it are that part is already done for you. So designers have an ego so we typically like to make our own design specs and our own style guides and share them with the world on Dribble. There is a time and place for that, but in terms of product design and UI, there's nothing wrong with adopting something like material as your human interface guidelines. They have it for the phones. They have it for native applications. When you build an OS 10 app you just follow the existing interface. When you build an Iphone app or Android app, you just adopt the existing user interface. We're doing the same thing with material design. If we are treating it like an open source design spec that we just adopted and we don't have to maintain it, and we don't have to add to it.

Why use Angular Material Design?

Carlos:  That's actually interesting because it segways into my next question. How did you adopt it? How did you come about making that decision? What convinced you?

Kyle:  Back from my Joomla days when I mentioned I used Bootstrap and at Ebay I also used Bootstrap. At that time before Bootstrap version 2 came out, Bootstrap 1 was tiny. People were developing their own design frameworks. It's a lot of work, we were going down that path. Bootstrap 2 came out, then 3. It was a fully flushed UI library that we didn't have to create. We just built on top of it, so that became a huge proponent. Then of course, people adopted Foundation and similar things like that but still you had to have your design spec. For us it was an evolution of that. It was just having these components off the shelf that we could just go grab and it was easy for us to implement with the products that we were creating because we were creating new products in a company that only had one or two other existing products with an interface at all.

Carlos:  Interesting. Did you have to sell it up to the CTO or anybody up in leadership for you to bend and invest time in?

Kyle:  Yeah. We took a couple of concepts for products. We actually did it before we even had people to build the products, when it was a just a handful of us when we started the department. We just took material and the two concepts for products that we were going to do as an organization. Threw together some interactive mock ups, which I guess we haven't talked about that yet. I personally love to design in code because you can actually design interactions and web is in code anyway, so naturally it's easier to just jump right in the HTML, CSS, and JavaScript. We put together a few interactive mock ups. These people weren't used to that so they actually thought they were functional products when they first saw it and were amazed that we built it with two people in a couple of weeks. Threw together concepts and I grabbed Material because it was out and I didn't have time to build the design spec. They loved the style. They loved the depth. They had just come off of changing their existing interface they had too flat and they didn't know what flat was. They liked that this wasn't quite flat. Materials kind of the hybrid of skew morphism and flat so it does add depth. They liked the bright colors and I found a nice shade of orange that matched our brand for Teradata.

Carlos:  Do you think that since it's backed by Google, could that have helped?

Kyle:  Yes and no. It's interesting. I actually got push back on that. One of the most common things I hear about being apprehensive about using Material design is saying, "Won't we look like Google." Which I get because Google designed it and it looks like Android. The thing I have to tell them is what I talked about earlier. It's like a human interface guideline. It's like an SDK for the web. Just like people don't really care if one of your Mac applications looks like a Mac app. They care about the features you have, right? For me, I had to explain that it's OK if we look like Google. It turns out that Google is a big company that people like and they know a thing or two about the web and interfaces, so it doesn't hurt.

Carlos:  They must be doing something right.

Kyle:  Also, people are immediately going to be familiar with your design patterns. You don't have to introduce brand new design patterns. They've also probably experienced them on the web going through some Google site or if they use an Android phone.

Angular Material in Depth

Carlos:  Very cool. Now let's jump into angular material. I know that angular material is part of material design, but what is angular material specifically and how does it... We've been talking about material design, but what is angular material?

Kyle:  Angular Material isn't really a part of material but it's vice versa. Angular material is a framework built by Google to the spec of material design. I spoke about it a second earlier. They built two implementations which I found interesting. Polymer which probably gets the more press. It's kind of the newer hotter technology because they're building native web components, which is kind of the next best thing for the web. At the same time, the Angular team built Angular Material which is a direct implementation of the spec into an Angular framework of all the UI components.

Carlos:  One of the things that... The entire purpose of this interview is shedding light on how or why also and I think we already discussed the why. We won't do it. We outlined kind of the perils very strongly. Give us a walk through of what it is to build an angular material versus the alternatives.

Kyle:  What I love about angular material is first of all we know it's backed by the material design spec. My stance when I talk to product owners, product managers or anybody else in the company, when they ask for something, some kind of UI element, some kind of interaction, I say OK we're going to follow this spec. If it is a list, it's going to look like this. If it's a button, it's going to look and act like this. When it's time to actually start working on mock ups and producing the UI, all we have to do is jump over to the Angular Material docs. They have the code right there. You can literally copy and paste it right in and start using it. I don't even have to maintain our internal documentation for our UI because we are just building off the native angular material. We've extended it and the beauty of angular itself is that you can build directives so you can use native HTML element filling things. For our tool bar, it's TD toolbar for Teradata toolbar. Moving to Angular 1.5 and Angular 2.0, now we have components. Those web components that I talked about earlier in Polymer are now coming to angular. Now we're getting the best of all worlds. I can build real native HTML components based on material design.

Carlos:  Do you think that this sort of approach has helped you guys shorten your timelines and get things out to market or maybe not to market but get something out quicker?

Kyle:  Yeah. I think agility, lower case agility in the Agile world really fits in with this approach. If you can have your design language, your design spec nailed down and your UI library ready to go where you can just copy and paste things in, basically it's like playing Lego's or puzzle pieces. All within one sprint. We'll get requirements for a new UI element. We have time within a 2 week sprint to mock it up in a couple of days, get some interactions going, plug it into the API and get feedback and merge in the finished feature all within two weeks. And honestly, sometimes we've been working so quick lately that our UI people are now working in one week sprints because two weeks is too long.

Carlos:  If anything, that's a pretty amazing reason to do this, to look into this.

Kyle:  Yeah, and consider again, we're jumping across three or four products with a total of five people so the fact that we could still move that fast.

Carlos:  Absolutely. What would be one last recommendation you would give somebody whose reluctant.

Kyle:  There's nothing like trying it, right? The proof is in the pudding. I would just say read up on it. There's posts out there on medium, even ones I've written myself about how to get ready to get ramped up. Essentially think of it as atomic design combined with material design. I kind of been nicknaming it atomic material. You've got all these reusable components and templates and layouts that you can just shuffle around. For you to have to worry about going back to the drawing board every time, going to Photoshop, doing wire frames, and just being able to dive into an interactive mock up all within minutes. I mean, to me it's liberating.

Carlos:  You said it. It's freeing of... It even makes sometimes our own design processes a little... We don't need that. We don't need to go through an entire design sprint or go through all that. It's right here. Done. You want to go through that but it doesn't...  It declutters a lot.

Kyle:  Yeah, and honestly for me just adopting somebody else's design spec has helped me shed a little bit of ego that's associated. Don't worry, I've still got plenty of ego left. For me to not have my pride tied to this thing and just throw it away if it doesn't work and move onto the next thing is also liberating. It's pragmatic. All we do is focus on the futures. We focus on the customer and the futures and worry less about the facade.


Carlos:  I like that. You got to send me those links because we'll have those on the show notes. Alright we're getting down to our last three questions and these are not related to our main subject but are kind of more related to... You'll see. What advice would you give your younger, less experienced self?

Kyle:  Oh man. That is tough. Don't party so hard. No. I think there's this fear and it's probably changed because I feel like an old guy now. When I was coming up, it was so hard to find information of what should I do to become a web designer. Now people ask what should I do to become a UX designer. The biggest and funnest thing... the biggest thing I can recommend is getting out there. I met you at a conference, getting out of my shell, that I hunkered down into for a while. Go to meet ups, go to conferences, submit talks, get turned down a lot, right and get your ego busted until you get one accepted. Get involved in open source projects. We won't even look at somebody's resume if they don't have a nice GitHub profile or a nice Dribble profile or just out there doing something, writing blog posts.

Carlos:  That seems to be kind of part of the profile of the person. They need to have that. Otherwise, they are not important enough to be hired. Yeah, you just said it. There is something huge about going out there. You and I met and we had a chance to take you to have Cuban food, which it was pretty cool.

Kyle:  That was awesome and delicious.

Carlos:  All right, so what book you'd recommend to this engineer we just converted. This guy has no argument but what would be a book you'd recommend?

Kyle:  The funny thing is that I joke at the office with the guys because I say I don't read. I like pictures because I'm a designer guy. For me with the advent of the way the internet's gone, I don't read books as much as I read online. I am addicted to reading blogs from Medium and browsing through Dribble posts and for material design looking at which is like an inspiration feed for material design. I do it around the clock. When I wake up in bed in the morning I'm looking at it. When I go to bed, before I go to sleep, I'm looking at it. People always ask me how do I know all these tech tools out there and tricks, it's because I'm obsessed with it. I don't know how you can recommend that to somebody, but just get obsessed with it.

Carlos:  What we'll do is you'll send me links that you'd recommend reading and some of yours, so that we can share them with some of the people listening in. Also something I wanted to... before we end here... This is going to sound kind of weird, but we need to define the UX role a little bit better because people get confused about what UX is. Right before our call, I was talking to UX scientist who does work with wearables. This is a guy who was designing wearables 20 years ago and how UX plays a part in that. It's not just web applications, it's what it is. It's so deep and so complex that I think it's interesting to kind of define that. I don't know if there is a book or a article you can recommend about that, but you don't need to answer right now. I don't want to put you on the spot, so you can send me whatever you want around that. That's something that I would love to get some of your thoughts on.

Kyle:  Yeah, I can. I can send you something for sure. Just quickly, I'm OK with UX being a broad, ambiguous term because everybody should own it a little bit. The people on my team... I let people gravitate towards whatever they love the most. I'm still a designer at heart, so I do love jumping out to sketch and doing some graphics every now and then. I really do love the beautiful aspects of the aesthetics of an interface. We've got a guy on our team that loves usability. He actually writes out the usability tests and loves doing the interviews, so I let him own that. He owns that himself. One of them loves information architecture, just the order of the table, the order of the links, where things should be. I think in the traditional sense of UX being those things, information architecture, usability, all those things, accessibility... Its fine as it is, but there are a lot of engineers you wouldn't consider UX that do UX with us. I think that it's part of everybody.

I had a Dev ops guy and one of our backend engineers yesterday call me out in a sprint review saying, "We've got some usability issues." Immediately I thought of just buttons not working. They were like, "No, if something goes wrong on a backend and I'm trying to create this other thing I need an error to surface in such a way that it guides me through fixing it." I said "Yeah, that's a usability error." UX is almost like a cultural thing.

Carlos:  Right, I agree with you 100%. Kyle, this has been awesome. I've been waiting for this interview for a while because you were traveling. I'm happy that your travels went well. I've been exciting. This has been an exciting time having you on the show, talking about these things. I think you bring a fresh perspective into this world so first of all thank you for coming on the show.

Kyle:  Thank you, man.

Carlos:  Now last question and probably most important one. How can people find you and find your work?

Kyle:  I guess the easiest way is either Twitter, Dribble, GitHub. My user name is just my full name.  Kyle Ledbetter @ whatever.

Carlos:  You also have a pretty cool website., right?

Kyle:  Thanks. It's got my big fat head as a background image, but otherwise, it's great.

Carlos:  Alright, we'll have all those in the show notes. Once again, thank you so much for making it today and for everybody who tuned in, thank you so much. I hope you guys had a good time listening to us chatting about material design and how to create web applications using Angular Material for the Enterprise.

Building Credibility and Influence as a Leader: John Sadler with Agilent Technologies
Listen to episode