Webform

I worked on Webform, a form and survey service built on Drupal and the Webform module

Position

Web Designer

Company

Lullabot

Responsibilities

  • UX Design
  • UI Design

While I worked at Lullabot, I was given the design reins to Webform: a project by the uber-intelligent Nate Lampton. Webform is a form and survey service built on Drupal.

Nate built the original Drupal module by the same name in 2004. The site’s point was to make it easier for people to create forms and surveys without needing to create a website.

Nate had already established a brand and wanted design work that could build upon and strengthen it. He provided me with assets and a set of swatches to get acquainted with, and I got straight to work.

The Login Flows #

My first task was to re-design the login and sign-up pages. Although the pages did an ok job, as Nate put it, they felt too “Drupal.” He wanted something custom, something that would make this process easier and fun.

Webform sign up

↑ Above: The login page was a great place to get people familiar with the Webform brand's sunny aesthetic.

I solved this problem by playing on the illustrations in other parts of the site and bringing them to the login screen. I brought over elements like the sunny sky and clouds to give the pages a happy feeling and made the forms small and straightforward.

Tim's designs integrated perfectly with Webform.com, taking into consideration our existing styles but elaborating in an "outside the box" approach. It was a pleasure to work with Tim.

Nathan Haug Founder, Webform.com

The Blog #

Nate also wanted a better-looking blog. As with any product, there’s a lot to announce to users. Webform needed a blog that looked good and had some lovely looking comments.

After thinking and sketching out several layouts, we arrived at the one currently on the site. It’s simple, allows for large images, and sports its very own WYSIWYG theme for commenting.

Webform blog layout

↑ Above: The blog was one of the funnest parts to design for me.

Dashboard #

For me, the dashboard was my favorite to design. Data can be beautiful, and this page proves it. Nate had recently thought of new information to bring to the dashboard. We talked over the phone, and I got to work on a design for this new and handy information. With the paid plans, the dashboard became even more essential. It was a place to alert users of their plan limits and the possibility to upgrade.

↓ Below: I designed the dashboard to help users quickly access their form controls, review recent submissions, and see their plan limit.

Webform dashboard

I solved the problem by presenting data in an easy to consume way. The dashboard would display the numbers in a large font-size, and an accompanying graph would let them know their remaining space before hitting the limit. It also made it simple to access forms and view recent submissions.

It was a pleasure working with Nate on Webform.

Stay in the Loop

I send a periodic email with life updates and new projects. No spam. No shenanigans.