Mobile Interface Design

Video Transcript

Just some basic levels that are in unless you're a web designer, you know you may not necessarily be aware of some of the new trends and stuff that are there around design the mobile interface. So I wanted to go through a few of them.

One of them is responsible web design. There's a great session tomorrow at 9 o'clock. I'm not going to go through this in much detail. It's always better to look at examples. There are plenty of examples of where sites have been designed to fit well on mobile devices, tablets and everything in between. So we, Mercantile Bank, we're relaunching our website in June with the responsive design. We're a community bank. We're not Bank of America or anything like that. I could tell you it isn't that hard. So if you're at all worried about the complexity of dealing with the responsive design project, it's not really that hard. The standards are pretty well there in the best practices and there's a lot of people who know how to do it. So if you're afraid of tackling a project like this, it shouldn't be too hard for you to find a partner that could help you.

So we're going live in about a month and we chose to do this. It's not necessarily the right thing for everybody but we have a ton of mobile users and we thought instead of maintaining the separate web optimized site, we wanted to make all of our web content readable on a mobile device without having to work to maintain multiple sites. So it worked out as a strategy for us and you can kind of see some additional detail there. A tablet version versus an iPhone version and how the content dynamically recreates itself on the device.

The other thing we had to do a few years back now, we really started taking all of our graphic assets and putting them into a Vector format, so logos and all kinds of things. If you're going to do responsive design project, this is another step along the way. You have to take all that graphic arts and everything you have and put it in Vector format. And the Vector format all that is, is it's scalable. You can stretch it bigger-small, bigger-small and you still get the same crispness of the design as opposed to it blurring out if it's like a JPEG so something to take into consideration. Again not that hard. There are tools to do this. It's really pretty easy.

One of the other design trends out there is flat design and I'll show you this in a real life banking example little later but all this is a crisp, clean layout of content on a mobile device. It's flat. Probably the best known examples, the Windows 8 platform there. And if you're looking for a modern crisp look and feel to your mobile content, flat design could be a great solution for you. So and there are just number of examples. Microsoft is obviously a big fan of it.

In the banking side of things both well moving, I know what you can see here is a banking example. It's kind of a flat design concept. So obviously they've chosen to do that with their mobile apps and they're very much thought leader out there on design, on mobile devices for banking given their strategy.

Another design topic that comes to the play is this funky word called Skeuomorphism. And it's a really ugly word for a very simple concept and that's trying to take something that existed in analog world and recreate in a digital world but not lose the intuitiveness or the you know people's brains are trained to look at something and automatically know how to respond and do with it. You see the bookshelf design, it looks like a real bookshelf, real analog bookshelves that people kind of know how to get around on it. Calendars are often done like that. There are other applications for this in the web. I've seen you know basically a check laid out just like a physical check. Well if we were designing a check digitally today, we wouldn't lay it out like a real check but people are used to you know how a check looks and feels. So they kind of feel comfortable with that and they know exactly what they need to do.

So the best applications of this tend to be in the music, music production. This is one of my favorite apps it's basically a keyboard app. If you're not a musician, I will bore you with it. But you see the idea here is you're taking very analog concepts, dials, buttons, things like that and you're trying to provide the user with a very intuitive, they already deal with the stuff in the real world. They should know how to navigate using this type of stuff. Doesn't work in every application but sometimes it can make the user experience better.

One of the other things out there in our first generation mobile apps and even in our second generation mobile app, menu design has been just something people you know the smaller the device, the harder it is to think about what do you do with the menu? And one of the most prevalent answers to that is this little hamburger design that you see in a lot of apps. You see the little three bars up there in the corner of the app? People are now kind of semi-trained to know that that is a hidden menu. And it's an elegant way to just get the menu out of the way, have the content be right there in front of you but still have that menu accessible. Facebook is obviously a mobile application that uses that to a large degree.

And you know just basically common sense thing is you don't do things the same way you do it on the desktop, on the mobile device. It's obviously very awkward. So pickers and drop downs and things like that you know you want to do them in a mobile optimized way so that the user navigation, user experience is what it should be. Those are some design concepts, pretty straightforward stuff, hopefully pretty obvious. I will tell you that I get caught up sometimes and just looking at financial and banking apps and that's probably the worst thing you can do from a design perspective because we're the worst designers on the planet. So I have to open up my eyes sometimes to look outside of the industry to see maybe what the best trends are. So I encourage all of you to obviously do that too.

I want to talk now about some mobile functionality that's out there that is pretty exciting stuff. Some things that are new, some things that you've probably already heard of but I want to give you some practical advice from the bank like us. It's trying to do some of the stuff. Being community bank, you would think you know well, we're not Bank of America. We should just sit back and watch. I would encourage banks of any size to really look at the stuff and through strategic partnerships you can get a lot of this stuff done and sometimes you can get it done on a pace that beats some of the bigger banks. And we've been lucky enough to have good partners and be able to do some of that.

First concept is something well I call financial app store. And it's something that we're trying to achieve. I can't say that we've achieved it yet but we're trying to bring all of our mobile apps because we're starting to accumulate mobile apps now. Integrate them into one mobile app and then maybe down the road, look at this as an opportunity to maybe have a basic set of mobile banking. And then have a deluxe set of mobile banking that maybe you pay 99 cents for mobile remote deposit capture or some other functionality and be able to monetize some of the stuff in the mobile app. People are you know they don't really seem to care about paying 99 cents for something. So a way to get some money out of the mobile app you know we give everything away today, but down the road I could see us as we add more and more enhanced functionality to the apps you know we'd like to maybe make it a way to monetize that.

One of the new features that I've seen that I've really like and would really like to do is this no balance or no log-in balance peak. And what it is basically, it allows your customer to change the setting and without having to go through all the log-in protocols, the multi-factor, they could maybe immediately see a balance in the last five transactions or something. Something really simple. If you're in the store and you don't want to spend a lot of time logging in but what I really like about it is it gives the consumer a choice to turn it on or off. There are people that wouldn't want that that are piracy and security I won't say freaks but obsessed about that. And it can you know it should be defaulted to off but I know a lot of our customers hate log-in processes, hate security. Well they don't care because they're not the ones liable for it, we're liable for it. But this kind of feature could be really helpful as these devices pop up more and more in stores and things like that. So this bank is doing it and there are a couple of other banks out there that are looking at them.

I think what we've tried to do is cover the entire payment spectrum on the mobile device platform and look at everything from being able to do the card processing like square, mobile remote deposit, personal payments, P2P payments, bill pay and eventually here mobile wallet. Trying to give that customer really every opportunity to receive and send money that's out there that makes sense for them and be able to do it for the mobile device. So payments we feel is probably the most important mobile application out there.

One of the things is you know we talked about earlier with mobile wallet and where it stands today is we've got to build on something. Eventually there's going to be a standardization and the successes are going to be built on what kind of value can you add to that? And one of the ways I think we could add a lot of value to a mobile wallet application is integrating it with some sort of personal financial management tools. And we're really excited about what's going on in the PFM space right now especially on the mobile device. We have just partnered with mondydesktop and really like what they are doing from the user interface. If you see they are using kind of a flat design which works really well for PFM. And if you want to talk with PFM with moneydesktop, the map is right over there in the corner. And I also got to give a shout out to the strands guys, Brian and his team. They got some great products and services too, and we had a real tough decision on which way are we going to go with that. So PFM you got great guys in the room here. They'd be excited to talk to you about what they are doing on especially on the mobile platform and how that could really change the game in terms of PFM adoption.

And one of the other important things to think about in PFM especially on the mobile channel and desktop is how do you integrate that into your existing apps. It really doesn't work well as a standalone app out there that they have to go to separately. You want to give the customer as much of an integrated experience as possible. Where that's in your standard online banking app or maybe down the road in the mobile wallet space.

From a practical point of view, mobile wallet is really not a lot you can do as a bank right now except look at the partnerships that are out there. The people that are doing some things. I really like hearing the Bank of America is betting on multiple solutions because that's exactly what I'm doing. They stole my idea. So being a thought leader, you know that happens. But Bank of America you know they can thank me later. What you can do now from a practical point of view even if you're a small bank is you can get your branding out there on these wallets. We partner with Google, we partner with V.me, and we've gotten our branding and our logos and everything out there so that when a customer signs up for one of these wallets and they add a Mercantile card, it's our branding logos. It's not just some generic card there which for right now, that's about our getting out of it but definitely see the future. We want to give our customers a choice. So we're going to be partnering will all three of these. We have a good relationship with PayPal and working with them as well and it's about giving the customers choice. I don't know which one of these is going to dominate in which space but we think giving the customer a choice is the right way to go. And Bank of America agrees with me.

Mobile–woops, holy cow. TV, I broke the TV. Mobile account opening. You can charge me for that later. Mobile account opening you know this is probably an ugly process today for most of us but it is changing and one of the ways it is changing and becoming more impactful is we look at this as a strategy to get out employees out there in the community. Out there being able to do things on-site with the customer. So getting our branch employees the opportunity to open that account at lunch when you know the decision you know instead of having them waffle and say well I will come in next week and open that account, we can get that done you know right then and there. And then adding in maybe self service with video chat assistance, you know that would make it even potentially much better customer experience, more personalized. So we've got partners and they're in NCR helping us with that.

Mobile chat support. Simple bank, bank simple I should say. Simple now. They've built that right into their launch strategy and we've got folks I think from live desktop here that can do a lot of things to integrate so that you have the same customer experience, the same level of support on these mobile devices as you do in the branch and even better looking at down the road, actually this is not a down the road item. This is something that NCR through their acquisition of uGenius were ready to beta test with them for mobile and desktop video chat support. And the nice thing about this is we've already partnered with them and we have some video tellers if you are familiar with those from uGenius. We were deploying those as a strategy to increase our physical footprint without having to spend million dollars, 2 million dollars to build a branch. Well that feeds into a customer centre, call centre if you want to call it that where we can do the transactions off the support. These channels would go right through those same rails to the same group. So from a staffing point of view the technology is built so that you can run not only mobile virtual banking centres but also give your customers mobile video chat support from one customer group and then you'll have it all come in the same way, be tracked and routed and measure the volumes as you would.

Location based data, still trying to figure out what we can really do with that from a banking and finance perspective. Moven and Simple both integrated that into transaction tagging which is kind of nice. Sometimes if you go to happy hour and then you go out to the bar afterwards and you look at your purchases the next day and you don't know where you were. This kind of thing could help you. You could retrace your steps and figure out where you were or where your spouse was or whatever. That's a relationship issue that I won't go into.

This is a cool feature too and a lot of the networks are now offering this. You know the trick is just getting it integrated together into your mobile apps but the ability to turn your debit card on and off. So you know for whatever reason I mean sometimes you think you lost it, you think you left it at the gas station but you want to give yourself sometime to look for it before you call the bank panicking and having them shut it down because it's a painful process to get a debit card resent out and all that kind of stuff. It will be really nice to just go to your mobile app and just say turn it off. I want to turn it off. It's temporary. If I find it tomorrow, I'll turn it back on. If I don't, I'll order a new one. And even cooler than that what some of banks are doing is they're allowing customers within a certain tolerance range. They can increase their purchase limits within the range for temporarily maybe they're traveling. Increase their ATM limit and the big one there, allowing foreign transactions. If I'm not leaving the country, I don't really want to allow foreign transactions. Most of you if you talk to your card folks, we've been having a lot of card fraud from Canada like that. I don't know what's going on up there but a lot of our customers are getting hit by that. This is a great self service tool that allows your customers to help you combat fraud. This kind of stuff is really neat. I would imagine that someday everybody is going to have this as part of their mobile app.

We built out a separate, before we started our responsive design project for the website, we actually built out an HTML 5 site for mobile content. Mainly for mobile marketing purposes and what we are trying to accomplish was and it kind of has a bookshelf design. You can't really see here but it's got some nice quality mahogany black wood green towards very expensive. But when we were designing the content, we didn't want it to be very text based. We had some very simple concepts from marketing standpoint about products and services and things that we wanted to get across. And we want to integrate to social media and the videos that we had made to really explain them better. These are not five hour movies, they are 30-second kind of snippets that really explain better than text and it just works well over mobile device to go at that route. Less text, little more video or other content in this link straight over to our YouTube channel. And it also you know you can swipe back and forth. So it utilizes some of those HTML 5 touch screen capabilities. This is something very easy to set up and do. Not difficult at all.

So how does this all kind of mash in together in the strategies, mobile branches and social media and everything coming together. It's kind of all colliding. At least we've seen in some of our experiments and there's some really interesting possibilities. One of the things we are doing, you can see the uGenius video banking terminal there you know touch screen TV that's up there, that's what's going into a university new business school that's opening up here in May. We are installing it today so I don't really have the real time pictures. You've got the personalized technology of the video banking unit and then the touch screen there has all kinds of content that's customized. We work with a company called Micro-Industries out of Ohio, and they've built us a really nice application that allows us to dynamically send content down to that. It has a Facebook picture taking app. It has the ability to deliver social media feeds from both the bank and the university. So we're integrating a lot of the university content, campus maps, bus schedules, all kinds of stuff in a very touch screen interacting design.

And then payments, we're doing something and this isn't live yet because we're still working with the university on it but there is a, this is in the main floor lobby area and there's a cafe right maybe 25 feet away. One of the things we are doing through QR Codes is being you know if the customer goes up to that touch screen and is randomly doing something, we'll have random prices. And for right now what that means to us is that randomly we are going to pop up a QR code saying hey, you won a free meal at the cafe or free soda or something like that. They take a picture of what the QR code and they can walk right up to the cafe and redeem it real time. So kind of you see social media, technology, banking and all that stuff kind of colliding. We've used those touch screens before in the lower left hand corner. We did an event it's called Our Price. We've created a venue, temporary venue kind of a pop-up store concept where we had artist create art and it was part of the main area where this is going on. We had 30,000 people go through that venue within a week and a half. And that video capture thing, it was upload your art price experience, ahead backgrounds, funny backgrounds, things they could do. This was just fun. And what it did is it uploaded. People could walk up, take their picture with their family with the background about our price, frames, and stuff like that. They uploaded it to their Facebook page. 5,000 people uploaded pictures to their Facebook page with a little Mercantile Bank thing on it and it uploaded to our Facebook page. So we were sharing that with our customers. And then we also had this integrated with electronic billboards. So part of the fun was randomly we were picking different pictures and we would put them up on digital billboards we have around town.

So we had a lot of fun of that and again the results were 5,000 people uploading through social media at an event that we had. And the amount of exposure there was really invaluable to us. So we had a lot of fun with that and always thinking how do we utilize that kind of magic and bring it to different locations, social media, mobile all that stuff together. So it's all kind of coming together and you know I encourage you guys are probably way more creative than I am, so you'll come up with much better ways to do this but these are just some ideas.

Last but not the least just some resources I use all the time. Follow Jim Bruene at NetBanker, Brandon McGee, financialbrand.com. These are all hopeful resources if you're looking for ideas about what the banks are doing. So hopefully I've burned through that in record time and you guys can hit the happy hour. So I'd be happy to answer any questions but if you want to run out the door, you're not going to hurt my feelings. So thank you.