LoanMart® Website

Technical Requirements

Often times I've found it difficult to get technical and marketing teams speaking the same language. As part of the LoanMart team, I was able to help bridge this gap. This involved researching what technologies IT had proposed and then selling the solutions that would work best for marketing (ie. ease of use, and important details such as canonical URLs and SEO functionality, etc.) In the end we were able to quickly agree on a Bootstrap scaffold with a DNN (DotNetNuke) CMS platform underneath.

Project Management as Design Lead

I was the last member to join the website redesign project - so there were already a lot of business requirements and due dates on the table when I started. The solution to this dilemma was two fold. First, I simply collected all the requirements and set up a "price card" of features vs. time investments. This enabled me to quickly educate the team so we could push and pull what were true requirements as opposed to "nice to have" features. Secondly, I worked very closely with the Project Manager to construct a waterfall model Gantt Chart in SmartSheets. Since this was the first true website project for the Project Manager, a fair amount of education was involved so that she understood how the managers, designers, copy writers, and technical teams interacted in order to keep this project on track.

Content Exploration & Restructuring

Successful design cannot happen in a vacuum. It requires understanding your content, what you are trying to sell, and what matters most to your customers. For me, this process begins by exploring the competitors. It's important to see what's expected in the market place (ie. marketing mechanisms and verbiage.) Next comes a deep dive into the existing content and structure of the site in order to see how we a) measure up to the competitors and b) how we can beat them! The existing LoanMart website had fairly decent bones to it, so it was mainly a matter of restructuring the sections into a more linear purchasing path. Working closely with the Web Analytics Manager I was able to accomplish this as well as our SEO project requirements.

Marketing Design

I was chosen to join the the website redesign project, rather than another UX / UI designer, for my specialty in Marketing Design. Most designers can make a functional, beautiful site - but having a designer with the knowledge of marketing takes your site from eye candy to a functional means of profit. The clearest example of this is seen in the hero section of the home page. Most UX / UI designers will design a hero section consisting of a headline and full screen background image. This tactic is wonderful for conveying branding - but does little to push the conversion needle. I chose to blend that aesthetic with a clean registration form. While reducing the need for a secondary click, the customer no longer has a question as to what the next step is. This simple, but informed, choice dramatically increased sales for LoanMart. The success of this redesign lies in its detailed planning, UX / UI fundamentals, and a solid core of marketing principles. Not only was I able to achieve all the goals set forth by business (to improve functionality, SEO standing, and conversion), but the resulting site has a clear organizational structure that smoothly leads the customer down the conversion path. I've detailed the core sections of the site and their solutions below: Style Guide, Home Page, Content Pages, Blog Pages, Client Portal Pages, and Application Pages.

UX / UI Design

Style Guide

Color Theory

A versatile color palette is key to developing a uniform site with clear visual hierarchy. I choose to develop a complementary color palette with a variety of shades. These colors play well with LoanMart’s brand standards while still being visually captivating.

Typography

A highly structured typographic style guide is key to keeping your content legible. I developed full style sets for Desktop, Tablet, and Mobile keeping these two goals in mind. I outlined definitions for everything from size, line-height, tracking, top and bottom paddings, to color and style.

Icons, Images, & Text

The ultimate goal for the redesign was to develop a flexible CMS skin where the marketing team could autonomously manage content without support from IT. To achieve this, I fleshed out a variety of visual elements – icons, images, and text – that the marketing team could pull from to layout their content. Once completed, I had 45 unique styles for icons, 22 unique styles for images, and 105 unique styles for text.

Forms & Error Handling

BootStrap has a number of handy prebuilt forms and elements which I customized to match the redesigned style guide. This extra effort helped to turn the site from “just another BootStrap site” to something unique that stands out. It was also extremely important to document all the error handling, so that the IT team could move swiftly and minimize errors. Download sample pages.

Responsive Homepage Design

A cross between a traditional homepage and a direct response landing page, there were a number of elements that had to be compensated for with the new responsive LoanMart Home Page. A few highlights include: dual language capability, lead capture form, and live chat applications. The site was designed utilizing the standard 12 column grid native to Bootstrap for ease of coding.

Responsive Content Page Design

Good content does more than just keep your visitors interested – it’s the foundation of what drives traffic to your site. Developing a template to house LoanMart’s CMS content was critical. The template I developed focused on clear hierarchy, legibility, and visual appeal. This, in conjunction with all the elements I developed in my style guide, provided a robust structure that enables the Marketing Team to develop content without relying on IT for deployments.

Responsive Blog Page Design

One overarching goal of the redesign was to improve LoanMart’s SEO standing. The easiest way to accomplish this was through a robust blog system. While the Web Analytics Manager and copywriters worked to improve content, I developed a solid responsive layout. Three of the most important aspects I focused my time on were readability, findability, and an effective use of visuals.

Responsive Client Portal Design

The redesign of the Client Portal was a wonderfully complex project. After an exploration of the existing Client Portal, I discovered a number of ways to improve the customer experience. Aside from a general facelift, my main to focus was to improve security (by adding a password and username retrieval flow) as well as improving usability by restructuring content into easier to use sections.