Drupalize.Me

I lead a redesign of Drupalize.me, one of the best places to learn Drupal from friendly and knowledgable experts.

Position

Web Designer

Company

Lullabot

Responsibilities

  • UX Design
  • UI Design

While work­ing at Lullabot, I had the priv­i­lege of work­ing on the Drupalize.Me re­design. Drupalize.Me is a revered site to learn Drupal.

Drupal is a com­plex yet pow­er­ful con­tent man­age­ment sys­tem. Drupal pow­ers some of the biggest sites on the in­ter­net, like white­house.gov and grammy.com.

However, as with most pow­er­ful things, Drupal can have a steep learn­ing curve, leav­ing many be­gin­ners won­der­ing where to start. That’s where Drupalize.Me comes in. Boasting a cat­a­log of more than 242 hours of Drupal train­ing, many at­tribute their Drupal skills to this great site.

The Brief #

As part of the up­grade to Drupal 7, I lead the re­design of Drupalize.Me. The prod­uct quickly be­came near and dear to my heart be­cause of its ed­u­ca­tional pur­pose, en­gaged users, and a team ded­i­cated to im­prov­ing the ex­pe­ri­ence.

The site had­n’t re­ceived an up­date in quite a while, so my job was to con­duct a sur­vey to bet­ter un­der­stand what users wanted from the site, fig­ure out how to make the learn­ing ex­pe­ri­ence bet­ter, and mod­ern­ize the look of the UI.

Starting with a Survey #

Under the di­rec­tion of Jared Ponchot, I started the re­design process with a sur­vey. A well-crafted sur­vey helps me un­der­stand how the user per­ceives fea­tures and in­ter­ac­tions. As a prod­uct ma­tures, clut­ter can be­come a prob­lem.

The sur­vey re­vealed that there were parts of the site that users did­n’t know ex­isted. People needed a bet­ter way of know­ing con­tent was out­dated, sug­gest­ing top­ics and vot­ing on them, and quickly see­ing new ed­u­ca­tional con­tent.

Drupalize.me dashboard

↑ Above: The dash­board was de­signed to be the main hub; show­ing what videos were re­cently added, videos in your queue, a his­tory of re­cently watched videos, and an­nounce­ments.

Wireframing is One of My Favorite Things #

Wireframes are es­sen­tial. It al­lows the team to have con­trolled dis­cus­sions and give hy­per-spe­cific feed­back. It’s the time to talk about func­tion­al­ity, lay­out, hi­er­ar­chy, and site or­ga­ni­za­tion.

These types of de­sign de­ci­sions are im­por­tant, and need time away from the dis­trac­tions of dis­cussing vi­sual lan­guage. Don’t get me wrong, de­cid­ing on the right col­ors is also cru­cial, but wire­fram­ing al­lowed us to have the right con­ver­sa­tions at the right time.

↓ Below: The video page was de­signed to show you what other videos are next in the col­lec­tion and link to newer con­tent if avail­able.

Drupalize.me video view

Using InVision for Feedback #

InVision turned out to be a vi­tal tool for this re­design. Design feed­back with­out con­text can be quite te­dious. InVision al­lowed team mem­bers (and other stake­hold­ers) to com­ment on spe­cific parts of the wire­frames and mock­ups.

Since the team was en­tirely re­mote, it al­lowed every­one to par­tic­i­pate asyn­chro­nously. I was then able to mark com­ments as re­solved when a con­ver­sa­tion would come to an end or a change was im­ple­mented.

Working on the re­design of Drupalize.Me was a de­light­ful ex­pe­ri­ence and one of the most mean­ing­ful of my ca­reer. I’m ex­cited to see much of the same team I worked with con­tinue the vi­tal ed­u­ca­tion work they do.