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 de­sign reins to Webform: a pro­ject by the uber-in­tel­li­gent Nate Lampton. Webform is a form and sur­vey ser­vice built on Drupal.

Nate built the orig­i­nal Drupal mod­ule by the same name in 2004. The site’s point was to make it eas­ier for peo­ple to cre­ate forms and sur­veys with­out need­ing to cre­ate a web­site.

Nate had al­ready es­tab­lished a brand and wanted de­sign work that could build upon and strengthen it. He pro­vided me with as­sets and a set of swatches to get ac­quainted with, and I got straight to work.

The Login Flows #

My first task was to re-de­sign the lo­gin and sign-up pages. Although the pages did an ok job, as Nate put it, they felt too Drupal.” He wanted some­thing cus­tom, some­thing that would make this process eas­ier and fun.

Webform sign up

↑ Above: The lo­gin page was a great place to get peo­ple fa­mil­iar with the Webform brand’s sunny aes­thetic.

I solved this prob­lem by play­ing on the il­lus­tra­tions in other parts of the site and bring­ing them to the lo­gin screen. I brought over el­e­ments like the sunny sky and clouds to give the pages a happy feel­ing and made the forms small and straight­for­ward.

Tim’s de­signs in­te­grated per­fectly with Webform.com, tak­ing into con­sid­er­a­tion our ex­ist­ing styles but elab­o­rat­ing in an outside the box” ap­proach. It was a plea­sure to work with Tim.

Nathan Haug Founder, Webform.com

The Blog #

Nate also wanted a bet­ter-look­ing blog. As with any prod­uct, there’s a lot to an­nounce to users. Webform needed a blog that looked good and had some lovely look­ing com­ments.

After think­ing and sketch­ing out sev­eral lay­outs, we ar­rived at the one cur­rently on the site. It’s sim­ple, al­lows for large im­ages, and sports its very own WYSIWYG theme for com­ment­ing.

Webform blog layout

↑ Above: The blog was one of the funnest parts to de­sign for me.

Dashboard #

For me, the dash­board was my fa­vorite to de­sign. Data can be beau­ti­ful, and this page proves it. Nate had re­cently thought of new in­for­ma­tion to bring to the dash­board. We talked over the phone, and I got to work on a de­sign for this new and handy in­for­ma­tion. With the paid plans, the dash­board be­came even more es­sen­tial. It was a place to alert users of their plan lim­its and the pos­si­bil­ity to up­grade.

↓ Below: I de­signed the dash­board to help users quickly ac­cess their form con­trols, re­view re­cent sub­mis­sions, and see their plan limit.

Webform dashboard

I solved the prob­lem by pre­sent­ing data in an easy to con­sume way. The dash­board would dis­play the num­bers in a large font-size, and an ac­com­pa­ny­ing graph would let them know their re­main­ing space be­fore hit­ting the limit. It also made it sim­ple to ac­cess forms and view re­cent sub­mis­sions.

It was a plea­sure work­ing with Nate on Webform.