Case Study: My Design Checking Application

Project Brief

New App for Customers

Midwest Bank was looking to add a build-your-own checking app to their online presence. They wanted a way for customers to have easy access to see what products Midwest Bank had to offer. This way they could compare different selections before meeting with a banker and actually making a decision on the various options available while opening or updating their checking accounts.


Design & Development

From Rough Mock to Polished Design

Our designer took and refined the client’s rough mockups into the various screen designs and used the same color palette used for the main Midwest Bank website. He used a very clean layout with prominent sections so it was very easy for the users to progress through the selections. Each selection also comes with an “i” icon that when clicked, reveals a more detailed description of the product/service.

The Importance of Front End Tools

The My Design Checking application is not a complex app. At the foundation, it is a calculator with the functionality to print and email your final totals and results. It’s overall layout is fairly simple until you get to the options section grid. The client’s intent was once the information icon was clicked, the option box would expand in size and the other option boxes would reflow.

Originally, I had sent the front end build to a developer we had partnered with before to help handle overflow work. After several delays, the front end we received back had numerous issues and was not responsive for mobile viewports. Our developer who was to be integrating the front end of the application with Umbraco and I reviewed the code to determine next steps. It was apparent that the outside developer was not familiar with Bootstrap and instead of using the masonry.js library I suggested, tried to hand-code the option grid. The result was bloated code with a lot of !important statements and fixed heights in the CSS. Due to time constraints, we ended up having to scrap most of the code. I ended up taking on the front end build and used the masonry.js library for more rapid production. I also refactored the jQuery being used for the functionality so it was cleaner and more efficient for future development.

Integration with Umbraco

The My Design Checking application was developed independently of the Umbraco CMS with the plan of building it into Umbraco templates so that the client could still use Umbraco to administer the application. This gives the client the freedom to update content without relying on a developer. Much of the content is editable through the CMS, so the client can add/remove products and options with ease. Once the front end was rebuilt, our developer took the code and integrated it with the Umbraco CMS for the final product.


Results

A Fun Way to Engage Customers

The My Design Checking App gives customers a fun way to interact with Midwest Bank’s website and get a quick preview/summary of the products and services they offer. They can mix, match, and tailor the optional services they want and find out the cost to them. It also gives them a choice to reach out to their local branch to send information about their selection so the bankers will have it on hand for when the client is ready to come in for a sit-down meeting.