Ebridge logo lockout

Micro-SaaS Landing Page Case Study

Scroll Down to Discover More

Venuemate Micro-SaaS Landing Page

I’ve been asked to design and develop many websites for venues over the years, and I’ve always though I could simplify the process for both venues and myself.

As most small and medium venues have the same marketing goals it seemed a good idea to build a WordPress theme that would meet most of these goals.

My first iteration of this solution involved selling the theme and providing support for installation and set-up. It became clear early on that support took up huge amounts of time and that a pre-installed and configured solution based on a SaaS model would be more appropriate.

Scroll down to find out more, or view the live site here.

Logo Development

I created a simple logo based on the Montserrat font. I am a big advocate of making sure any logo works as a favicon or touch icon. With a digital product this is a key brand touchpoint. One way to do this is to modify the first letter of your product name to create a unique shape.

Ebridge logo lockout

Venuemate logo

Ebridge logo lockout

Venuemate favicon / touch icon

Typography

Montserrat was selected as the product font. Montserrat is a geometric sans serif font available free from Google fonts which comes in numerous weights. Montserrat bold was used for the logo. Bold was used for headers, a lighter weight for sub-headers and regular for body copy.

Montserrat sample typeface

Colour Palette

Vivid purple was chosen and the main brand colour. A small supporting palette of shades was also developed. maketintsandshades.com an on-line colour tool was used to create shades of the core colour in 20% increments. Two shades darker and two shades lighter. The CSS names used are SASS friendly.

Hex: #462b99
CSS bcp-d2
Hex: #5d3acc
CSS bcp-d1
Hex: #7448ff
CSS bcp
Hex: #906dff
CSS bcp-l1
Hex: #ac91ff
CSS bcp-l2
Hex: #333333
CSS bc-dark
Hex: #f1f2f4
CSS bc-grey

Icons

I'm a bit of a fan of non-representative icons. Mainly due to the difficulty in creating an icon that represents a concept rather that an actual physical object. Many digital products often have intangible benefits such as saving time, reacting quicker, smoothing workflows. These concepts can de challenging to illustrate. A small family of symbols can be used to illustrate these concepts.

The icon strokes were animated using the Vivus JS library.

Icon design grid

Icons were drawn on a 96 x 96 pixel grid with a 2 pixel wide stroke.

Icon grid diagram

Custom CTA Button Animation

I've used the Vivus JS animation library to animate the outline of the custom CTA after seeing the effect on another website. If you just need to animate the outline of say a 'pill' style button this effect is fairly straight forward to implement. Unfortunately I'd already created a angled line with an arrow head visual element as part of the brand visual identity and this proved tricky to animate. The main issue is that the actual SVG file has to be an explicit width. This means that you have to create a separate instance of the CTA depending on the length of the CTA text. Not very scaleable or flexible, but I'd already invested a bit of time figuring out how to get it to work so I persisted with it.

Hover over the button to view animation

Design and Build

Landing page design patterns are fairly well established, and I have quite a bit of experience designing and building landing pages so I skipped the design stage and jumped straight into the build.

I used Bootstrap for the page layout then replaced the default mobile navigation with a quicker slide-in right navigation. I also replaced Bootstrap's hamburger icon with a smoother animated version. I think it's worth investing time and effort into a better hamburger navigation because it's one of the key touch points of the user experience.

If you are interested in building quick and smooth hamburger menus check out this article.

As I am the sole content provider for the site, I haven't bothered to create any content managed sections.

Screen capture showing entire site

Website Screen Capture

Mobile

Most mobile page re-flows are implemented by Bootstrap. Default Bootstrap menu replaced with custom 'slide in' menu. Default Bootstrap hamburger animation replaced.

Icon grid diagram
Icon grid diagram
Icon grid diagram

Various screens mobile view

Photography

I used a free image from Pexels for the only photographic image. The contrast was increased and I used the darken filter in conjunction with a layer in the main brand colour. I later discovered that there is good support for CSS blending modes so I replaced the colour image with a black and white version and used CSS to add the effect.

People dancing in a venue

Main photographic image filter added via CSS

Form

I wanted to create a more animated experience when filling out the form so I used the 'float label' pattern. You can find out more about this pattern here.

The static HTML development version of this was fairly straight forward to create but integrating it into Contact Form 7, the WP plugin I use to handle my forms proved to be problematic. The trick, if you ever need to do this is to strip out ALL Contact Form 7's the embedded styles from within the form editor.

Get Started

Request your trial site login details.

Animated 'float label' style form

Visit the Live Site

View the live site here.