Ricardo Zea. Web Designer in Dayton, Ohio

Check ‘n Go

http://www.checkngo.com

Check ‘n Go is a small lending service ($100 up to $5,000) with brick and mortar locations, and online. I worked on the online side of the business.

I worked on this project for almost 2 years.

When I joined the company, another designer had inherited the project from yet someone else. I eventually ended up leading the project as the go-to web designer due to being more experienced in handling complex projects like this one.

Some of the things I worked on with this project

  • Worked closely with the Analytics team
  • Help the Analytics team with the creation of variations for their tests
  • Help the email team with email templates
  • Create, design and relaunch the blog Dollars & Sense
  • Worked on a prototype for the improved Check ‘n Go Android app
  • Redesigned and improved the main menu for small screen devices

View HTML mockups/prototypes

Other projects

  • Check ‘n Go - Android App Screen Designs
  • Check ‘n Go - Android App: User Flows
  • Check ‘n Go - Responsive Menu Designs
  • Check ‘n Go - Homepage: Before
  • Check ‘n Go - Homepage: After
  • Check ‘n Go - Homepage Improvements
  • Check ‘n Go - Sliders Designs
  • Dollars & Sense Blog - Wireframe
  • Dollars & Sense Blog - Design
  • Dollars & Sense Blog - Website

A particular story

When I started working on checkngo.com I realized that the testimonials were made out of many images (each word was a PNG file) rather than plain HTML. All these images accounted for more than 120 requests.

The reason they were using images for the testimonials was for SEO reasons: the Analytics team didn’t want that content to be indexed. Little did they know that it was doing more harm than good to the UX and SEO due to the sheer amount of HTTP requests slowing down the site, and also because page speed was now being considered by Google as a factor in their ranking algorithm.

I decided to do something about it and made those testimonials plain ol’ HTML in my local development environment. Ran several performance tests and with those numbers in hand went to the Director of Digital Marketing (Analytics) and convinced him to make the change.

He agreed on the spot.

Here are the results:

  • Increased page load speed by 84% = Reduced page load time from almost 6 seconds (5.83s) to less than 1 second (939ms)
  • Reduced page weight by 42% = From almost 1MB (938KB) down to 546KB
  • Removed 89% of unnecessary HTTP requests = From 157 requests down to only 20

Workflow

There were two fronts for this project: a WordPress front and a .NET front.

The WordPres front was the one I worked most of the time on. The .NET front was handle with off-shore developers in Lima, Perú. The WordPress side corresponded to the marketing site itself. The .NET side was the loan application system and forms.

From the WordPress front, the workflow happend in-house most of the times. If something needed to be done to the homepage, I would develop in my local server then I would meet with the Project Manager or Analytics person to show them the final result in my local machine. Once approved I committed my changes and updates to Git using Tortoise.

From a .NET front, I created HTML mockups and handed them off to the off-shore developers in Perú for implementation. For example, the steps in the header in the application pages.

Responsibilities

Wireframes Visual Design Interaction Design HTML + CSS Scripting
N/A 100% 100% 100% 90%

Wireframes

Due to the team culture, wireframes didn’t usually come from me. They actually came from the Analytics and Email teams.

Since I was brought into the discussions later in the process, this was very counter productive. Nonetheless, that never stopped me from saying what needed to be said in the meetings about the wireframes created by others without our team’s input.

Visual Design

When I took over the Check ‘n Go website, the design system was already in place since it had been created before I joined the company.

Nonetheless, I tried to improve things around the website whenever possible.

For example, the subtle radial gradient in the hero image where the loan values are. My idea was to bring attention to that specific spot on the page.

Another thing, albeit not pretty, was the hero image. When I joined the team I found out the first image was stolen. We contacted the provider and purchased a licensed photo. I went ahead and cropped it in Photoshop making sure the quality of the cropping was top notch.

As much as I wanted to change it, the image of the blond lady looking at her broken car in the homepage was supposedly the winning image in a series of tests ran by the Analytics team.

Interaction Design

One of the features I put a very, very strong interaction emphasis on was the loan amount slider in the homepage.

The current slider went through several designs until I landed on the one seen in the screenshots.

This slider is mobile-friendly in degrades gracefully in legacy browsers to an input field. So the feature is still usable in old browsers.

HTML + CSS

The homepage is 75% created by me. The other 25% is legacy markup and code from the prior designer.

The main hero area, the testimonials, the list of states, the blog promo section and footer, are 100% created by me.

Another story was that when I joined the company, the designers hadn’t heard what Sass was, so I taught him everything I knew about it. After a couple of weeks we had “migrated” all the CSS to SCSS.

All CSS for the Check ‘n Go site is based now on Sass (SCSS).

I also added ARIA roles to the different sections of the site to improve accessibility.

Scripting

Most of the time I spend scripting was for the slider(s) in the homepage.

Another story was that the mobile menu was very badly built and quite difficult to use. So I went in and rebuilt the whole thing with more performant HTML+CSS+JS and a lot easier to use.

We used jQuery.