Role - Visual Design Consultant

The folks at QC Vault initially brought me on to write content for their landing page. Turned out they were also in need of a Visual Designer for the landing page itself as well as on-boarding workflows. I was happy to oblige.

 

Project Goals

QCV was in early stages (pre MVP) when I came on the project. At this point they were still trying to find product market fit, and while they were targeting a few specific niches, they didn't want to lock themselves out of markets they hadn't considered.

Rather than communicating the specifics of a product that didn't exist yet, the initial goal of the landing page was really to gauge interest. Once the MVP was ready, the goal was to create an environment that fostered as many conversions as possible so that the developers would have a better shot at statistical significance.

Going off of these requirements, I followed my typical M.O., keeping everything super minimal and modest, but also distinct and unambiguous, inline with the brand principles of professionalism & friendliness, and above all, geared toward conversion.   

 

Typography

After initial discussions and a few wireframes, I had a pretty good idea about content and where everything needed to go. Responsiveness was a must. For the visual design, I began with typography to establish a vertical rhythm. Using an 8 point grid, I setup a responsive scaling table, and I chose font sizes with line heights (always divisible by 8) that would position text on the baseline in all use cases.  

 

 
 
 

 

Layout

By combining the baseline system with a standard 12 column bootstrap layout, I created a responsive modular grid, which made arrangement, alignment, and sizing of elements a breeze across devices.

 

 

Landing Page Grid + Wireframe

 

 

Color

Color was a little bit easier for this project because the product had already been designed. The real challenge was applying an existing color scheme to a new component of the project. But considering I was only working with five colors it wasn't too hard.  

 

 
 

 

On-boarding

Historically, sign up screens have had a barrage of fields, asking for everything under the sun including repetitive fields like password confirmation. This can be annoying when you're not sure whether or not you're going to keep using the product, and it makes a bad first impression.

At the time of this design, applications were just starting to move the customer profiling process away from the the sign up process, and we embraced this trend whole-heartedly.

As with the landing page, I took a mobile first approach and went through a number of variations before settling on the following:

            

 

Mobile Login + Sign Up

Mobile Version 3 Register.png
 

Desktop Login + Sign Up

 

 

Finished Product

The above culminated in a nice polished responsive web page with the right balance of product information and simplicity, optimized for on-boarding and easy maintenance. 

 

 

Desktop Landing Page

 

 

Takeaways

One thing I've found as a designer is that I'll often look at older projects and think about things I might do differently had I known what I've learned since. Though it was a great learning experience and a chance to stretch my legs as a visual designer, this particular project ended up taking significantly longer than I initially anticipated, and unfortunately the product never made it past beta. 

If I had it to do over again, I probably would have focused more on specific goals and outcomes and less on deliverables. Now that I've been through the process a few times, I have a much better feel for how to match up goals with the right strategies and actions, how to improvise and adjust as new results come in, and how to put a tentative project plan in place that accounts for and accommodates all the contingencies.