We all face user experience (UX) challenges when building apps. Bekah Rice of truematter describes her own experiences as a designer and developer, and how Kendo UI has helped.
At Progress, we know user experience is a critical part of the design of any app. It's why we work hard to build developer tools that help make it easier for you to deliver an amazing experience to your users. But how are our tools being applied in the real world?
We caught up recently with Bekah Rice, an interactive designer and frontend developer at truematter, to talk about user experience (UX), accessibility and web app design. She spoke to us about the kinds of demands she faces in her role and how Kendo UI has been an effective force multiplier for her process.
TLDR: Here's a short video summary of the full interview with Bekah:
Progress: Hi Bekah, can you tell us a bit about what you do at truematter?
Bekah: Typically, I'm involved in designing the interfaces for complex web applications. We do everything from sites to Internets, to wearables, to anything with a screen. So designing and thinking through the interactions going on in that final product, all the way through to actually doing the frontend code for it.
Progress: And what are the kinds of problems that you are trying to solve for your customers?
Bekah: We have a pretty diverse client base. One issue in particular that I can think of that was fairly recent: with all of our clients we do user research before we even start a project. So we go to their location if it's an internal application, which in this case it was, and we spend time with the end users watching them work. So literally sitting there with them at their desk watching them do their day-to-day activities.
And we had one user in particular that just basically told us, I look at spreadsheets, numbers, charts all day, and it sucks. It just sucks, my eyes hurt, you know, staring at these numbers all day. And so working on that project that's all I could think about. How can I make this suck, less for him. And so going back to that periodically through a project, that's a big thing we do. With that problem in particular the thing that I obviously want to focus most on is how I can simplify that interaction for him. How can I make it effortless, and really beautiful? Beautiful things don't tend to suck as much.
Just thinking through how can we make those rows and rows of numbers that he has to look at for his job just a little more pleasant for him so his eyes don't hurt.
Progress: And how has Kendo UI helped with this process?
Bekah: Before we were using Kendo UI we would design everything from scratch. So in the beginning stages of the project we have an information architect that wireframes the interface, designers that then design the final look and feel, and then developers obviously. But when we got to development it was always kind of like, we're out of hours, we're out of budget, make this thing you've never seen before. And make it do all of this.
That put a lot of strain especially on our frontend team to try to execute all of this complexity, all of these very specific types of interaction that we've spent all this time designing. So when we found Kendo UI we were like, "Oh my God, here's this toolset, this force multiplier for us to start with at the beginning of the project."
Having that toolset you know, okay we're going to have a chart here, we're going to have a grid, etc. Kendo UI has that out of the box and we know what we can do with it, what we can't, where we can customize things to meet those very specific needs that we've identified early on. And that's been a game changer. I mean just having that and knowing what we have at our disposal ahead of time is awesome.
With our clients it's the same way. One of the things that was really bad about developing all these custom components before using Kendo UI was the maintainability of that for us internally is a project in itself. As anyone that's tried to do that type of thing knows, it's not maintainable long-term unless you're actively working on it day-to-day. We don't expect our clients to do that either. But with Kendo UI, that's already done for us, and so we know that it's been tested. We know that it's being constantly updated. So that's one less thing that we have to think about.
Same thing with the interactions that are already built in. Having to fine-tune that, yes we do that from time to time. But knowing that I can focus more on the way things look, the way they're going to work for the user and not the actual gritty functional aspects of it, is great.
And our clients appreciate it too because it's kind of a common language we can share. We frequently work with their development team, so we're like an extension of their team. When we tell them we're using Kendo UI it's not just, "Okay here's this thing you've never heard of." It's got a full library of documentation that their team can learn and that we already know here. And it becomes a common language for us to share so that when we're talking about these parts that we're going to use, they already know what they are, what they can do, and it just makes it a little more seamless, and a lot less stressful.
Progress: So how did you get started with Kendo UI?
Bekah: We got started with Kendo UI because we heard about it from a client, actually. We were working on a project for them with their development team and tossing around some ideas for how to deal with some charts that we needed in the application. Their immediate recommendation was Kendo UI. They were a company that was already using Sitefinity, so they were very familiar with Kendo UI. And they recommended it to us, we tried it out, we were like "Wow this does way more than we need it to, great."
And that was the only part we actually used on that project but, because I had seen it, I personally tucked that away for our next project to look at again. Let's see what can we do with it. And that keeps happening actually, every time we're like "Oh I wonder if Kendo UI can do that for us," it usually does which is kind of nuts. So that got us started and I don't think there will be a time when we aren't using it.
I mean there's just too much of an advantage to having all of that flexibility and all of those tools just there.
Progress: You must run into times where you have questions or things you can't figure out. How has your interaction been with product support for Kendo UI?
Bekah: Progress has great customer support. We use them for Sitefinity all the time because we do run into issues with upgrading, and new features, you know trying to learn about them. But with Kendo UI the thing that I actually use the most is the help forum. There are a ton of really great people on there that always seem to have that one answer I need.
Even as recent as a week ago, I wanted to do something with the legend on the chart that isn't documented because I don't think anyone's tried to do it. Kind of a one-off. I posted in the forum, and literally a couple hours later one of the admins gave me the exact solution. Even made a plunker for me that showed it. So it was something that I was thinking, "Oh this isn't possible I should just find a work around" that turned into "oh it is possible and he showed me how to do it," so that was great. I was really excited.
Progress: With your work in user experience, accessibility must be an important factor for you. How has Kendo UI stacked up in that regard?
Bekah: Yes, one of our big things here at truematter is obviously we are a user experience firm, and that experience includes people that have various disabilities. So accessibility is a huge thing for us. Every product we release, every digital product is accessible. At least to AA standards, that is an internal goal of ours, and so any toolset we use also has to allow for accessibility. Kendo UI does that out of the box.
And it's just one less thing we have to think about, which is great when we're testing because we go so far as to test all of our products with the screen reader. It's one thing to be able to actually read the app or the screen, it's another thing to enjoy reading it, and for it to make sense. And so it's been really helpful that when we are using Kendo UI we don't have to think about accessibility concerns because it is accessible. So it allows us to spend more time on the things that really matter to us and that's the overall experience.
Progress: A consistent look and feel for an app is an important part of the overall user experience. How easy have you found it to apply specific themes to Kendo UI?
Bekah: The Kendo UI theming is something that I explored a good bit when we first started using it. I think it's great because I know that there are a lot of development teams out there, and we've worked with them where they don't have a designer in house. And if they do they're a print designer so they might not be as familiar with designing for web, for applications. And so a lot of the theme's that Kendo UI have are pretty diverse and I could see them used for just about anything. For a developer that doesn't have a design background, that's great.
Here at truematter we have designers—I am one myself—and because we spend so much time with our users, we're always doing a very custom design. So I have used some of the themes loosely, like I'll take the pieces and parts that I know are going to work with what we've designed. And because it's so flexible I'm able to override the parts that maybe won't fit.
I use SASS for all of my projects so the fact that there's an easily accessible list of variables that I can manipulate with the theme, it's great. It's very quick for me to take one of the basic themes that Kendo UI has and change it to meet my needs. And we do that pretty frequently, as far as even to change the icon's that are used, things like that. Having that flexibility is hugely important to us because a lot of the third-party libraries we've used don't allow for that. Or at least they do, but you're just basically overriding their styles and spending a ton of time bloating your code to do one thing like change a color.
Bekah: When I first started using Kendo UI we primarily used the Kendo UI for jQuery. It was really great for me because I'm very familiar with jQuery, that was kind of where I started, and it was really seamless to initiate myself in to Kendo UI for jQuery.Kendo UI for Angular wasn't as much for me because Angular was fairly new to me.
We actually recently had a project that we started where a company wanted to take a very outdated, very complex application and move it to web. This was their first web application and they wanted to use Angular, so immediately I went to Kendo UI and looked at the Kendo UI for Angular, which we had never used before. So far it's been pretty great, it's been a little more of a learning curve for me personally. But the documentation has been good enough for us to move forward without any issue. We had also looked at the Kendo UI for React because we had kind of talked about Angular versus React in the beginning, but eventually landed on the Angular version. The ability to use the node packages has been great. Being able to just install the packages I need at any given time has been kind of nice. It's a lot faster.
Progress: What advice would you have for someone who was just getting started with Kendo UI?
Bekah: If someone asks me about using Kendo UI I would tell them to just lean into the learning curve, there's a little bit of one there at the beginning. Really spend some time in the documentation and in the forums because there's a lot more there than you think. I think a lot of people when they see a product like this they feel boxed in that they have to go off of what they've seen in the examples. But it's so flexible and so easy to customize that if you spend the time up front really learning what it can and can't do, you're going to find that your options are endless.
Progress: You mention customization and flexibility, is that something that you do a lot?
Bekah: We always customize Kendo UI. On every project we use it on, there are parts that we regularly change and, because we know we're going change them, we've actually kind of created our own internal base theme that we start with. A good example of one thing that we always do is the date picker. So because our clients are so diverse and our users are so diverse we have to plan for different user types. So a power user, someone like me who uses the web all time, can use that date picker without even thinking. Someone like my Grandma who's maybe a novice user would struggle with it because it's not intuitive enough for her.
So some of the things we do, you know, making sure that the interactions between components like the date picker and a button, that they're the same so you can recognize a pattern if you're someone that's not a power user. And you know what to expect from an interaction. So when I click the date picker if I want to go back a month, it needs to be very obvious to me how I can do that.
We make sure of the styling of it, the interaction itself, is very clear for whatever type of user encounters it. Things like that are typically what we customize. I like that with Kendo UI I'm not constantly fighting it, so it does allow me to be flexible and to customize things. There are times when I'm searching through the documentation or searching through the forums like asking "Hey has anybody tried to do this?" and "What did you do to get it to work?" And typically I'm able to find an answer and if I'm not, there's so many workarounds because it's so flexible. I'm always able to find a way to do something close to what I wanted to do or eventually customize it to where I wanted it to be.
Progress: So if you had to summarize your experience with Kendo UI…
Bekah: Kendo UI is a force multiplier for our dev process, for our design process. Kendo UI allows me to focus on the things I do best, to spend more time designing the user experience and less time fighting with the functionality.
Progress: Thank you Bekah!
A short summary of our interview with Bekah is available on the Kendo UI channel on YouTube: truematter calls Kendo UI a "force multiplier" for their dev process.