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 working at Lullabot, I had the privilege of working on the Drupalize.Me redesign. Drupalize.Me is a revered site to learn Drupal.

Drupal is a complex yet powerful content management system. Drupal powers some of the biggest sites on the internet, like whitehouse.gov and grammy.com.

However, as with most powerful things, Drupal can have a steep learning curve, leaving many beginners wondering where to start. That’s where Drupalize.Me comes in. Boasting a catalog of more than 242 hours of Drupal training, many attribute their Drupal skills to this great site.

The Brief #

As part of the upgrade to Drupal 7, I lead the redesign of Drupalize.Me. The product quickly became near and dear to my heart because of its educational purpose, engaged users, and a team dedicated to improving the experience.

The site hadn’t received an update in quite a while, so my job was to conduct a survey to better understand what users wanted from the site, figure out how to make the learning experience better, and modernize the look of the UI.

Starting with a Survey #

Under the direction of Jared Ponchot, I started the redesign process with a survey. A well-crafted survey helps me understand how the user perceives features and interactions. As a product matures, clutter can become a problem.

The survey revealed that there were parts of the site that users didn’t know existed. People needed a better way of knowing content was outdated, suggesting topics and voting on them, and quickly seeing new educational content.

Drupalize.me dashboard

↑ Above: The dashboard was designed to be the main hub; showing what videos were recently added, videos in your queue, a history of recently watched videos, and announcements.

Wireframing is One of My Favorite Things #

Wireframes are essential. It allows the team to have controlled discussions and give hyper-specific feedback. It’s the time to talk about functionality, layout, hierarchy, and site organization.

These types of design decisions are important, and need time away from the distractions of discussing visual language. Don’t get me wrong, deciding on the right colors is also crucial, but wireframing allowed us to have the right conversations at the right time.

↓ Below: The video page was designed to show you what other videos are next in the collection and link to newer content if available.

Drupalize.me video view

Using InVision for Feedback #

InVision turned out to be a vital tool for this redesign. Design feedback without context can be quite tedious. InVision allowed team members (and other stakeholders) to comment on specific parts of the wireframes and mockups.

Since the team was entirely remote, it allowed everyone to participate asynchronously. I was then able to mark comments as resolved when a conversation would come to an end or a change was implemented.

Working on the redesign of Drupalize.Me was a delightful experience and one of the most meaningful of my career. I’m excited to see much of the same team I worked with continue the vital education work they do.

Stay in the Loop

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